Selector Forge: AI-Powered Browser Extension for Resilient CSS and XPath Selectors

Selector Forge: AI-Powered Browser Extension for Resilient CSS and XPath Selectors

Selector Forge is a browser extension designed to eliminate the fragility of web selectors by using AI to propose candidates and the live browser DOM to verify them. It provides developers with robust CSS and XPath selectors for end-to-end testing, web scrapers, and page automation, ensuring that the generated selectors resolve correctly before they are delivered to the user.

Verified AI-Driven Selector Generation

Selector Forge ensures selector reliability by treating the browser as the absolute source of truth. While AI proposes and ranks potential selectors, it does not have the final word on correctness; every candidate is re-verified against the live DOM.

The Verification Loop

  1. Element Selection: The user picks one or more elements on a live page.
  2. Context Capture: The extension captures a snapshot including selected targets, DOM context, and seed candidates.
  3. AI Proposal: The Intuned backend proposes and ranks candidate selectors.
  4. Live Testing: The extension tests every candidate against the live DOM and feeds the results back to the backend.
  5. Iteration: This loop repeats until a verified winner is identified.
  6. Delivery: Only re-verified selectors are presented to the user for copying.

The Trust Boundary

To maintain high reliability, the tool implements a strict trust boundary:

  • Session State: The extension manages the selector-creation session state.
  • Mandatory Verification: Re-verification against the browser DOM is required for every result.
  • List Validation: For list-based selections, the system checks the full intended set to reject selectors that either over-match or under-match elements.

Selection Modes

Selector Forge offers two primary modes to handle different types of web elements:

Mode User Action Result
Single Pick one element Verified selectors for specific targets like buttons, inputs, links, or labels.
List Pick two examples from a repeating set A verified container selector for the entire set, with a preview provided before saving.

Technical Architecture and Development

Built using WXT and React, Selector Forge is a Manifest V3 (MV3) extension compatible with Chrome and Firefox.

Project Structure

  • entrypoints/: Contains the background service worker (session state and network I/O), content scripts (picker overlay and DOM access), and the React-based popup.
  • lib/: Houses the agent loop controller, messaging protocols, session state management, and GraphQL queries.
  • tests/: Implements a multi-layered testing strategy including unit tests (Vitest), browser-mode tests for DOM correctness, and E2E tests (Playwright).

Developer Tooling

Developers can use yarn dev for watch-mode builds and yarn ladle to preview popup components in isolation via Ladle, which utilizes a no-op stub for the WXT browser global.

Future Roadmap

The project aims to expand from a standalone extension into a more integrated automation tool:

  • CLI and IDE Integration: Driving the extension via the Intuned CLI to support local agents and MCP (Model Context Protocol) exposure.
  • Smart Picker: A multiple mode for grouping elements and AI-driven field detection to automatically suggest page names and selectors.
  • Precision Refinement: Drill-down modes to walk the XPath/DOM tree for more precise targeting (e.g., moving from a child span to a parent container).
  • Self-Hostable Backend: A planned reference backend and open-source agent to allow users to run the entire selector generation loop on their own infrastructure.
  • Extended Support: Future updates intend to include export options for Playwright/JavaScript, automatic pagination detection, and support for shadow-DOM and cross-iframe elements.

Sources