Selector Forge：AI 驅動的瀏覽器擴充功能，打造彈性 CSS 與 XPath 選取器
Selector Forge：AI 驅動的瀏覽器擴充功能，打造彈性 CSS 與 XPath 選取器
Selector Forge 是一款瀏覽器擴充功能，透過 AI 提供候選選取器，並以即時瀏覽器 DOM 進行驗證，以消除網頁選取器的脆弱性。它為開發者提供穩健的 CSS 與 XPath 選取器，適用於端對端測試、網頁爬蟲與頁面自動化，確保產生的選取器在交付給使用者之前即已正確解析。
經驗驗證的 AI 驅動選取器產生
Selector Forge 透過將瀏覽器視為絕對真相來源，確保選取器的可靠性。雖然 AI 會提出並排序潛在的選取器，但最終正確性仍需由實際的 DOM 重新驗證；每一個候選項目都會在即時 DOM 上再次確認。
驗證迴圈
- 元素選取：使用者在即時頁面上挑選一個或多個元素。
- 情境捕獲：擴充功能擷取快照，包含所選目標、DOM 情境與種子候選。
- AI 提案：Intuned 後端提出並排序候選選取器。
- 即時測試：擴充功能對每個候選在即時 DOM 上測試，並將結果回饋給後端。
- 迭代：此迴圈持續執行，直至找到經驗驗證的最佳者。
- 交付：僅將重新驗證過的選取器呈現給使用者，以供複製。
信任邊界
為維持高可靠性，工具實施嚴格的信任邊界：
- 會話狀態：擴充功能管理選取器建立的會話狀態。
- 必須驗證：每個結果皆需重新驗證於瀏覽器 DOM。
- 清單驗證：對於清單型選取，系統會檢查完整的預期集合，拒絕過度匹配或不足匹配的選取器。
選取模式
Selector Forge 提供兩種主要模式，以處理不同類型的網頁元素：
| 模式 | 使用者操作 | 結果 |
|---|---|---|
| 單一 | 選取一個元素 | 為特定目標（如按鈕、輸入框、連結或標籤）提供驗證過的選取器。 |
| 清單 | 從重複集合中選取兩個範例 | 為整個集合提供驗證過的容器選取器，並在儲存前提供預覽。 |
技術架構與開發
Selector Forge 使用 WXT 與 React 建置，是相容於 Chrome 與 Firefox 的 Manifest V3（MV3）擴充功能。
專案結構
entrypoints/：包含背景服務工作者（會話狀態與網路 I/O）、內容腳本（選取器覆蓋層與 DOM 存取）以及基於 React 的彈出視窗。lib/：存放代理迴圈控制器、訊息協定、會話狀態管理與 GraphQL 查詢。tests/：實作多層次測試策略，包含單元測試（Vitest）、針對 DOM 正確性的瀏覽器模式測試，以及 E2E 測試（Playwright）。
開發者工具
開發者可使用 yarn dev 進行即時編譯（watch‑mode），並使用 yarn ladle 透過 Ladle 預覽彈出元件，Ladle 會為 WXT 的 browser 全域提供一個無操作的 stub。
未來路線圖
此專案旨在從獨立擴充功能擴展為更整合的自動化工具：
- CLI 與 IDE 整合：透過 Intuned CLI 驅動擴充功能，以支援本地代理與 MCP（Model Context Protocol）曝光。
- 智慧選取器：提供
multiple模式以分組元素，並利用 AI 驅動的欄位偵測自動建議頁面名稱與選取器。 - 精準細化：提供下鑽模式，讓使用者在 XPath/DOM 樹中逐層深入，以取得更精確的目標（例如，從子
<span>移動到父容器）。 - 自行託管後端：規劃提供參考後端與開源代理，讓使用者能在自有基礎設施上執行完整的選取器產生迴圈。
- 擴充支援：未來更新將加入 Playwright/JavaScript 匯出選項、自動分頁偵測，以及對 shadow‑DOM 與跨 iframe 元素的支援。
摘要： Selector Forge 是一款適用於 Chrome 與 Firefox 的瀏覽器擴充功能，利用 AI 產生並驗證彈性的 CSS 與 XPath 選取器，供網頁爬蟲與端對端測試使用。
標題： Selector Forge：AI 驅動的瀏覽器擴充功能，打造彈性 CSS 與 XPath 選取器