Element Picker (Chrome/Edge/Opera)

A lightweight MV3 browser extension that lets you hover, highlight, and pick elements on any page, then copy stable XPath/CSS selectors and basic metadata.

Features

• Toggle picker mode from the extension icon or popup
• Hover highlight with glow and tooltip
• Freeze selection and inspect element details
• Copy XPath, CSS selector, or text
• Shortcuts: ESC / ENTER / ALT+X / ALT+C
• Shadow DOM UI to avoid CSS conflicts
• Minimal permissions, no network, no data collection
• Optional: follow cursor, theme switch, selection list export

Tech Stack

• TypeScript
• Manifest V3
• Vite (build)

Requirements

• Node.js 18+ (recommended)
• npm

Install & Build

npm install
npm run build

The build output goes to the dist folder.

Load Unpacked (Chrome / Edge)

1. Open chrome://extensions or edge://extensions
2. Enable Developer mode
3. Click Load unpacked
4. Select the dist folder

Load Unpacked (Opera GX)

1. Open opera://extensions
2. Enable Developer mode
3. Click Load unpacked
4. Select the dist folder

Daily Usage

1. Click the extension icon to enable the picker
2. Hover an element to see the highlight
3. Click to freeze and open the panel
4. Copy XPath/CSS/Text from the panel

Shortcuts

• ESC: deactivate picker
• ENTER: freeze current element
• ALT+X: copy XPath
• ALT+C: copy CSS selector

Panel Tips

• Show full toggles full vs summarized paths in the UI
• Switch mode changes selector strategy (relative/absolute or minimal/full)
• Follow cursor keeps the panel near the mouse
• Save selection stores entries you can export as JSON

Example Flow

• Go to any page
• Hover a button
• Click to freeze
• Click Copy XPath
• Paste into your automation/tooling

Project Structure

/src
  /background
  /content
  /popup
manifest.json
vite.config.ts
tsconfig.json

Privacy

• No network requests
• No data collection
• Preferences stored locally only

License

MIT