零依赖浏览器插件：直接向AI工具发送DOM结构化上下文

零依赖浏览器插件：直接向AI工具发送DOM结构化上下文 | 前端进阶之旅

Full translation

完整中文译文

TL;DR：一个 Manifest V3 的 Chrome/Firefox 扩展，让你点击任意 DOM 元素并将结构化上下文发送给 Claude、Cursor 或任何 AI 工具——无需 MCP 服务器，无需 node_modules，无需运行时依赖。

我一直遇到的问题

我每天都在用 Claude 和 Cursor。有一半的时间我在向它们请教网页相关的问题——一个 UI bug、一个我想复刻的组件、一个我需要理解的布局。流程总是一样的：

找到 URL 和标题

粘贴到 AI 对话框

意识到遗漏了周围上下文，又回头去找

七步才能给 AI 它需要的东西。我想要一步搞定。

我最初看的方案

已有的工具：

DOMLens — 为 Cursor/Claude Code 打造的点选捕获工具。挺好用，但仅限 Chrome，而且对 AI 工具的选型有偏好。

Element to LLM — 跨浏览器、结构化 JSON 快照。比我的需求要重。

LoopIn、peek、Dokobot — 都需要运行本地 MCP 服务器或 SQLite 数据库。

我不想运行服务器。不想 npm install。我想要一个浏览器扩展，把丰富的上下文复制到剪贴板，让我可以粘贴到任何地方——Claude、Cursor、ChatGPT、本地 Ollama 环境，随便什么。

设计约束

在写一行代码之前，我定了几个硬规则：

零依赖。没有 package.json，没有构建框架，没有打包工具。仓库本身就是扩展——Chrome 可以直接作为 unpacked 加载。

双浏览器。Chrome 和 Firefox 共用一套代码，两者都使用 Manifest V3。

剪贴板优先。默认交付方式是复制粘贴。无服务器、无桥接、无中间件。

按需访问。只用 activeTab——只有在你点击时扩展才能看到页面。

工作原理 / 流程

点击扩展图标（或按 Alt+Shift+C）
页面上出现元素选择器浮层
悬停预览，点击捕获
扩展抓取 URL、标题、选择器、文本、HTML，以及可选的裁剪截图
将一切格式化为 prompt
发送到剪贴板（或打开一个本地 AI tab）

快速捕获给 AI 提供：

/* CSS selector for the element */

<!-- Surrounding HTML (grandparent element) for context -->

Bug 报告模式额外添加：

{
  "viewport": "width x height",
  "userAgent": "...",
  "consoleErrors": [],
  "consoleWarnings": [],
  "computedStyles": {
    "layout": "flex/grid/block/...",
    "spacing": "8px 16px 24px",
    "typography": "14px/1.5 sans-serif",
    "colors": {
      "background": "#fff",
      "text": "#333"
    }
  }
}

无障碍模式额外添加：

{
  "ariaRole": "button",
  "ariaLabels": ["提交按钮"],
  "ariaDescriptions": ["提交当前表单"],
  "focusable": true,
  "disabled": false,
  "hidden": false,
  "semanticAncestors": ["<form>", "<main>", "<body>"]
}

你也可以附上元素的可裁剪截图，支持可配置格式、压缩率和内边距。

Shadow DOM 和 iframe

这是棘手的部分。现代 UI 框架到处用 Shadow DOM 和 iframe。选择器通过递归 elementFromPoint 穿透开放的 shadow roots，所以你能捕获 Web 组件的内部元素。对于 iframe，它会把 frame 局部坐标转换为顶层视口坐标用于截图裁剪。

Shadow 包含元素的选择器使用 host >>> internal 标注——人类可读，不是原生 CSS 选择器，但对 AI agent 理解组件边界很有用。

模板

我为常见任务添加了内置模板：描述 UI、总结内容、生成 Playwright 测试、提取数据、审计无障碍、编写实现笔记。你可以编辑它们。"无模板"默认只给原始上下文——当你想要自己写指令时很有用。

Manifest V3 体验

Manifest V3 对简单扩展足够友好。Service Worker 模型在你后台逻辑是无状态消息处理时工作得很好。最大的摩擦是 Firefox 对 MV3 的部分支持——有些权限行为不同。

剪贴板被低估了

"直接复制"的方案兼容每一个 AI 工具。无集成、无 API、无 webhook。粘贴到 Claude，粘贴到 Cursor，粘贴到 Slack 消息。剪贴板是通用接口。

零依赖意味着可审查

每一行代码都是人类可读的。无转译输出，无打包依赖，无 node_modules。

元素捕获比看起来难

Shadow DOM 遍历、iframe 坐标转换、选择器唯一性、带 DPI 缩放的截图裁剪——每一种都有边缘情况叠加在一起。

功能待办

脱敏开关（复制前掩码邮箱、token、密码）
发送前预览/编辑
Markdown 捕获模式（比原始 HTML 对大多数 AI 工具更干净）
基于字符的 prompt 大小显示

安装

Chrome: Chrome Web Store
Firefox: Firefox Add-ons

它是免费的且零依赖。如果你用 AI 编程工具并经常参考网页，试试看，告诉我哪里坏了。

欢迎反馈和 bug 报告。