Capturing Selectors

Why the extension exists

Every step in a tour needs a CSS selector to anchor its tooltip to a specific element on your page. You can write selectors by hand, but doing so requires reading source code, and fragile selectors break tours when your markup changes. The Geyed Chrome Extension removes that friction: navigate to your live product in Chrome, hover over any element, and click to generate a usable selector instantly — no source code required.

Install the extension

The extension is not yet listed in the Chrome Web Store. To load it in development mode:

1. Open chrome://extensions in Chrome.
2. Enable Developer mode using the toggle in the top-right corner.
3. Click Load unpacked.
4. Select the Extension/dist folder from the Geyed extension build output.

The Geyed icon will appear in Chrome's extension toolbar once the extension loads.

Activate the picker

Click the Geyed extension icon in Chrome's toolbar to open the extension popup. From there, start the element picker. The extension sends an activation signal to the current tab's content script, which arms the page for element selection.

Capture a selector

With the picker active, move your cursor over the page. The extension highlights each element under your cursor as you hover, giving you visual feedback about which element will be captured. When the highlight is on the element you want to target, click it.

The content script captures the element's selector metadata and sends it back to the extension. The popup displays the generated selector and provides a copy button so you can copy it to your clipboard.

Use the selector in a step

Paste the copied selector into the CSS Selector field of the step you are editing in the Tour Builder. The integration between the extension and the builder is a manual copy-and-paste — the extension does not push the selector directly into the builder. Once pasted, the step's tooltip will anchor to that element when your tour runs.

Limitations

The extension is currently an MVP build. Keep the following in mind when using it:

• No full authoring workflow yet. The extension captures selectors only; all tour editing happens in the dashboard builder.
• Heuristic selector quality. Generated selectors are produced by a best-effort algorithm. Complex or deeply nested elements may produce selectors that are brittle across DOM changes. Review and simplify captured selectors before publishing if needed.
• Matches all URLs. The content script activates on every page (<all_urls>) for development simplicity. Treat the extension as a development and authoring tool rather than something you leave permanently active.