Element XPath Copier

WHAT IT DOES

Element XPath Copier lets you hover over any element on the page to instantly see its XPath, CSS selector, tag name, ID, classes, and key attributes. A floating tooltip follows your cursor showing the selectors in real-time. Click any element to copy its XPath or CSS selector to your clipboard—choose which selector type to copy (XPath only, CSS only, or both). The panel updates dynamically to show the current element's details, making it perfect for web scraping, test automation, debugging, or just understanding page structure.

WHERE IT RUNS

Any webpage—the script injects event listeners to capture hover and click events. No server-side calls, no external dependencies, no site-specific configuration. Works on local files, development environments, production sites, and pages behind authentication. The floating tooltip overlays the page without interfering with normal interaction.

HOW TO USE

Install the script and open any page. Click "Enable Picker" in the panel to activate hover mode. Move your cursor over any element—a floating tooltip shows the XPath and CSS selector in real-time. The panel displays the current element's tag, ID, classes, and attributes. Click on any element to copy its selector(s) to your clipboard. Choose your preferred copy format: XPath only, CSS only, or both (newline separated). Toggle the floating tooltip on or off. Adjust the tooltip offset (X and Y pixels) to position it comfortably. Click "Disable Picker" to deactivate. Keyboard shortcut: Ctrl+Shift+E to toggle the picker on/off without opening the panel.

TECHNICAL MECHANISM

The script injects mouseover, mousemove, mouseout, and click event listeners on the document when the picker is enabled. On mouseover, it captures the target element, generates its XPath and CSS selector, and updates both the tooltip and the panel. XPath generation builds a full path by climbing the DOM tree from the element to the root, using tag names and sibling indices (e.g., div[2]/span[1]). When an element has an ID, it returns a compact XPath using the ID (//*[@id="value"]) for precision. CSS selector generation builds a path using tag names, classes, and :nth-of-type() pseudo-classes when necessary to disambiguate siblings. The tooltip is a fixed-position div that follows the cursor with configurable offset, styled to match the panel theme. Clicking an element copies the selected selector type(s) using GM_setClipboard, with a brief "Copied!" confirmation in the tooltip. A highlight outline (2px solid accent color) is added to the hovered element and removed on mouseout.

THE PANEL

The tool runs inside BGPanel, a lightweight UI system built into the BotGentz extension. Drag the panel by its header to reposition it anywhere on screen—it snaps to edges and remembers its position per site. Click the header to collapse the panel into a small bubble; click again to expand. Resize the panel by dragging its bottom-right corner. Press Escape at any time to close the panel. The panel stays out of your way but is always accessible via the extension's toolbar.

PLEASE NOTE

Requires the free BotGentz browser extension to run—this script does not work standalone. The script reads only the DOM—it does not send data anywhere, does not store page content, and does not access other tabs or browser history. The event listeners only run when the picker is enabled; disabling the picker removes all listeners and cleans up the tooltip. The floating tooltip may overlap with page elements—use the offset controls to adjust its position. XPath and CSS selectors are generated from the DOM structure at hover time; dynamically added or removed elements are handled in real-time. Some pages may have extremely deep DOM trees; XPath generation is optimized but may be slower on complex pages. This tool is intended for development and debugging—use responsibly on sites you own or have permission to inspect.