Select elements, outline them in red, expand/shrink selection, and show a small copy box.
e
Interactive element selector with outline highlighting, parent/child navigation, and HTML extraction
This script lets you click any element on a webpage to inspect it. It draws a red outline around the selected element, displays its tag and class name, and provides controls to expand up the DOM tree, shrink back down, save the element's HTML, or cancel the selection. Selected HTML can be copied to clipboard via a compact popup box.
| Action | Result |
|---|---|
| Click any element | Highlights it with a red outline, shows tag/class info |
| Expand | Moves selection to the parent element |
| Shrink | Returns to the previously selected child element |
| Save | Opens a small modal with the element's outerHTML |
| Cancel | Clears selection and hides the panel |
🔍 Toggle Element Selector| Component | Description |
|---|---|
| Red outline | Highlights the currently selected element |
| Top panel | Shows element tag+class, plus Expand/Shrink/Save/Cancel buttons |
| Copy box | Bottom-center modal with read-only input and clipboard button |
The script uses a priority chain for clipboard access:
GM_setClipboard (if available)navigator.clipboard.writeText (modern browsers)document.execCommand('copy') (fallback)*://*/*)| Issue | Fix |
|---|---|
| Script not appearing in menu | Check @grant GM_registerMenuCommand is allowed in your manager |
| Copy fails | Verify clipboard permissions or try the fallback method |
| Outline misaligned | Scroll or resize may require re-clicking the element |
| Panel blocking clicks | Clicks on the panel are ignored; click outside to select |
