Element Picker → Clipboard

A personal Chrome extension. Press a hotkey, click any element on the page, and a Claude-Code-friendly markdown description of that element lands on your clipboard.

Quick start

git clone <repo-url> picker
cd picker
git checkout claude/element-clipboard-extension-N14xP

1. Open chrome://extensions and enable Developer mode (top right).
2. Click Load unpacked and select the picker folder.
3. Press Ctrl+Shift+E (Windows/Linux) or Cmd+Shift+E (Mac) on any tab.
4. Hover, click the element you want, paste the result into Claude Code.

If the hotkey conflicts with another extension, rebind it at chrome://extensions/shortcuts.

Install (unpacked)

1. Open chrome://extensions.
2. Enable Developer mode (top right).
3. Click Load unpacked and select this folder.
4. Optional: set or change the hotkey at chrome://extensions/shortcuts. Default is Cmd+Shift+E (mac) / Ctrl+Shift+E (Linux/Windows).

No build step. No npm install. Edit and reload from chrome://extensions.

Usage

1. Press the hotkey on any tab. A blue banner appears at the top: Element picker active — Esc to cancel.
2. Hover. The element under the cursor gets a blue outline plus a small label showing tag.class · WxH.
3. Click the element you want. The picker captures it, copies markdown to the clipboard, and a green toast confirms.
4. Paste into Claude Code.

Esc cancels at any point. Pressing the hotkey while the picker is active also cancels.

What's in the markdown

• Page URL + title + viewport + detected framework (react / vue / svelte / angular / unknown)
• A best-effort CSS selector path
• Tag, id, classes, relevant attributes (aria/data/role/name/href/etc.)
• Bounding box geometry
• React component name + source file:line:col when fiber _debugSource is present (Vite/CRA dev builds)
• Up to 5 ancestors as a structural breadcrumb
• Trimmed text content (≤ 200 chars)
• Curated computed styles, only those that differ from a fresh element of the same tag
• outerHTML (truncated past 4000 chars)

Sections with nothing useful are omitted rather than shown empty.

Architecture

• manifest.json — MV3 manifest, declares the keyboard command and the activeTab / scripting / clipboardWrite permissions.
• background.js — service worker. On the keyboard command, injects the picker into the active tab in the MAIN world via chrome.scripting.executeScript.
• lib/selector.js — builds the CSS selector path.
• lib/styles.js — captures non-default computed styles.
• lib/react-fiber.js — climbs React fiber tree to find component name + dev source.
• lib/format.js — assembles the markdown blob.
• lib/overlay.js — picker UI (highlight, label, banner, toast).
• content.js — orchestrator. Re-injection toggles the picker off if it's already active.

The lib files attach functions to window.__ELP; content.js reads from there. Running in MAIN world is required so the React fiber lookup can read property keys defined by the page's React runtime.

Limitations (v1)

• Cross-origin iframes — not traversed (Chrome can't, anyway).
• Same-origin iframes / shadow DOM — elementFromPoint returns the host element. Stops there.
• No screenshot, no Vue/Svelte source mapping, no settings UI, no local-server bridge.