简介

该应用程序是一个强大的浏览器监控和交互工具，它通过 Anthropic 的模型上下文协议（MCP）启用人工智能驱动的应用程序，可以通过一个 Chrome 插件来捕获和分析浏览器数据。

简介

该应用程序是一个强大的浏览器监控和交互工具，它通过 Anthropic 的模型上下文协议（MCP）启用人工智能驱动的应用程序，可以通过一个 Chrome 插件来捕获和分析浏览器数据。

BrowserTools MCP

让你的AI工具更加智能，能够与浏览器进行交互

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

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

路线图

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

更新

v1.2.0已发布！以下是更新概要：

• 现在可以在DevTools面板中启用“允许自动粘贴到光标”。屏幕截图将自动粘贴到光标（只需确保聚焦/点击光标的代理输入字段，否则不起作用！）
• 通过Lighthouse集成了一套SEO、性能、可访问性和最佳实践分析工具
• 实现了用于改进NextJS应用SEO的具体提示
• 添加了调试模式作为工具，按特定顺序执行所有调试工具，并附带改进推理的提示
• 添加了审计模式作为工具，按特定顺序执行所有审计工具
• 解决了Windows连接问题
• 改进了BrowserTools服务器、扩展和MCP服务器之间的网络连接，包括主机/端口自动发现、自动重连和优雅关闭机制
• 增加了使用Ctrl+C更轻松退出Browser Tools服务器的能力

快速入门指南

运行此MCP工具有三个组成部分：

1. 从此处安装我们的Chrome扩展程序：v1.2.0 BrowserToolsMCP Chrome Extension
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（安装到IDE中的MCP服务器，与扩展+browser-tools-server通信）

npx @agentdeskai/browser-tools-mcp@latest 是您需要放入IDE中的命令 npx @agentdeskai/browser-tools-server@latest 是您需要在一个新的终端窗口中运行的命令

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

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

• 退出/关闭您的浏览器。不仅仅是窗口，而是整个Chrome。
• 重启本地Node服务器（browser-tools-server）
• 确保您只打开了一个Chrome开发者工具面板实例

之后，它应该可以正常工作了，但如果不行，请告诉我，我可以分享更多步骤来收集有关问题的日志/信息！

如果您有任何问题或遇到任何问题，请随时打开问题工单！如果您有任何改进的想法，也请随时联系我或使用增强标签打开问题工单，或者通过 @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)

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

示例查询：

• "运行一次最佳实践审计。"
• "检查这个页面的最佳实践。"
• "这个页面有最佳实践问题吗？"

审计模式 (runAuditMode)

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

示例查询：

• "运行审计模式。"
• "进入审计模式。"

NextJS 审计 (runNextJSAudit)

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

示例查询：

• "运行一次 NextJS 审计。"
• "运行一次 NextJS 审计，我正在使用 app 路由器。"
• "运行一次 NextJS 审计，我正在使用 page 路由器。"

调试模式 (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 客户端中的 LLMs

MCP 服务器

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

安装

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

• BrowserTools MCP 文档

使用

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

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

兼容性

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

来源

• 来源：github
• 链接：https://github.com/AgentDeskAI/browser-tools-mcp