Element Selector Tool

Press Ctrl+E to get friendly CSS selectors for any element

作者: jamubc
日安装量: 0
总安装量: 2
评分: 0 0 0
版本: 6.2
创建于: 2025-07-14
更新于: 2025-07-15
大小: 17.6 KB
许可证: Apache 2.0
适用于: 所有网站

Element-Selector-tree-tool | See on Github: Element-Selector-tree-tool

A powerful userscript that provides developer-friendly CSS selectors for any DOM element with visual highlighting and hierarchical tree view.

Highlighting an element and displaying its CSS selector

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.