Select elements, outline them in red, expand/shrink selection, and show a small copy box.
As of
e
html element parser just by tapping anywhere in screen has a static extension menu option to activate so ir won't interfere with normal browsing
-----
# Element Parser
**Interactive element selector with outline highlighting, parent/child navigation, and HTML extraction**
---
## What It Does
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.
---
## How It Works
| 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 |
---
## Controls
- **Activation** – Via userscript manager menu command labeled `🔍 Toggle Element Selector`
- **State** – Active (green indicator) / Inactive (white indicator) via alert messages
- **Navigation** – Use the Expand and Shrink buttons on the top panel
- **Export** – Save button opens the copy box; click "Copy to Clipboard" to copy HTML
---
## Visual Elements
| 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 |
---
## Copy Methods
The script uses a priority chain for clipboard access:
1. `GM_setClipboard` (if available)
2. `navigator.clipboard.writeText` (modern browsers)
3. `document.execCommand('copy')` (fallback)
---
## Installation
1. Install a userscript manager (Tampermonkey, Violentmonkey, Via browser)
2. Create a new script and paste the source
3. The script runs on all pages (`*://*/*`)
4. Activate via the userscript menu command
---
## Notes
- The outline follows the element during scroll
- Clicking inside the panel or copy box does not trigger a new selection
- Expand/Shrink history is per selection session
- Selecting a new element resets the navigation history
---
## Troubleshooting
| 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 |
