CSS Selector Copier on Click

WHAT IT DOES

CSS Selector Copier on Click lets you instantly copy the CSS selector of any element on a webpage with a single click. When you activate the picker mode, hovering over any element highlights it with a colored outline, and clicking copies its unique CSS selector to your clipboard. The selector is generated using a smart strategy that combines the element's ID, classes, tag name, and nth-child position to create a robust, unique selector that works for web scraping, automated testing, and CSS styling. A notification appears to confirm the selector was copied. The extension includes a keyboard shortcut (Alt+C by default) to toggle the picker mode on and off, and you can customize the shortcut, highlight color, and notification duration.

WHERE IT RUNS

The extension works on every website with DOM elements, including complex single-page applications, dynamic content, and traditional web pages. It runs locally in your browser, analyzing the page's DOM and generating selectors without sending any data to external servers. The extension supports all major browsers and adapts to both desktop and mobile viewports seamlessly.

HOW TO USE

After installation, click the extension toolbar icon to open the CSS Selector Copier panel. Click "Start Picker Mode" or press Alt+C (customizable) to activate the picker. As you move your mouse across the page, elements will be highlighted with a colored outline. Click any highlighted element—its CSS selector is immediately copied to your clipboard and a notification appears at the bottom of the screen confirming the action. Click "Stop Picker Mode" or press Escape to deactivate the picker. To customize the experience, open the extension panel and adjust the selector generation strategy (Robust or Shortest), change the highlight color using the color picker, set a custom keyboard shortcut, or adjust the notification duration (500-5000ms). For per-site customization, enable or disable the extension on specific websites using the per-site controls.

THE ACTUAL MECHANISM — DOM TRAVERSAL WITH UNIQUE SELECTOR GENERATION PIPELINE

The extension uses a DOM traversal algorithm that generates CSS selectors with guaranteed uniqueness. When an element is clicked, the extension first checks for an ID—if the element has a unique ID, it returns a simple `#id` selector immediately. If no unique ID exists, the extension traverses upward from the clicked element, building a selector string from tag names and classes. At each level, it checks whether the partial selector uniquely identifies the element within the document. If not, it adds classes to the selector or introduces an `:nth-of-type()` pseudo-class to distinguish the element from its siblings. The extension uses `CSS.escape()` to safely handle special characters in IDs and class names. Two strategies are available: "Robust" builds a full path with all ancestors, while "Shortest" attempts to find the shortest unique selector. The generated selector is validated by querying the document with `document.querySelectorAll()` to ensure it matches exactly one element before returning it. All selectors are generated client-side with no external dependencies.

THE PANEL

The settings panel is a lightweight, draggable overlay that appears in the center of your screen. You can reposition it by clicking and dragging the title bar; release it near the screen edge and it will snap into place automatically. To collapse the panel into a compact title bar, click the minimize button, expanding it again with the same control. The panel is fully responsive, adapting to different screen resolutions with a minimum width of 300px and a maximum of 480px. Press the Escape key at any time to dismiss the panel without applying changes. All controls—the enable/disable toggle, start/stop/toggle picker buttons, selector strategy selector, highlight color picker, keyboard shortcut input, notification duration input, and per-site controls—are accessible within a clean, high-contrast interface that respects your system's color scheme.

PLEASE NOTE

This extension requires the free BotGentz companion extension to be installed and active, which provides the underlying DOM access, clipboard, and storage engine. The selector generation algorithm works on the vast majority of elements but may produce overly long selectors for deeply nested elements. The "Shortest" strategy attempts to minimize selector length but may not always be unique on complex pages. On dynamic websites, elements may have generated classes or IDs that change on page reload—selectors using these attributes may not persist. No personal data, browsing history, or page content is ever collected, stored, or transmitted. All settings are saved using the browser's storage API and remain solely on your device. The extension does not inject ads, trackers, or analytics of any kind.