Web Path Picker

About

One click saves a thousand tokens.

Stop describing UI elements to your AI agent. Click any element on any website — Web Path Picker copies a clipboard-ready snippet:

[xPathInfo] Route: /dashboard, XPath: //*[@id="root"]/main/section[2]/button, CSS: main > section.layout-content > button.primary

Paste it straight into Cursor, Claude Code, Codex, or any AI coding agent. Your agent now knows exactly which element you mean — no screenshots, no hand-typed selectors.

— How it works —
1. Click the toolbar icon. The cursor turns into a crosshair and a teal overlay highlights the hovered element with its tag and classes.
2. Click any element to copy Route + XPath + CSS to the clipboard.
3. Press Esc or click the toolbar icon again to cancel.

— Features —
• Smart XPath — ID shortcuts and SVG-boundary detection produce minimal, readable expressions.
• Unique CSS selector — capped at 5 levels, auto-filters Ant Design / emotion css-* hash classes.
• React component detection — on client-rendered React apps, the tooltip also surfaces the nearest user component name from the React Fiber tree.
• Works anywhere — https://, http://, and file:// pages. No site configuration required.
• No tracking, no network calls, no remote code. The picker runs entirely on your machine. The extension does not collect or transmit any data.

— Working inside a React/Next.js codebase? —
Install the npm package for a richer, in-app experience that also detects the nearest React component source file:

    npm install react-path-picker

Then drop a dev-only <PathPickerButton /> into your root layout. Full recipes for Next.js (App Router & Pages Router), React Router, and plain HTML are at https://kiboko-ai.github.io/react-path-picker/

npm: https://www.npmjs.com/package/react-path-picker

— When to use the extension vs the npm package —
• Use the extension on third-party sites, staging builds you can't modify, or static HTML you're inspecting.
• Use the npm package inside React/Next.js codebases you own — you also get the React component source file path on every pick.

— Permissions —
• activeTab — required to inject the picker into the page you click on. Only granted when you click the toolbar icon; never reads other tabs.
• scripting — required to inject the picker script into the MAIN world so it can read React fiber data and write to the page clipboard.

The extension has no host_permissions and never runs in the background.

— Source & support —
• Source: https://github.com/kiboko-ai/web-path-picker-extension
• npm package: https://www.npmjs.com/package/react-path-picker
• Docs & live demo: https://kiboko-ai.github.io/react-path-picker/
• Issues: https://github.com/kiboko-ai/react-path-picker/issues

MIT licensed. Made by kiboko ai