BrowserTools MCP

让你的AI工具对浏览器的交互感知能力提升10倍

这个应用程序是一个强大的浏览器监控和交互工具，通过 Anthropic 的 Model Context Protocol (MCP)，它能够通过 Chrome 扩展捕获和分析浏览器数据，从而为 AI 驱动的应用程序提供支持。

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

路线图

查看我们的项目路线图：Github Roadmap / Project Board

更新

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

• 现在你可以在 DevTools 面板中启用 "Allow Auto-Paste into Cursor"。截图将自动粘贴到 Cursor 中（只需确保点击进入 Cursor 的 Agent 输入字段，否则不会生效！）
• 集成了通过 Lighthouse 提供的一套 SEO、性能、可访问性和最佳实践分析工具
• 实现了一个特定于 NextJS 的提示，用于改进 NextJS 应用程序的 SEO
• 添加了调试器模式，该模式按特定顺序执行所有调试工具，并附带一个提示以改进推理
• 添加了审核模式，该模式按特定顺序执行所有审核工具
• 解决了 Windows 连接问题
• 改进了 BrowserTools 服务器、扩展和 MCP 服务器之间的网络连接，具有主机/端口自动发现、自动重连和优雅关闭机制
• 增加了使用 Ctrl+C 更容易退出 Browser Tools 服务器的功能

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

还请确保下载最新版本的 Chrome 扩展：
v1.2.0 BrowserToolsMCP Chrome Extension

之后你可以像这样运行本地 Node 服务器：
npx @agentdeskai/browser-tools-server@1.2.0

请确保指定版本 1.2.0，因为 NPX 缓存可能会阻止你获取最新版本！你应该只需要在每次更新时这样做一次。一旦完成一次操作，你就应该处于最新版本。

并且一旦你打开了 Chrome 开发者工具，日志应该会被发送到你的服务器 🦾

如果你有任何问题或遇到问题，请随时打开一个 issue 票！如果你有任何改进建议，请随时联系我们或打开一个带有增强标签的 issue 票，或者联系我 @tedx_ai on x

全部更新说明：

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

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

...这一切都可以在不离开你的 IDE 的情况下完成 🎉

🔑 主要新增功能

🛠️ 使用审核工具

✅ 开始之前

确保你有：

• 浏览器中的一个活动标签页
• 已启用 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 审核，我正在使用 app router。"
• "运行一个 NextJS 审核，我正在使用 page router。"

调试器模式 (runDebuggerMode)

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

示例查询:

• "进入调试器模式。"

架构

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

1. Chrome 扩展：一个浏览器扩展，用于捕获截图、控制台日志、网络活动和 DOM 元素。
2. Node 服务器：一个中间件服务器，促进 Chrome 扩展与任何 MCP 服务器实例之间的通信。
3. MCP 服务器：一个 Model Context Protocol 服务器，为 AI 客户端提供标准化工具以与浏览器进行交互。

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

Model Context Protocol (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 服务器以捕获/发送截图
• 允许用户配置令牌/截断限制 + 截图文件夹路径

Node 服务器

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

MCP 服务器

• 实现 Model Context Protocol
• 为 AI 客户端提供标准化工具
• 与各种 MCP 客户端兼容（Cursor、Cline、Zed、Claude Desktop 等）

安装

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

• BrowserTools MCP 文档

使用

安装并配置后，系统允许任何兼容的 MCP 客户端：

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

兼容性

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