☰

Element Selector Tool

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

当前为 2025-07-15 提交的版本，查看 最新版本。

如何安装

您需要先安装一个扩展，例如 篡改猴、Greasemonkey 或 暴力猴，之后才能安装此脚本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安装一个扩展，例如 篡改猴 或 暴力猴，之后才能安装此脚本。

您需要先安装一个扩展，例如 篡改猴 或 Userscripts ，之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展，例如 Tampermonkey，才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

（我已经安装了用户脚本管理器，让我安装！）

如何安装

您需要先安装一款用户样式管理器扩展，比如 Stylus，才能安装此样式。

您需要先安装一款用户样式管理器扩展，比如 Stylus，才能安装此样式。

您需要先安装一款用户样式管理器扩展，比如 Stylus，才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

（我已经安装了用户样式管理器，让我安装！）

作者
jamubc
评分
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

Tampermonkey Violentmonkey Web Script

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

Chrome Firefox Safari

Highlighting an element and displaying its CSS selector Hierarchical tree view of DOM elements

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

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

Usage

  1. Activate: Press Ctrl+E on any webpage
  2. Inspect: Hover over elements to see their selectors and hierarchy
  3. Copy: Click on any highlighted element to copy its CSS selector
  4. Deactivate: Press Ctrl+E again to exit selector mode

Selector Priority

The tool generates selectors in this priority order:

  1. ID: #unique-id (most reliable)
  2. Data Attributes: [data-testid="value"] (testing/automation friendly)
  3. Unique Class Combinations: button.primary.large (if selector is unique)
  4. ARIA Attributes: [role="button"], [aria-label="Close"]
  5. Semantic Elements: input[name="email"], button[type="submit"]
  6. 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.