Pick an element,
get its selector.
openpicker is an element picker for the web — a browser extension plus a tiny SDK. Point at any element on any page and get a stable CSS selector back. Built for product tours, event tagging, no-code automation, and testing.
🧩 Browser extension — coming soon to the Chrome Web Store.
Everything the picker needs — nothing it doesn't
Stable selectors
Built on a proven selector engine, with filters that skip auto-generated ids and hashed CSS-in-JS / CSS-module class names.
Tunable per site
Choose whether selectors use id / class / attributes, set ignore patterns and an attribute allow-list — remembered per website.
Inspector built in
An editable selector with a live match count, a DOM-tree navigator, and the element's attributes — in an overlay that never clashes with the page.
Cross-tab picking
An app can open a URL, let the user pick there, and get the selector routed back — the one thing a page can't do for itself.
Optional screenshots
Capture the selected element or the viewport alongside the selector.
Private by design
No servers, no tracking, no data leaves your browser. You're always in control.
A tiny SDK for your app
Install @openpicker/sdk, start a
pick, and await the result. The SDK never draws UI — the extension owns the picker overlay
and the cross-tab routing.
import { createOpenpicker } from "@openpicker/sdk"
const op = createOpenpicker({ appName: "My App" })
// Opens the URL, the user picks there, the selector comes back.
const { selector, matchCount } = await op.pick({
url: "https://app.example.com",
})
// → "button.cta", 1