Element Picker for AI

Element Picker for AI is a lightweight developer tool that lets you quickly select any element on a webpage and copy structured selector data to your clipboard — perfect for AI prompts, debugging, and frontend work. ✨ How it works Open your website (on localhost) Press Shift + Ctrl to activate picker mode Click on any HTML element A JSON payload is instantly copied to your clipboard Picker mode exits and the page returns to normal 📦 What gets copied When you click an element, the extension generates a clean JSON object including: A robust primary CSS selector Alternative selector candidates (ID, classes, attributes) Tag name, id, class list Text content (trimmed) Outer HTML snippet (trimmed) Key computed styles (background, color, border, padding, font, etc.) Page URL and timestamp This data is ideal for: Writing precise AI / Codex / Claude prompts Refactoring UI components Debugging CSS or layout issues Communicating exact UI targets to teammates or tools 🧠 Designed for developers & AI workflows No popup UI No page reloads No configuration Zero external libraries Minimal permissions 🔐 Privacy & security No data is collected No data is stored No data is sent anywhere All processing happens locally in your browser Clipboard access is used only to copy the generated JSON when you pick an element 🛠 Typical use cases “Change this exact button color” (AI prompt) “Refactor this component” (AI + selector) “Which CSS rule affects this element?” “Give me the selector for this element” ⌨️ Keyboard shortcuts Shift + Ctrl → activate picker mode Click → pick element & copy JSON Esc → cancel picker mode