Show HN: Selector Forge – 基于 AI 生成的 resilient（高韧性）选择器浏览器扩展

背景

在 Web 自动化、端到端（E2E）测试以及网页爬虫开发中，CSS 或 XPath 选择器（Selectors）的稳定性一直是一个痛点。传统的静态选择器往往非常“脆弱”（brittle），一旦网页结构发生细微变化，选择器就会失效，导致自动化脚本中断。

为了解决这一问题，Intuned 推出了 Selector Forge。这是一个独立的浏览器扩展（支持 Chrome 和 Firefox，基于 Manifest V3 标准），旨在通过 AI 生成并验证高韧性的选择器。其核心理念是：浏览器 DOM 才是选择器是否有效的唯一真理来源，AI 仅负责提出和排序候选方案，最终的准确性必须由浏览器实时验证。

核心内容

Selector Forge 的工作流程并非简单的“点击即生成”，而是一个闭环的生成与验证机制。以下是其完整的技术实现与使用逻辑：

1. 核心工作流

用户只需在任意页面上点击扩展图标，指向目标元素，后续步骤由扩展与 Intuned 的后端协同完成：

1. 捕获快照：扩展捕获用户选择的紧凑快照，包括选定的目标、DOM 上下文以及种子候选项。
2. AI 提案与排序：后端接收快照，提出候选选择器并进行排名。
3. 实时验证：扩展将每个候选选择器应用到当前的实时 DOM 中进行测试，并将结果反馈给后端。
4. 收敛结果：这个“提案-验证”循环不断重复，直到后端确定一个最优解。
5. 输出：弹窗中仅显示经过重新验证的选择器，并提供一键复制功能。

2. 架构与信任边界

• 浏览器是真理来源：无论 AI 如何提议，它从未拥有最终的正确性裁决权。所有结果必须经过浏览器 DOM 的强制重新验证。
• 状态管理：扩展持有选择器创建会话的状态，确保循环的连续性。
• 列表验证机制：对于列表元素，验证会检查整个预期集合，从而拒绝过度匹配（over-matching）或匹配不足（under-matching）的选择器。

3. 技术栈与开发环境

• 基础框架：基于 WXT 构建，UI 部分使用 React。
• 依赖要求：Node 18+ 和 Yarn。
• 开发命令：
  • yarn install：安装依赖并运行 wxt prepare。
  • yarn dev：启动监听模式，并在 Chrome 中以未打包形式加载 .output/chrome-mv3。
  • yarn dev:firefox：同上，针对 Firefox。
  • yarn ladle：隔离渲染 Popup 的 React 组件，用于设计和审查（无需重新加载扩展或连接真实后端）。
  • yarn test：运行单元测试和浏览器模式测试。
  • yarn e2e：运行基于 Playwright 的端到端测试。

4. 测试体系

项目建立了三层测试体系以确保可靠性：

• 单元测试：使用 Vitest（node/happy-dom），快速测试选择器逻辑、状态转换、存储和确定性回退机制。
• 浏览器测试：使用 Vitest 的浏览器模式，针对真实 DOM 运行选择器生成，证明每个候选项恰好解析到预期的元素集合。这是正确性的“预言机”（Oracle）。
• 端到端测试：使用 Playwright 针对打包后的 MV3 扩展，模拟真实页面、指针操作、Popup 交互、内容脚本和后台工作进程。

5. 目录结构概览

• background.ts：后台服务工作者，处理会话状态、Agent 循环和网络 I/O。
• content.ts：内容脚本，负责选择器覆盖层、DOM 访问和选择器测试。
• popup/：React 弹窗，包含模式控制、结果展示和复制操作。
• lib/agent/：Agent 循环控制器（后端回合制）。
• lib/content/：选择器覆盖层、元素注册表和 DOM 检查。
• lib/messaging/：类型化、方向分区的运行时消息协议。
• lib/state/：会话状态、历史、模式和偏好设置。
• lib/auth/：认证客户端和令牌处理。
• lib/graphql/：工作区和用量查询。

关键要点

• AI 辅助而非 AI 主导：AI 负责生成和排序候选选择器，但不证明其正确性。正确性由浏览器实时 DOM 验证决定。
• 高韧性选择器：生成的选择器旨在抵抗网页结构的微小变化，适用于编写 E2E 测试、构建爬虫以及任何因选择器脆弱而可能导致后期成本增加的页面自动化场景。
• 多模式选择器：
  • 智能选择器（Smart Picker）：支持多选模式，可将多个元素分组为单个项目或列表集，并具备 AI 字段检测功能，自动建议有用的字段、名称和选择器。
  • 钻取模式（Drill-down Modes）：提供精度微调，允许用户在 XPath/DOM 树中向下导航（如从子 span 到按钮再到行），或将列表选择移动到父级/子级，并添加排除错误的示例。
• CLI 控制与集成：支持通过 Intuned CLI 驱动扩展，包括 Intuned IDE 支持、本地 Agent 运行 E2E 测试，并通过 MCP（Model Context Protocol）暴露接口。
• 开源与自托管计划：目前扩展与 Intuned 后端通信进行认证和生成。未来计划发布一个小型、可自托管的参考后端，替换 Intuned，包括一个开源 Agent，允许用户在自有基础设施上运行整个循环。
• 未来路线图：包括选择器/自动化历史记录、导出为 Playwright 或纯 JavaScript、自动分页检测以及跨 iframe / Shadow DOM 支持。
• 许可协议：MIT 许可，由 The Metrics Shop, Inc. 所有。

意义与影响

Selector Forge 的出现标志着 Web 自动化领域对“AI 幻觉”问题的务实回应。许多 AI 辅助工具倾向于直接生成代码，但往往缺乏对运行时环境的验证，导致生成的代码在生产环境中不可靠。

1. 重新定义 AI 在自动化中的角色：它明确划分了 AI 的边界——AI 是高效的“提议者”，而浏览器是严格的“验证者”。这种架构极大地提高了生成选择器的可信度，解决了自动化测试中常见的“假阳性”问题。
2. 降低自动化维护成本：通过生成“高韧性”选择器，开发者可以显著减少因前端 UI 迭代而导致的测试脚本维护工作，这对于大型 Web 应用和持续集成/持续部署（CI/CD）流程具有重要意义。
3. 推动浏览器扩展的现代化：基于 MV3 和 WXT 框架构建，展示了现代浏览器扩展开发的最佳实践，特别是在处理复杂状态管理和跨上下文通信方面。
4. 开源生态的补充：虽然目前依赖 Intuned 后端，但其计划开放自托管后端和开源 Agent，表明其旨在成为 Web 自动化基础设施的一部分，而非封闭的黑盒服务，这有助于社区构建更透明、可控的自动化解决方案。