Element Picker
The element picker is the core interaction tool. Click the Pick Element button in the side panel, then hover over any element on the page. Elements are highlighted as you move your mouse. Click to select.
How to use it
Click the "Pick Element" button in the side panel to enter selection mode.
Move your mouse over the page. Elements are highlighted in real-time as you hover, showing you exactly what will be captured.
Click an element to add it as a field. The extension generates a CSS selector and detects all similar elements on the page.
Rename the field, change the attribute to extract (text, href, src, etc.), or adjust the selector if needed.
What you can pick
- Text content — product names, prices, descriptions, headings
- Links — URLs from anchor tags
- Images — image source URLs
- Any attribute — data attributes, classes, IDs, or any HTML attribute
Smart selector generation
When you click an element, the extension generates a stable CSS selector that targets similar elements across the page. The selector generator:
- Prefers class names and semantic attributes over position-based selectors
- Creates selectors that are resilient to minor page layout changes
- Automatically detects repeating patterns to match all similar elements
- Highlights all matched elements so you can verify the selection visually