Browser Tools MCP

🚀 BrowserTools MCP

BrowserTools MCP 是一款强大的浏览器监控与交互工具，它借助 Anthropic 的模型上下文协议（MCP），让基于人工智能的应用程序能够通过 Chrome 扩展捕获和分析浏览器数据，使你的 AI 工具在浏览器交互方面的能力提升 10 倍。

🚀 快速开始

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

🗺️ 路线图

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

🌟 更新内容

v1.2.0 版本已发布！以下是本次更新的简要介绍：

• 现在可以在开发者工具面板中启用“允许自动粘贴到 Cursor”功能。截图将自动粘贴到 Cursor 中（请确保在 Cursor 中聚焦/点击代理输入字段，否则该功能将无法使用！）
• 通过 Lighthouse 集成了一套 SEO、性能、可访问性和最佳实践分析工具。
• 实现了一个用于改进 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 扩展程序

之后，你可以按以下方式运行本地节点服务器： npx @agentdeskai/browser-tools-server@1.2.0

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

打开 Chrome 开发者工具后，日志将发送到你的服务器 🦾

如果你有任何问题或疑问，请随时创建问题工单！如果你有任何改进建议，也可以随时联系我们，或者创建带有增强标签的问题工单，也可以在 X 上的 @tedx_ai 联系我。

完整更新说明

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

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

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

🔑 关键新增功能

🛠️ 使用审计工具

✅ 开始前准备

确保你具备以下条件：

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

▶️ 运行审计

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

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

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

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

可访问性审计 (runAccessibilityAudit)

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

⚠️ 重要提示

示例查询如下：

• “此页面是否存在可访问性问题？”
• “运行可访问性审计。”
• “检查此页面是否符合 WCAG 标准。”

性能审计 (runPerformanceAudit)

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

⚠️ 重要提示

示例查询如下：

• “为什么此页面加载如此缓慢？”
• “检查此页面的性能。”
• “运行性能审计。”

SEO 审计 (runSEOAudit)

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

⚠️ 重要提示

示例查询如下：

• “如何改进此页面的 SEO？”
• “运行 SEO 审计。”
• “检查此页面的 SEO。”

最佳实践审计 (runBestPracticesAudit)

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

⚠️ 重要提示

示例查询如下：

• “运行最佳实践审计。”
• “检查此页面的最佳实践。”
• “此页面是否存在最佳实践问题？”

审计模式 (runAuditMode)

按特定顺序运行所有审计工具。如果检测到框架，将运行 NextJS 审计。

⚠️ 重要提示

示例查询如下：

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

NextJS 审计 (runNextJSAudit)

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

⚠️ 重要提示

示例查询如下：

• “运行 NextJS 审计。”
• “运行 NextJS 审计，我正在使用应用路由器。”
• “运行 NextJS 审计，我正在使用页面路由器。”

调试器模式 (runDebuggerMode)

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

⚠️ 重要提示

示例查询如下：

• “进入调试器模式。”

🔧 技术细节

架构

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

1. Chrome 扩展程序：一个浏览器扩展程序，用于捕获屏幕截图、控制台日志、网络活动和 DOM 元素。
2. Node 服务器：一个中间服务器，用于促进 Chrome 扩展程序与任何 MCP 服务器实例之间的通信。
3. 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 服务器以捕获/发送屏幕截图
• 允许用户配置令牌/截断限制以及屏幕截图文件夹路径

Node 服务器

• 作为 Chrome 扩展程序和 MCP 服务器之间的中间件
• 从 Chrome 扩展程序接收日志和当前选定的元素
• 处理 MCP 服务器的请求，以捕获日志、屏幕截图或当前元素
• 向 Chrome 扩展程序发送 WebSocket 命令以捕获屏幕截图
• 智能截断日志中的字符串和重复对象数量，以避免达到令牌限制
• 移除 cookie 和敏感头部，以避免发送到 MCP 客户端的大语言模型

MCP 服务器

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

📦 安装指南

安装步骤请参考我们的文档：

• BrowserTools MCP 文档

💻 使用示例

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

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

🌟 兼容性

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