Element Selector Tool

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

目前為 2025-07-14 提交的版本，檢視最新版本。

安裝腳本 ?

作者: jamubc
評價: 0 0 0
版本: 6.1
建立日期: 2025-07-14
更新日期: 2025-07-14
尺寸: 13.5 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.

Features

Smart Selector Generation: Prioritizes reliable selectors (ID → data attributes → unique classes → semantic attributes)
Visual Element Highlighting: Precise border overlay with responsive positioning
Interactive Tree View: Shows element hierarchy with syntax highlighting
One-Click Copy: Click any highlighted element to copy its selector to clipboard
Keyboard Toggle: Press Ctrl+E to activate/deactivate selector mode

Installation

Option 1: Userscript Manager (Recommended)

Install a userscript manager like Tampermonkey or Violentmonkey
Click here to install the script
The script will automatically run on all websites

Option 2: Console (Quick Test)

Copy the contents of script.js
Open your browser's developer console (F12)
Paste and run the script directly in the console

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.