该项目已不再维护，请使用其他解决方案。

BrowserTools MCP

让您的 AI 工具对浏览器更加敏感，并具备更强的交互能力

此应用是一款强大的浏览器监控与交互工具，通过 Anthropic 的模型上下文协议 (MCP)，借助 Chrome 扩展程序，使基于 AI 的应用程序能够捕获并分析浏览器数据。

请阅读我们的文档以获取完整的安装、快速入门和贡献指南。

路线图

请在此处查看我们的项目路线图：Github 路线图 / 项目看板

更新内容

v1.2.0 已发布！以下是本次更新的简要说明：

• 您现在可以在 DevTools 面板中启用“允许自动粘贴到 Cursor”。截图将自动粘贴到 Cursor 中（只需确保焦点或点击位于 Cursor 的 Agent 输入框内，否则将无法正常工作！）
• 通过 Lighthouse 集成了 SEO、性能、可访问性及最佳实践分析工具套件
• 实现了一个针对 NextJS 应用程序的特定提示，用于提升其 SEO 效果
• 添加了调试模式工具，该工具会按照特定顺序执行所有调试工具，并附带一个用于改进推理能力的提示
• 添加了审计模式工具，用于按特定顺序执行所有审计工具
• 解决了 Windows 系统上的连接问题
• 改进了 BrowserTools 服务器、扩展程序和 MCP 服务器之间的网络通信，实现了主机/端口自动发现、自动重连以及优雅关闭机制
• 增加了通过 Ctrl+C 更轻松地退出 BrowserTools 服务器的功能

快速入门指南

运行此 MCP 工具需要三个组件：

1. 从这里安装我们的 Chrome 扩展程序：v1.2.0 BrowserToolsMCP Chrome 扩展程序
2. 在您的 IDE 中运行以下命令安装 MCP 服务器：npx @agentdeskai/browser-tools-mcp@latest
3. 打开一个新的终端窗口并运行以下命令：npx @agentdeskai/browser-tools-server@latest

• 不同的 IDE 可能有不同的配置，但此命令通常是一个不错的起点；请参考您所使用的 IDE 文档以进行正确的配置设置。

重要提示——您需要安装两个服务器。它们分别是：

• browser-tools-server（本地 Node.js 服务器，作为收集日志的中间件）
• browser-tools-mcp（MCP 服务器，需安装在您的 IDE 中，负责与扩展程序和 browser-tools-server 通信）

npx @agentdeskai/browser-tools-mcp@latest 是您需要在 IDE 中运行的命令， 而 npx @agentdeskai/browser-tools-server@latest 则是在新的终端窗口中运行的命令。

完成以上三个步骤后，打开 Chrome 开发者工具，然后进入 BrowserToolsMCP 面板。

如果您仍然遇到问题，请尝试以下步骤：

• 关闭并退出浏览器——不仅仅是窗口，而是彻底关闭整个 Chrome 浏览器。
• 重启本地 Node.js 服务器（browser-tools-server）。
• 确保仅打开一个 Chrome 开发者工具面板。

完成这些操作后，应该就可以正常使用了。如果仍无法正常工作，请告知我，我可以提供更多步骤来收集有关问题的日志和信息！

如果您有任何疑问或问题，欢迎随时提交问题工单！如果您有任何改进建议，也欢迎随时联系或提交带有增强标签的问题工单，或者直接通过 @tedx_ai on x 与我联系。

完整更新说明：

像 Cursor 这样的编码助手可以无缝地对当前页面执行这些审计。通过利用 Puppeteer 和 Lighthouse npm 库，BrowserTools MCP 现在能够：

• 评估页面是否符合 WCAG 标准
• 识别性能瓶颈
• 标记页面上的 SEO 问题
• 检查是否遵循 Web 开发的最佳实践
• 审查 NextJS 特有的 SEO 问题

这一切都不需要离开您的 IDE 🎉

---

🔑 主要新增功能

审计类型	描述
可访问性	符合 WCAG 标准的检查，包括颜色对比度、缺失的替代文本、键盘导航陷阱、ARIA 属性等。
性能	基于 Lighthouse 的分析，检测渲染阻塞资源、过大的 DOM 结构、未优化的图片以及其他影响页面加载速度的因素。
SEO	评估页面上的 SEO 因素（如元数据、标题和链接结构），并提出改进建议以提高搜索可见性。
最佳实践	检查网页开发中的通用最佳实践。
NextJS 审计	注入一个用于执行 NextJS 审计的提示。
审计模式	按照顺序运行所有审计工具。
调试模式	按照顺序运行所有调试工具。

---

🛠️ 使用审计工具

✅ 开始之前

请确保您已准备好：

• 浏览器中有一个活动标签页
• 已启用BrowserTools 扩展程序

▶️ 运行审计

无头浏览器自动化：
Puppeteer 自动化一个无头 Chrome 实例来加载页面并收集审计数据，即使对于单页应用或通过 JavaScript 加载的内容，也能确保结果的准确性。

无头浏览器实例在最后一次审计调用后会保持活动状态 60 秒，以便高效处理连续的审计请求。

结构化结果：
每次审计都会以结构化的 JSON 格式返回结果，包括总体评分和详细的问題列表。这使得兼容 MCP 的客户端能够轻松解读结果，并呈现可操作的见解。

MCP 服务器提供了在当前页面上运行审计的工具。以下是您可以用来触发这些审计的示例查询：

无障碍审计 (runAccessibilityAudit)

确保页面符合 WCAG 等无障碍标准。

示例查询：

• “这个页面是否存在无障碍问题？”
• “运行一次无障碍审计。”
• “检查这个页面是否符合 WCAG 标准。”

性能审计 (runPerformanceAudit)

识别性能瓶颈和加载问题。

示例查询：

• “为什么这个页面加载得这么慢？”
• “检查一下这个页面的性能。”
• “运行一次性能审计。”

SEO 审计 (runSEOAudit)

评估页面对搜索引擎优化的程度。

示例查询：

• “我该如何改进这个页面的 SEO？”
• “运行一次 SEO 审计。”
• “检查一下这个页面的 SEO。”

最佳实践审计 (runBestPracticesAudit)

检查网页开发中的通用最佳实践。

示例查询：

• “运行一次最佳实践审计。”
• “检查一下这个页面的最佳实践。”
• “这个页面是否存在最佳实践方面的问题？”

审计模式 (runAuditMode)

按特定顺序运行所有审计。如果检测到 Next.js 框架，则会运行 Next.js 审计。

示例查询：

• “运行审计模式。”
• “进入审计模式。”

Next.js 审计 (runNextJSAudit)

检查 Next.js 应用程序的最佳实践和 SEO 改进。

示例查询：

• “运行一次 Next.js 审计。”
• “运行一次 Next.js 审计，我正在使用 App Router。”
• “运行一次 Next.js 审计，我正在使用 Page Router。”

调试模式 (runDebuggerMode)

按特定顺序运行所有调试工具。

示例查询：

• “进入调试模式。”

架构

有三个核心组件用于捕获和分析浏览器数据：

1. Chrome 扩展程序：一款浏览器扩展程序，用于捕获屏幕截图、控制台日志、网络活动和 DOM 元素。
2. Node.js 服务器：作为中介服务器，促进 Chrome 扩展程序与任何 MCP 服务器实例之间的通信。
3. MCP 服务器：一种模型上下文协议服务器，为 AI 客户端提供与浏览器交互的标准工具。

┌─────────────┐     ┌──────────────┐     ┌───────────────┐     ┌─────────────┐
│  MCP 客户端 │ ──► │  MCP 服务器  │ ──► │  Node.js 服务器  │ ──► │   Chrome    │
│  (例如      │ ◄── │  (协议       │ ◄── │ (中间件)      │ ◄── │  扩展程序  │
│   Cursor)   │     │   处理器)   │     │               │     │             │
└─────────────┘     └──────────────┘     └───────────────┘     └─────────────┘

模型上下文协议（MCP）是 Anthropic AI 模型支持的一项功能，允许您为任何兼容的客户端创建自定义工具。像 Claude Desktop、Cursor、Cline 或 Zed 这样的 MCP 客户端可以运行一个 MCP 服务器，该服务器会“教会”这些客户端如何使用新工具。

这些工具可以调用外部 API，但在我们的案例中，所有日志都存储在您的本地机器上，绝不会发送到任何第三方服务或 API。BrowserTools MCP 运行一个本地的 Node.js API 服务器实例，该服务器与 BrowserTools Chrome 扩展程序进行通信。

所有使用 BrowserTools MCP 服务器接口的用户都通过相同的 Node.js API 和 Chrome 扩展程序进行交互。

Chrome 扩展程序

• 监控 XHR 请求/响应和控制台日志
• 跟踪选定的 DOM 元素
• 将所有日志和当前元素发送到 BrowserTools 连接器
• 连接到 WebSocket 服务器以捕获/发送屏幕截图
• 允许用户配置令牌/截断限制以及截图保存路径

Node.js 服务器

• 充当 Chrome 扩展程序与 MCP 服务器之间的中间件
• 接收来自 Chrome 扩展程序的日志和当前选定的元素
• 处理来自 MCP 服务器的请求，以捕获日志、屏幕截图或当前元素
• 向 Chrome 扩展程序发送 WebSocket 命令以捕获屏幕截图
• 智能地截断字符串和日志中重复对象的数量，以避免超出令牌限制
• 删除 Cookie 和敏感标头，以防止将其发送到 MCP 客户端中的 LLM

MCP 服务器

• 实现模型上下文协议
• 为 AI 客户端提供标准化工具
• 与各种 MCP 客户端兼容（Cursor、Cline、Zed、Claude Desktop 等）

安装

安装步骤可在我们的文档中找到：

• BrowserTools MCP 文档

使用

一旦安装并配置完毕，该系统允许任何兼容的 MCP 客户端：

• 监控浏览器控制台输出
• 捕获网络流量
• 截取屏幕截图
• 分析选定的元素
• 清除我们 MCP 服务器中存储的日志
• 运行无障碍、性能、SEO 和最佳实践审计

兼容性

• 适用于任何兼容 MCP 的客户端
• 主要设计用于与 Cursor IDE 集成
• 支持其他 AI 编辑器和 MCP 客户端

BrowserTools MCP 快速上手指南

⚠️ 重要提示：根据项目官方说明，本项目已不再维护（NO LONGER ACTIVE）。建议开发者寻找替代方案。以下指南仅基于现有文档整理，供参考或本地实验使用。

BrowserTools MCP 是一款基于 Anthropic Model Context Protocol (MCP) 的浏览器监控与交互工具。它通过 Chrome 扩展和本地服务，让 AI 编程助手（如 Cursor、Cline 等）能够感知浏览器状态、捕获日志、截图并进行 SEO、性能及无障碍审计。

环境准备

在开始之前，请确保您的开发环境满足以下要求：

• 操作系统：Windows, macOS 或 Linux
• 浏览器：Google Chrome（需完全关闭后重新启动以加载扩展）
• 运行时环境：Node.js (推荐最新 LTS 版本，用于运行 npx 命令)
• AI 编辑器：支持 MCP 协议的客户端（如 Cursor, Cline, Zed, Claude Desktop 等）
• 网络环境：需能访问 GitHub Releases 和 npm 仓库（国内用户若遇连接问题，请自行配置代理或镜像源）

安装步骤

该工具由三个核心部分组成：Chrome 扩展、MCP 服务器（集成到 IDE）和 Node 中间件服务（独立运行）。请按顺序完成以下三步：

1. 安装 Chrome 扩展

下载并安装浏览器扩展程序：

1. 下载扩展包：v1.2.0 BrowserToolsMCP Chrome Extension
2. 解压下载的 .zip 文件。
3. 打开 Chrome 浏览器，地址栏输入 chrome://extensions/ 并回车。
4. 开启右上角的 "开发者模式" (Developer mode)。
5. 点击 "加载已解压的扩展程序" (Load unpacked)，选择刚才解压的文件夹。

2. 配置 IDE 中的 MCP 服务器

在您使用的 AI 编辑器（以 Cursor 为例）的 MCP 配置文件中添加以下命令。这将安装负责协议通信的 MCP 服务。

npx @agentdeskai/browser-tools-mcp@latest

注意：不同 IDE 的配置方式略有差异，请将上述命令填入您 IDE 对应的 MCP Server 启动配置中。

3. 启动本地 Node 中间件服务

打开一个新的终端窗口（保持运行），启动负责收集日志和协调通信的本地服务器：

npx @agentdeskai/browser-tools-server@latest

4. 激活面板

1. 确保上述两个服务均已启动。
2. 在 Chrome 中按 F12 打开开发者工具。
3. 在开发者工具顶部菜单栏找到并点击 BrowserToolsMCP 面板。
4. 若看到面板正常显示且无报错，即表示安装成功。

基本使用

安装完成后，您可以在 AI 助手（如 Cursor 的 Agent 模式）中直接使用自然语言调用浏览器功能。

核心功能示例

确保当前浏览器有一个活动标签页，且 BrowserTools 扩展已启用，然后在 AI 对话框中输入以下指令：

1. 运行综合审计 (Audit Mode)

自动执行无障碍、性能、SEO 和最佳实践检查。

指令示例： "Run audit mode." "进入审计模式，检查当前页面。"

2. 专项审计

针对特定领域进行分析：

• 无障碍性："Are there any accessibility issues on this page?" (检查 WCAG 合规性)
• 性能："Why is this page loading so slowly?" (分析加载瓶颈)
• SEO："How can I improve SEO for this page?" (评估搜索引擎优化)
• NextJS 专项："Run a NextJS audit, I'm using app router." (针对 NextJS 项目的 SEO 检查)

3. 调试模式 (Debugger Mode)

按顺序执行所有调试工具。

指令示例： "Enter debugger mode."

4. 自动截图粘贴 (Cursor 专用)

在 DevTools 的 BrowserTools 面板中启用 "Allow Auto-Paste into Cursor"。

• 操作：在 Cursor 中聚焦输入框，AI 捕获的截图将自动粘贴。

工作原理简述

当您发出指令时，流程如下： AI 客户端 (Cursor) → MCP Server → Node 中间件服务 → Chrome 扩展 → 捕获数据 (日志/截图/DOM) → 返回给 AI 分析。

所有数据均在本地处理，不会发送至第三方服务。