返回

文章详情

展示 HN:选择器工厂 - 用于 AI 生成的可靠选择器的浏览器扩展

Hacker News2026年6月22日 14:21

在任何页面上选择一个元素,获得一个可靠的选择器——由 AI 生成并评估,然后在您看到它之前重新验证。这是一个独立的浏览器扩展(支持 Chrome 和 Firefox,MV3),可以直接从您正在查看的页面构建强大的 CSS 或 XPath 选择器。您只是指向您想要的内容;扩展和 Intuned 的选择器后端会做其余的工作——建议候选,测试它们与实际页面的匹配,并丢弃任何不正确解析的选项。它对于编写端到端测试、构建抓取器及任何脆弱选择器在后期会让您付出代价的页面自动化都很有用。安装:Chrome - Chrome 网上应用店 Firefox - Firefox 附加组件 如何运作:打开任何页面并点击扩展。选择一种选择模式,直接在实时页面上选择元素。该扩展捕捉您选定内容的紧凑快照(选定目标、DOM 上下文、种子候选)并将其发送到后端。后端建议和排名候选选择器;扩展对每个候选与实时 DOM 进行测试并反馈结果。这个循环会重复,直到后端选定一个最终方案。弹出窗口只显示经过重新验证的选择器,每个选择器旁边都有一个复制按钮。浏览器始终是选择器实际匹配内容的真实来源。AI 提出并排名,最终的正确性判断不会由其决定。 信任边界:扩展保持选择器创建会话状态——循环的连续性源。浏览器是真实来源——每个结果的重新验证是强制性的。AI 提出并排名选择器,但并不证明正确性。对于列表,验证会检查整个预期集合,因此会拒绝超匹配和少匹配的选择器。详情请见 ARCHITECTURE.md 了解模块映射、消息层、背景内容/弹出上下文和身份验证 + CLI 接口。 选择模式 模式:您执行的操作:您获得的结果 单一选择:选择一个元素。为该确切元素提供经过验证的选择器候选——按钮、输入框、链接、标签、一次性目标。 列表选择:从重复集合中选择两个示例。提供针对整个集合的经过验证的容器选择器,在您保存之前预览。 开发快速入门:需要 Node 18+ 和 Yarn。 yarn install # 还会运行 `wxt prepare` yarn dev # 监听并加载 .output/chrome-mv3 在 Chrome(解压版) yarn dev:firefox # 在 Firefox 上同样操作 第一次运行 yarn dev 后,从 .output/chrome-mv3 载入解压扩展,地址为 chrome://extensions(启用开发者模式)。 命令:命令:执行的操作 yarn dev / yarn dev:firefox:监听构建,可作为解压扩展加载 yarn compile: tsc --noEmit 进行类型检查 yarn test:Vitest — 单元 + 真正的 Chromium 浏览器项目 yarn build / yarn build:firefox:生产扩展包 yarn build:e2e:带有 <all_urls> 主机权限的 E2E 变体——绝不要发布它 yarn e2e build:e2e 然后使用 Playwright 对打包扩展进行测试 yarn zip / yarn zip:firefox:准备就绪的 zip 包 yarn icons:重新生成图标资产 yarn ladle:在 http://localhost:61010 中独立预览弹出组件 组件预览(Ladle): yarn ladle 提供弹出窗口的 React 组件的独立展示,以供设计和审查——无须重新加载扩展,无需真实后端。 存储在 stories/(*.stories.tsx);Ladle 配置在 .ladle/。弹出窗口期望 WXT 的注入浏览器全局,因此 .ladle/wxt-globals.ts 为其安装了一个无操作存根。yarn ladle:build 生成静态包到 dist/ladle。 测试层: 单元 - 快速 Vitest 测试(node/happy-dom)用于选择器逻辑、状态转换、存储和确定性回退。 浏览器 - Vitest 浏览器模式测试,针对真实 DOM 运行选择器生成,并证明每个候选确切解析为预期元素集。这是正确性证明。 这两个层次在 yarn test 下运行。 E2E - 使用 Playwright 对打包的 MV3 扩展进行真实页面、指针流、弹出窗口、内容脚本和后台工作者的测试。使用 yarn e2e 运行。 项目布局: entrypoints/ background.ts -- 背景服务工作者 —— 会话状态、代理循环、网络 I/O content.ts -- 内容脚本 —— 选择器覆盖、DOM 访问、选择器测试 popup/ React -- 弹出窗口 —— 模式控制、结果、复制操作 lib/ agent/ -- 代理循环控制器(后端轮换) content/ -- 选择器覆盖、元素注册、DOM 检查 background/ -- 处理程序、上下文菜单、会话连接、CLI 桥接 messaging/ -- 有类型的、方向分区的运行时消息协议 state/ -- 会话状态、历史记录、架构、首选项 auth/ -- 身份验证客户端 + 令牌处理 graphql/ -- 工作区 + 使用查询 config.ts -- API 基础 + 运行时配置 tests/ -- vitest(单元 + 浏览器) e2e/ -- Playwright 对打包扩展的测试 ARCHITECTURE.md -- 模块映射、信任边界、代理循环、接口 基于 WXT 和 React 构建弹出窗口。 路线图:CLI 控制 - 从 Intuned CLI 驱动扩展:Intuned IDE 支持、本地代理运行端到端测试和自动化,并通过 MCP 曝露。 (基础电路 - 选项卡权限和 CDP 驱动的会话启动 - 已经在其中)

赞助内容

NordVPN Next-gen Antivirus

本站免费、广告极少。如果觉得有帮助,可以请我们喝杯咖啡 —— 任何金额都对持续运营有实际帮助。

请我喝杯咖啡