Element Selector Tool

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

Κάντε μια ερώτηση, δημοσιεύστε μια ανασκόπηση, ή αναφέρετε τον κώδικα.

Δημιουργός: jamubc
Ημερήσιες εγκαταστάσεις: 0
Σύνολο εγκαταστάσεων: 3
Βαθμολογίες: 0 0 0
Έκδοση: 6.2
Δημιουργήθηκε την: 14/07/2025
Ενημερώθηκε την: 03/11/2025
Μέγεθος: 40 KB
Άδεια: Μη διαθέσιμη
Εφαρμόζεται σε: Όλοι οι ιστοχώροι

Element-Selector-tree-tool (Source) (View on Greasyfork)

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

Why it’s useful: Click any element to copy a precise, unique selector so AI or automation can generate a working userscript faster with fewer mistakes.

[![Chrome](https://img.shields.io/badge/Chrome-✓-4285F4?logo=googlechrome&logoColor=white)](https://www.google.com/chrome/) [![Firefox](https://img.shields.io/badge/Firefox-✓-FF7139?logo=firefox&logoColor=white)](https://www.mozilla.org/firefox/) [![Safari](https://img.shields.io/badge/Safari-✓-006CFF?logo=safari&logoColor=white)](https://www.apple.com/safari/)

Highlighting an element and displaying its CSS selector

Features

One-Click Copy and quick view: Click any highlighted element to copy its selector to clipboard
Interactive Tree View: Shows element hierarchy with syntax highlighting
Smart Selector Generation: Prioritizes reliable selectors (ID → data attributes → unique classes → semantic attributes)
Menu Options: Change hotkeys and toggle enable/disable directly from the menu

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
Setup your own hotkey!:

Usage

hotkey defaults to Ctrl+E, you can change this in the menu *
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], [data-cy], [data-test]
Stable Class Combo: button.primary.large (avoids hashed/dynamic classes)
ARIA Attributes: [role="button"], [aria-label="Close"]
Semantic Elements: input[name="email"], button[type="submit"]
Contextual :has() (when applicable): e.g. label[for="id"]:has(+ input)
Hierarchical Path: nearest‑ID path using :nth-of-type when needed

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.