Media
5 items
Description
Click any element on any website to copy its XPath, CSS selector, and route for AI coding agents (Cursor, Claude Code, Codex). 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