Point at any element. Tell your AI what to change.
Selector is a local-first Chrome MV3 extension that lets you visually select elements on any web page, add instructions, and copy a structured prompt for Claude Code, Codex, Cursor, or any AI coding assistant.
npm install
npm run buildThen open chrome://extensions, enable Developer mode, choose Load unpacked, and select dist/.
Open any web page and click the Selector extension action. You can also use Alt+Shift+S.
| Action | What it does |
|---|---|
| Click | Select an element |
| Shift + Click | Add to selection |
| Drag | Marquee select multiple elements |
| ↑ / ↓ | Navigate to parent / child element |
| ← / → | Navigate to previous / next sibling |
| ✎ button | Add per-element instruction |
| ⌘/Ctrl + C | Copy prompt to clipboard |
| ⌘/Ctrl + Z | Undo last selection change |
| Space | Pause / resume selecting |
| Esc | Clear selection |
The copied prompt includes element metadata (tag, selector, text, React component info) plus any per-element instructions you added.
Page: /dashboard
1. .hero-title <h1>
selector: body > main > section > h1
source: src/components/Hero.tsx:12
react: Layout › Hero
text: "Welcome to the Dashboard"
html: <h1 class="hero-title">Welcome to the Dashboard</h1>
instruction: Make this red and larger
2. .sidebar <nav>
selector: body > aside > nav
text: "Home Settings Profile Logout"
html: <nav class="sidebar">…
instruction: Add an "Analytics" link after "Settings"
The extension injects a content script into the active tab after a user action. Everything runs client-side in the browser. No selected content, annotations, prompts, or page metadata are uploaded.
git clone https://github.com/oil-oil/selector.git
cd selector
npm install
npm run buildMIT