使用说明

DOM Review

Visual code review for live UI — leave comments on DOM elements for AI agents.

DOM Review是一个Chrome扩展程序，它弥合了您与浏览器之间的差距看见在浏览器中，以及您的AI编码代理需要什么修理。在您的页面上选择任何元素，留下一条描述问题的评论，您的AI代理将通过浏览器直接读取评论 Chrome DevTools MCP服务器 --没有复制粘贴，没有文件篡改，没有上下文丢失。

为 可视化工作流程：你查看你的应用程序，指出问题所在，用简单的英语描述修复程序，人工智能会直接从Chrome读取你的评论并进行更改。

问题

当vibecoding前端发生变化时，反馈循环如下：

你在浏览器中看到了一些错误
您切换到编辑器/AI聊天
你试着描述元素：“标题中的按钮……不，第二个……有蓝色边框的那个……”
AI猜测你指的是哪个元素
它改变了错误的事情
重复

DOM Review省去了步骤2-6。 你点击元素，写下你的评论，AI代理通过MCP直接从浏览器读取评论数据——包括CSS选择器、计算样式、可访问性属性以及React/Vue/Angular组件名称和道具。

运作原理

  You (in browser)              AI Agent (via Chrome MCP)
  ┌──────────────────┐         ┌──────────────────────────┐
  │ 1. Click element │         │                          │
  │ 2. Write comment │  MCP    │ 3. Reads reviews from    │
  │    "make this    │ ◄─────► │    the live page via     │
  │     bolder"      │         │    Chrome DevTools MCP   │
  │                  │         │ 4. Gets full context:    │
  │                  │         │    selector, styles,     │
  │                  │         │    component, props      │
  │                  │         │ 5. Edits the code        │
  └──────────────────┘         └──────────────────────────┘

关键在于：评论在页面DOM中实时存在。任何可以访问Chrome DevTools MCP的工具都可以读取它们——Claude Code、Cursor、Windsurf或任何支持MCP的IDE。

MCP集成（主要工作流程）

DOM Review旨在与 Chrome DevTools MCP服务器，这使AI编码代理可以直接访问您的浏览器。评论作为隐藏内容存储在页面DOM中 <script id="dom-review-data"> 元素具有结构化JSON，因此AI代理可以读取它们，而无需任何手动导出步骤。

设置

安装DOM Review （参见安装在......下面

设置Chrome DevTools MCP 在IDE中：

克劳德代码 (~/.claude/settings.json):

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["@anthropic-ai/chrome-devtools-mcp@latest"]
    }
  }
}

光标 (.cursor/mcp.json):

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["@anthropic-ai/chrome-devtools-mcp@latest"]
    }
  }
}

打开您的本地主机应用程序 在Chrome浏览器中
留下评论 使用DOM Review

告诉你的AI代理 阅读并修改评论：

Look at the current page in Chrome via MCP. There are DOM Review
comments on elements that need changes. Read the review data from
the page, then fix each unresolved issue. Use the CSS selectors
and component context to find the right files to edit.

AI代理看到了什么

通过MCP，代理可以访问页面快照并评估JavaScript以直接读取评论数据：

// The agent can run this via Chrome MCP to get all reviews
JSON.parse(document.getElementById('dom-review-data')?.textContent || '[]')

每次审查都包含：

{
  "id": "r_1708888800000",
  "selector": "#app > div.container > button.submit-btn",
  "xpath": "/html/body/div[1]/div[2]/button[1]",
  "comment": "Make the font size 16px and add more padding",
  "category": "style",
  "priority": "high",
  "resolved": false,
  "created": "2025-02-22T10:00:00.000Z",
  "context": {
    "tagName": "button",
    "text": "Submit",
    "boundingBox": { "x": 340, "y": 520, "w": 120, "h": 40 },
    "styles": {
      "color": "rgb(255, 255, 255)",
      "fontSize": "14px",
      "padding": "8px 12px",
      "display": "inline-flex"
    },
    "a11y": {
      "role": "button",
      "label": "Submit form",
      "tabIndex": 0
    },
    "framework": {
      "framework": "react",
      "componentName": "SubmitButton",
      "filePath": "src/components/SubmitButton.tsx",
      "props": { "variant": "primary", "disabled": false }
    }
  }
}

人工智能一次就能得到它需要的一切：哪个元素、出了什么问题、元素是什么样子、它属于哪个组件以及源文件在哪里。

JSON还包含一个 api 告诉代理如何使用的块 window.__domReviewAPI 用于添加回复、解决评论等。看代理API 了解详情。

代理API

DOM Review在的页面上公开了一个编程的API window.__domReviewAPI使用Chrome DevTools MCP的AI代理可以通过以下方式调用它 evaluate_script 添加评论、回复评论和解决/取消解决——不需要DOM黑客攻击。

API是自行编制的： #dom-review-data JSON块包含一个 api 字段描述了所有可用的方法，因此代理在读取审阅数据时会自动发现它。

可用方法

所有方法都是同步并返回 { success: true, data? } 或 { success: false, error }.

方法	参数	描述
`getReviews()`	--	获取当前页面的所有评论
`getReview(reviewId)`	`string`	按ID获取单个评论
`addComment({...})`	`{ selector, comment, priority?, category? }`	在DOM元素上添加新评论
`addReply({...})`	`{ reviewId, comment, author? }`	向现有评论添加回复
`resolveReview(reviewId)`	`string`	将审核标记为已解决
`unresolveReview(reviewId)`	`string`	重新打开已解决的审核
`updateComment({...})`	`{ reviewId, comment?, priority?, category? }`	更新审核文本或元数据
`deleteReview(reviewId)`	`string`	删除评论

示例：代理工作流

// Read all reviews
const reviews = window.__domReviewAPI.getReviews();

// Add a new comment on an element
window.__domReviewAPI.addComment({
  selector: 'button.submit-btn',
  comment: 'Missing aria-label for screen readers',
  priority: 'high',
  category: 'a11y'
});

// Reply to a review after fixing it
window.__domReviewAPI.addReply({
  reviewId: 'r_1708888800000',
  comment: 'Fixed. Added aria-label="Submit form" in SubmitButton.tsx',
  author: 'claude-code'
});

// Resolve the review
window.__domReviewAPI.resolveReview('r_1708888800000');

引擎盖下的工作原理

API使用 两段式桥梁 跨越Chrome的世界边界：

agent-api-bridge.js 跑步在 主要世界 （页面上下文）--这就是 evaluate_script 可以访问
agent-api-handler.js 跑步在 孤立的世界 （扩展沙箱）--这可以访问真实的评论库

通信通过同步的DOM事件和属性（与框架检测桥的模式相同）进行，因此所有API调用都会立即返回结果。

特性

元素选择

单击页面上的任何元素。DOM Review捕捉到：

CSS选择器 （智能生成，避免了像Tailwind/Bootstrap这样的实用程序类）
路径表达式 作为后备
计算样式 --颜色、字体、显示、位置、尺寸
可访问性属性 --ARIA角色、标签、选项卡索引
框架组件信息 --名称、文件路径、道具、状态

评论类别

对每条评论进行分类，以便AI代理可以优先处理和批量修复：

类别	用例
`style`	CSS/视觉变化
`layout`	间距、对齐、响应
`text`	复制、标签、占位符文本
`a11y`	可访问性改进
`logic`	行为错误、交互
`add`	缺少元素或功能
`remove`	不应该存在的元素

每一条评论也有 优先级 级别： high, medium，或 low.

框架检测

自动检测并提取以下组件级数据：

反应 --组件名称、道具、记忆状态（通过光纤内部）
视图3 --组件名称、道具、安装状态
视图2 --组件名称、道具、数据
Angular --组件类、属性

这意味着你的AI代理可以获得以下上下文 “这就是 <ProductCard> 组件at src/components/ProductCard.tsx，带道具 variant="outlined"" --而不仅仅是一个原始的CSS选择器。

视觉徽章

编号徽章出现在已审核的元素上，按优先级进行颜色编码：

红色--高优先级
琥珀色--中等优先级
灰色--低优先级
绿色--已解决

徽章在滚动和调整大小时跟踪元素位置。

侧边栏面板

在滑出式侧边栏中管理所有评论：

按状态筛选：全部/打开/已解决
按日期、优先级或类别排序
点击“定位”滚动到并突出显示元素
编辑、解析、重新打开或删除评论
每次审查的可折叠上下文详细信息

导出/导入（替代工作流）

如果您没有使用MCP，您仍然可以将评论导出/导入为JSON文件：

出口以结构化JSON文件形式查看(dom-review-{hostname}-{date}.json)
导入继续之前的复习课程
将JSON文件作为附件直接提供给任何AI聊天

AI提示模板

弹出窗口包括可以复制的现成提示：

解决所有问题 --指示AI按优先级处理所有未解决的审查
风格回顾 --使用捕获的上下文重点传递CSS/视觉问题
可访问性审计 --使用捕获的11年数据进行WCAG合规性检查

安装

来源（开发者模式）

克隆存储库：

git clone https://github.com/AAnkacHH/web-review-extention.git
cd web-review-extention

打开Chrome浏览器并转到 chrome://extensions/
启用 开发者模式 （在右上角切换）
点击 加载未打包的 并选择项目文件夹
DOM Review图标出现在工具栏中。导航到任何 localhost 页面开始查看。要在其他开发站点上使用，请参阅自定义域名.

权限

许可	为什么
`activeTab`	访问当前选项卡的DOM
`storage`	持续审查和设置
`scripting`	动态注入内容脚本
`localhost` / `127.0.0.1`	默认开发服务器来源
`http:///` （可选）	用户添加的自定义开发站点

默认情况下，该扩展仅在本地主机上运行。自定义网站需要通过Chrome的权限提示获得明确的用户批准。

用法

快速入门（使用MCP）

在Chrome中打开本地开发服务器(http://localhost:...)
单击DOM Review图标或使用浮动工具栏（右下角）
点击选择进入选择模式（十字准线光标）
单击页面上的任何元素
出现一个评论面板——写下你的反馈，选择一个类别和优先级
点击保存
对您想要的所有更改重复此操作

切换到IDE并告诉AI代理：

Check the current page in Chrome via MCP. Read the DOM Review
data and fix all unresolved issues, starting with high priority.

AI代理直接从实时页面读取评论，无需导出。

快速启动（无MCP）

如果您的IDE还不支持MCP，请使用导出工作流：

按照上述步骤1-7进行操作
点击出口下载JSON评论

使用以下提示将JSON附加到您的AI聊天中：

Here is a DOM review export for my app. Fix all unresolved issues.
Follow the CSS selectors to find each element. Use the captured
context (styles, component names, props) to make accurate changes.

隐私政策

DOM Review不会收集、存储或传输任何个人数据。所有数据都保留在浏览器的本地存储中。

建筑

manifest.json
├── popup/                  # Browser action popup (review count, prompt templates)
├── background/             # Service worker (message relay)
├── content/                # Injected into the page
│   ├── content-script.js   # Orchestrator — wires all modules together
│   ├── content-style.css   # Host page styles (hover outlines)
│   └── modules/
│       ├── review-store.js         # Central CRUD store + persistence
│       ├── selector-generator.js   # CSS selector & XPath generation
│       ├── framework-detector.js   # Isolated↔Main world bridge
│       ├── framework-bridge.js     # MAIN world framework detection
│       ├── agent-api-bridge.js     # MAIN world agent API (window.__domReviewAPI)
│       ├── agent-api-handler.js    # ISOLATED world API request handler
│       ├── context-capture.js      # Element context extraction
│       ├── shadow-ui.js            # Shadow DOM UI host
│       ├── comment-panel.js        # Comment form
│       ├── badges.js               # Visual markers on elements
│       ├── sidebar.js              # Review list panel
│       ├── selector-mode.js        # Click-to-select mode
│       └── export-import.js        # JSON export/import
└── icons/                  # Extension icons

关键设计决策：

DOM嵌入审查数据 --评论被存储为隐藏 <script> 在页面DOM中添加标签，使任何连接MCP的AI代理都可以访问它们
影子DOM隔离 --所有扩展UI都位于一个封闭的ShadowDOM中，因此它永远不会与页面的样式或脚本冲突
模块化IIFE架构 --每个模块都是自包含的，并通过共享的 window.__domReview 命名空间
双世界注射 --框架检测在MAIN世界（访问页面JS上下文）中运行，而其他所有东西都在ISOLATED世界（Chrome扩展沙箱）中运行
无构建步骤 --vanilla JS，没有bundler，没有依赖关系。加载并运行
无外部网络请求 --一切都是本地的

Claude代码集成

要使Claude Code自动理解DOM Review而无需任何发现步骤，请将工作流说明添加到您的设置中。

选项A：每个项目（CLAUDE.md）

将模板复制到项目根目录中：

cp path/to/dom-review-extension/docs/CLAUDE.md ./CLAUDE.md
# or append to existing CLAUDE.md
cat path/to/dom-review-extension/docs/CLAUDE.md >> ./CLAUDE.md

选项B：全球（所有项目）

增添 ~/.claude/settings.json:

{
  "permissions": {
    "allow": [
      "mcp__chrome-devtools__evaluate_script",
      "mcp__chrome-devtools__take_snapshot",
      "mcp__chrome-devtools__take_screenshot",
      "mcp__chrome-devtools__navigate_page",
      "mcp__chrome-devtools__click",
      "mcp__chrome-devtools__list_pages",
      "mcp__chrome-devtools__select_page"
    ]
  },
  "userInstructions": "This project uses the DOM Review Chrome extension with Chrome DevTools MCP server (chrome-devtools). To read reviews: use mcp__chrome-devtools__evaluate_script with function `() => JSON.parse(document.getElementById('dom-review-data')?.textContent || '{\"reviews\":[]}')`. To interact programmatically, use mcp__chrome-devtools__evaluate_script to call window.__domReviewAPI methods — getReviews(), getReview(id), addComment({selector, comment, priority?, category?}), addReply({reviewId, comment, author?}), resolveReview(id), unresolveReview(id), updateComment({reviewId, comment?, priority?, category?}), deleteReview(id). All methods are synchronous, return {success, data?, error?}. evaluate_script requires arrow function syntax: () => window.__domReviewAPI.methodName(...). After fixing a review, call addReply with a summary of changes, then resolveReview to mark it done."
}

用法

配置后，只需告诉Claude Code：

Check the page in Chrome for DOM Review comments and fix them.

Claude Code将阅读评论，修复代码，回复更改的内容，并解决每次评论——不需要手动步骤。

自定义域名

默认情况下，DOM Review运行在 http://localhost/* 和 http://127.0.0.1/*。您可以从弹出窗口添加自定义开发站点（LAN IP、本地域、远程开发服务器）。

添加网站

单击DOM Review图标打开弹出窗口
滚动到 允许的站点 在底部
在输入框中键入主机，然后单击添加（或按Enter键）
Chrome将显示权限提示--单击允许
重新加载该网站上所有打开的标签页

输入接受灵活的格式：

您键入	另存为
`192.168.1.50:3000`	`http://192.168.1.50:3000/*`
`http://myapp.local:5173/`	`http://myapp.local:5173/*`
`http://dev.example.com/*`	`http://dev.example.com/*`

删除网站

点击 × “允许的站点”列表中自定义模式旁边的按钮。主机权限将自动撤销。

启用/禁用

弹出标题中的切换开关全局启用或禁用扩展。禁用时，工具栏和所有UI都将隐藏。现有选项卡需要重新加载以反映更改。

备注

仅支持HTTP源（这是一个开发工具，不需要HTTPS）
无法删除默认模式（localhost，127.0.0.1）
每个自定义网站都会触发一个单独的Chrome权限提示，以提高透明度
自定义图案通过以下方式在设备之间同步 chrome.storage.sync

Vibecoding工作流程提示

让AI直接读取页面。 使用MCP，您不需要描述任何内容——代理可以一次看到页面、阅读评论和查看元素上下文。

批量处理您的评论。 对页面进行完整的视觉浏览，标记所有需要修复的内容，然后告诉AI修复所有内容。这为代理提供了一个完整的画面，并使其能够批量处理相关的更改。

始终如一地使用类别。 如果将布局问题标记为 layout 以及风格问题 style，你可以告诉AI“先解决所有布局问题”，以获得更专注的传球。

包括组件上下文。 当使用React/Vue/Angular时，检测到的框架数据告诉AI要编辑哪个组件文件——无需猜测。

使用优先级来控制顺序。 将关键的视觉错误标记为 high 对物品进行抛光 low。告诉AI先解决高优先级项目，这样你就可以在继续之前查看重要的修复程序。

以决心迭代。 人工智能进行更改后，刷新页面，检查结果，将固定项目标记为已解决，并为仍需要工作的任何项目添加新的注释。

支持的环境

浏览器： Chrome（清单V3）
页： http://localhost/* 和 http://127.0.0.1/* 默认情况下，加上任何用户添加的自定义开发站点
MCP客户端： Claude Code、Cursor、Windsurf和任何支持MCP的IDE
框架： React、Vue 2、Vue 3、Angular（自动检测）
CSS库： Tailwind、Bootstrap（从选择器过滤的实用程序类）

贡献

欢迎捐款。一些需要帮助的领域：

[]支持更多框架（Svelte、SolidJS、Astro）
[]Firefox/Safari端口
[]评论附有截图
[]多页审查会议
[]团队协作（共享审阅文件）
[x] 自定义域支持（局域网IP、本地域）
[x] 全局启用/禁用切换
[]暗/亮主题切换

许可证

麻省理工学院