浏览器工具 MCP

让你的 AI 工具具备 10 倍的感知能力，并能与浏览器进行交互

该应用程序是一个强大的浏览器监控和交互工具，它使 AI 驱动的应用程序能够通过 Anthropic 的模型上下文协议 (MCP) 通过 Chrome 扩展程序捕获和分析浏览器数据。

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

路线图

在这里查看我们的项目路线图： Github 路线图/项目板

更新

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

您现在可以在 DevTools 面板中启用“允许自动粘贴到 Cursor”功能。屏幕截图将自动粘贴到 Cursor 中（请确保将焦点/点击到 Cursor 中的 Agent 输入字段，否则将无法使用！）
通过 Lighthouse 集成了一套 SEO、性能、可访问性和最佳实践分析工具
实现了 NextJS 特定的提示，用于改善 NextJS 应用程序的 SEO
添加了调试器模式，该模式以特定顺序执行所有调试工具，并提示改进推理
添加审计模式作为按特定顺序执行所有审计工具的工具
解决了 Windows 连接问题
改进了 BrowserTools 服务器、扩展程序和 MCP 服务器之间的网络连接，具有主机/端口自动发现、自动重新连接和正常关机机制
增加了使用 Ctrl+C 更轻松地退出浏览器工具服务器的功能

请确保更新您的 IDE / MCP 客户端中的版本： npx @agentdeskai/browser-tools-mcp@1.2.0

另请确保在此处下载最新版本的 Chrome 扩展程序： v1.2.0 BrowserToolsMCP Chrome 扩展程序

从那里您可以像这样运行本地节点服务器： npx @agentdeskai/browser-tools-server@1.2.0

请务必指定版本 1.2.0，因为 NPX 缓存可能会阻止您获取最新版本！每次更新只需执行一次此操作。执行一次后，您应该已经使用最新版本了。

一旦你打开了 chrome 开发工具，日志就会被发送到你的服务器🦾

如果你有任何疑问或问题，欢迎随时提交问题单！如果你有任何改进建议，欢迎随时联系我们，提交带有增强标签的问题单，或者通过 x 联系我 @tedx_ai

完整更新说明：

像 Cursor 这样的代码代理可以无缝地针对当前页面运行这些审核。通过利用 Puppeteer 和 Lighthouse npm 库，BrowserTools MCP 现在可以：

评估页面是否符合 WCAG 标准
识别性能瓶颈
标记页面 SEO 问题
检查是否遵守 Web 开发最佳实践
审查 NextJS 与 SEO 相关的特定问题

...所有这些都无需离开你的 IDE 🎉

🔑 主要新增内容

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

🛠️ 使用审计工具

✅开始之前

确保您已：

浏览器中的活动选项卡
已启用 BrowserTools 扩展

▶️运行审计

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

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

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

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

无障碍审计（ `runAccessibilityAudit` ）

确保页面符合 WCAG 等可访问性标准。

示例查询：
“此页面是否存在任何可访问性问题？”
“运行可访问性审核。”
“检查此页面是否符合 WCAG 标准。”

绩效审计（ `runPerformanceAudit` ）

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

示例查询：
“为什么这个页面加载这么慢？”
“检查此页面的性能。”
“进行绩效审计。”

SEO 审计（ `runSEOAudit` ）

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

示例查询：
“我该如何改进这个页面的 SEO？”
“运行 SEO 审核。”
“检查此页面的 SEO。”

最佳实践审计（ `runBestPracticesAudit` ）

检查 Web 开发中的一般最佳实践。

示例查询：
“进行最佳实践审核。”
“查看此页面上的最佳实践。”
“此页面上是否存在任何最佳实践问题？”

审核模式（ `runAuditMode` ）

按特定顺序运行所有审核。如果检测到框架，则会运行 NextJS 审核。

示例查询：
“运行审核模式。”
“进入审核模式。”

NextJS 审计（ `runNextJSAudit` ）

检查 NextJS 应用程序的最佳实践和 SEO 改进

示例查询：
“运行 NextJS 审核。”
“运行 NextJS 审核，我正在使用应用路由器。”
“运行 NextJS 审核，我正在使用页面路由器。”

调试器模式（ `runDebuggerMode` ）

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

示例查询：
“进入调试器模式。”

建筑学

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

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

┌─────────────┐     ┌──────────────┐     ┌───────────────┐     ┌─────────────┐
│  MCP Client │ ──► │  MCP Server  │ ──► │  Node Server  │ ──► │   Chrome    │
│  (e.g.      │ ◄── │  (Protocol   │ ◄── │ (Middleware)  │ ◄── │  Extension  │
│   Cursor)   │     │   Handler)   │     │               │     │             │
└─────────────┘     └──────────────┘     └───────────────┘     └─────────────┘

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

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

BrowserTools MCP 服务器的所有使用者都使用相同的 NodeJS API 和 Chrome 扩展程序进行交互。

Chrome 扩展程序

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

节点服务器

充当 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

Integrations