A powerful userscript that provides developer-friendly CSS selectors for any DOM element with visual highlighting and hierarchical tree view.
Features
- One-Click Copy: Click any highlighted element to copy its selector to clipboard
- Smart Selector Generation: Prioritizes reliable selectors (ID → data attributes → unique classes → semantic attributes)
- Interactive Tree View: Shows element hierarchy with syntax highlighting
- Keyboard Toggle: Press
Ctrl+E or esc to activate/deactivate selector mode
Installation
- Install a userscript manager like Tampermonkey or Violentmonkey or Userscript
- Click here to install the script
- The script will automatically run on all websites
Usage
- Activate: Press
Ctrl+E on any webpage
- Inspect: Hover over elements to see their selectors and hierarchy
- Copy: Click on any highlighted element to copy its CSS selector
- Deactivate: Press
Ctrl+E again to exit selector mode
Selector Priority
The tool generates selectors in this priority order:
- ID:
#unique-id (most reliable)
- Data Attributes:
[data-testid="value"] (testing/automation friendly)
- Unique Class Combinations:
button.primary.large (if selector is unique)
- ARIA Attributes:
[role="button"], [aria-label="Close"]
- Semantic Elements:
input[name="email"], button[type="submit"]
- Hierarchical Path:
#container > div:nth-child(2) > span
Tree View Features
- Syntax Highlighting: Color-coded tags, IDs, classes, and attributes
- Hierarchical Display: Shows parent-child relationships with tree characters
- Attribute Preview: Displays relevant data attributes and ARIA labels
- Text Content: Shows text content for leaf nodes
- Smart Truncation: Handles long attribute values and selectors
Technical Details
- Framework: Pure JavaScript userscript
- Dependencies: @violentmonkey/shortcut for keyboard handling
- Compatibility: Works on all modern browsers
- Performance: Minimal overhead, only active when toggled
Contributing
Feel free to submit issues or pull requests to improve the tool's selector generation or user experience.
License
This project is licensed under the Apache License, Version 2.0 with Commons Clause License Condition v1.0 - see the LICENSE file for details.
Commons Clause License Condition v1.0: The Software is provided to you by the Licensor under the License, as defined below, subject to the following condition.
Without limiting other conditions in the License, the grant of rights under the License will not include, and the License does not grant to you, the right to Sell the Software.
For purposes of the foregoing, "Sell" means practicing any or all of the rights granted to you under the License to provide to third parties, for a fee or other consideration (including without limitation fees for hosting or consulting/ support services related to the Software), a product or service whose value derives, entirely or substantially, from the functionality of the Software.
