Selector Forge: AI が駆動するブラウザ拡張機能で堅牢な CSS と XPath セレクタを実現

Selector Forge: AI が駆動するブラウザ拡張機能で堅牢な CSS と XPath セレクタを実現

Selector Forge は、AI を利用して候補を提案し、ライブブラウザ DOM で検証することで、ウェブセレクタの壊れやすさを排除することを目的としたブラウザ拡張機能です。エンドツーエンドテスト、ウェブスクレイパ、ページ自動化向けに、開発者に堅牢な CSS と XPath セレクタを提供し、生成されたセレクタがユーザーに提供される前に正しく解決できることを保証します。

検証された AI 主導のセレクタ生成

Selector Forge は、ブラウザを絶対的な真実の情報源として扱うことでセレクタの信頼性を確保します。AI が潜在的なセレクタを提案・ランク付けしますが、最終的な正確性の判断は行わず、すべての候補はライブ DOM に対して再検証されます。

検証ループ

  1. 要素選択: ユーザーがライブページ上で 1 つ以上の要素を選択します。
  2. コンテキスト取得: 拡張機能が選択対象、DOM コンテキスト、シード候補を含むスナップショットを取得します。
  3. AI 提案: Intuned バックエンドが候補セレクタを提案し、ランク付けします。
  4. ライブテスト: 拡張機能がすべての候補をライブ DOM でテストし、結果をバックエンドにフィードバックします。
  5. イテレーション: 検証された勝者が見つかるまでこのループを繰り返します。
  6. 配布: 再検証されたセレクタのみがユーザーにコピー用として提示されます。

信頼境界

高い信頼性を維持するために、ツールは厳格な信頼境界を実装しています:

  • セッション状態: 拡張機能がセレクタ作成セッションの状態を管理します。
  • 必須検証: すべての結果はブラウザ DOM に対して再検証が必須です。
  • リスト検証: リストベースの選択に対しては、システムが意図された全セットをチェックし、要素を過剰にマッチまたは不足させるセレクタを除外します。

選択モード

Selector Forge は、さまざまなウェブ要素に対応するために 2 つの主要モードを提供します:

モード ユーザー操作 結果
シングル 1 つの要素を選択 ボタン、入力、リンク、ラベルなど特定ターゲット向けの検証済みセレクタ
リスト 繰り返しセットから 2 つの例を選択 全セット向けの検証済みコンテナセレクタ。保存前にプレビューが提供されます

技術アーキテクチャと開発

WXT と React を使用して構築され、Selector Forge は Chrome と Firefox に対応した Manifest V3 (MV3) 拡張です。

プロジェクト構成

  • entrypoints/: バックグラウンドサービスワーカー(セッション状態とネットワーク I/O)、コンテンツスクリプト(ピッカーオーバーレイと DOM アクセス)、React ベースのポップアップを含む。
  • lib/: エージェントループコントローラ、メッセージングプロトコル、セッション状態管理、GraphQL クエリを格納。
  • tests/: ユニットテスト(Vitest)、DOM 正確性のためのブラウザモードテスト、E2E テスト(Playwright)を含む多層テスト戦略を実装。

開発者ツール

開発者は yarn dev でウォッチモードビルドを、yarn ladle で Ladle を介してポップアップコンポーネントを単体でプレビューできます。Ladle は WXT の browser グローバルに対するノーオップスタブを利用します。

今後のロードマップ

プロジェクトは単体拡張から、より統合された自動化ツールへと拡張することを目指しています:

  • CLI と IDE 統合: Intuned CLI を介して拡張機能を駆動し、ローカルエージェントと MCP(Model Context Protocol)へのエクスポートをサポート。
  • スマートピッカー: 要素をグループ化する multiple モードと、ページ名やセレクタを自動提案する AI 駆動フィールド検出。
  • 精度向上: XPath/DOM ツリーを掘り下げてより正確なターゲティングを行うドリルダウンモード(例: 子 span から親コンテナへ移動)。
  • セルフホスト可能バックエンド: 参照バックエンドとオープンソースエージェントを計画し、ユーザーが自分のインフラ上でセレクタ生成ループ全体を実行できるように。
  • 拡張サポート: 将来的なアップデートで Playwright/JavaScript へのエクスポートオプション、自動ページネーション検出、シャドウ DOM とクロス iframe 要素のサポートを含む予定。

要約: Selector Forge は、Chrome と Firefox 用のブラウザ拡張で、AI を活用してウェブスクレイピングやエンドツーエンドテスト向けの堅牢な CSS と XPath セレクタを生成・検証します。

タイトル: Selector Forge: AI が駆動するブラウザ拡張機能で堅牢な CSS と XPath セレクタを実現

Sources