零依赖浏览器扩展：一键向 Claude/Cursor 发送网页结构化上下文

Được đăng gốc trên NextFuture

你正在调试一个 UI bug，打开 DevTools，复制 HTML、复制 selector、找到 URL 和 title，然后一股脑粘贴到 Claude 或 Cursor 的对话里——结果发现自己漏掉了周围的 context，只能重来。一个零依赖的新扩展把这个七步流程压缩到一次点击。

这是一个 Manifest V3 扩展，同时支持 Chrome 和 Firefox，允许"点击任意 DOM 元素并向 Claude、Cursor 或任何 AI 工具发送结构化的 context——无需 MCP server、无需 node_modules、无运行时依赖"，作者这样描述。按下扩展图标或 Alt+Shift+C，页面上会出现一个 picker 浮层，hover 预览，点击捕获——扩展获取 URL、title、selector、text、HTML，可选地追加裁剪后的截图，然后格式化为一条 prompt 写入剪贴板。

它的与众不同之处在于不需要任何本地 server 或数据库——作者从一开始就设定了"zero dependencies. No package.json, no build framework, no bundler. The repo is the extension"这个约束，意味着 Chrome 可以直接以 unpacked 方式加载，无需任何 build 步骤。

处理 Shadow DOM 和 iframe

此类工具最难的部分在于现代 UI 框架到处使用 Shadow DOM 和 iframe。这个扩展通过"recursive elementFromPoint through open shadow roots"来解决，能够捕获 web component 内部的元素。对于 iframe，它将 frame 的局部坐标转换为顶层 viewport 坐标，从而正确定位截图裁剪区域。

与同类工具的比较

作者表示在自研之前调研了现有方案：DOMLens 被描述为"point-and-click capture for Cursor/Claude Code. Works well, but Chrome-only and opinionated about your AI tool"——这是作者的评价，而其他工具如 Element to LLM、LoopIn、peek 或 Dokobot 都需要运行 MCP server 或本地 SQLite，比快速复制粘贴 context 这一需求要重得多。

如果你的日常流程是在浏览器和 Claude/Cursor 之间不断切换来咨询某段 UI，这是一款值得一试的工具——因为它不要求安装任何额外基础设施，只需要一个扩展和剪贴板。对于大量使用 web component 或 iframe 的 UI，Shadow DOM 处理能力是在日常工作中依赖它之前需要实际验证的重点。

本文原发布于 NextFuture。关注我们以获取更多全栈与 AI 工程内容。