Cursor Browser Tools MCP

开发 TypeScript

🚀 BrowserTools MCP

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

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

🚀 快速开始

你可以按照以下步骤快速使用 BrowserTools MCP：

阅读文档完成安装和配置。
确保你的浏览器有活动标签页，并且启用了 BrowserTools 扩展。
运行本地节点服务器：npx @agentdeskai/browser-tools-server@1.2.0 。
打开 Chrome 开发者工具，日志将自动发送到你的服务器。

✨ 主要特性

多类型审计：支持可访问性、性能、SEO、最佳实践、NextJS 审计等多种类型的审计，能全面评估网页质量。
自动化审计：借助 Puppeteer 实现无头浏览器自动化，高效收集审计数据，确保单页应用或通过 JavaScript 加载的内容也能准确审计。
结构化结果：审计结果以结构化的 JSON 格式返回，便于 MCP 兼容客户端解读和提供可行建议。
多模式支持：具备审计模式和调试器模式，可按特定顺序执行所有审计或调试工具。
本地数据存储：所有日志都存储在本地，不会发送到任何第三方服务或 API，保障数据安全。

📦 安装指南

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

BrowserTools MCP 文档

💻 使用示例

基础用法

确保你已完成安装和配置，并且满足以下条件：

浏览器中有活动标签页。
启用了 BrowserTools 扩展。

以下是一些触发不同审计的示例查询：

# 可访问性审计
"Are there any accessibility issues on this page?"
"Run an accessibility audit."
"Check if this page meets WCAG standards."

# 性能审计
"Why is this page loading so slowly?"
"Check the performance of this page."
"Run a performance audit."

# SEO 审计
"How can I improve SEO for this page?"
"Run an SEO audit."
"Check SEO on this page."

# 最佳实践审计
"Run a best practices audit."
"Check best practices on this page."
"Are there any best practices issues on this page?"

# 审计模式
"Run audit mode."
"Enter audit mode."

# NextJS 审计
"Run a NextJS audit."
"Run a NextJS audit, I'm using app router."
"Run a NextJS audit, I'm using page router."

# 调试器模式
"Enter debugger mode."

高级用法

在高级场景中，你可以利用无头浏览器自动化和结构化结果的特性，对连续的审计请求进行高效处理。例如，在一个脚本中按顺序触发多个审计，并对返回的 JSON 结果进行分析和处理：

import requests
import json

# 假设 MCP 服务器地址
mcp_server_url = "http://your-mcp-server-url"

# 触发性能审计
performance_audit_query = {
"query": "Run a performance audit."
}
response = requests.post(f"{mcp_server_url}/audit", json=performance_audit_query)
performance_results = json.loads(response.text)

# 处理性能审计结果
if performance_results.get("overall_score") < 50:
print("页面性能较差，需要优化。")
for issue in performance_results.get("issue_list"):
print(f"问题：{issue['description']}")

# 触发 SEO 审计
seo_audit_query = {
"query": "Run an SEO audit."
}
response = requests.post(f"{mcp_server_url}/audit", json=seo_audit_query)
seo_results = json.loads(response.text)

# 处理 SEO 审计结果
if seo_results.get("overall_score") < 60:
print("页面 SEO 优化不足，需要改进。")
for issue in seo_results.get("issue_list"):
print(f"问题：{issue['description']}")

📚 详细文档

🔑 关键新增功能

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

🛠️ 使用审计工具

✅ 开始前准备

确保你具备以下条件：

浏览器中有活动标签页。
启用了 BrowserTools 扩展。

▶️ 运行审计

无头浏览器自动化：Puppeteer 自动化一个无头 Chrome 实例来加载页面并收集审计数据，即使对于单页应用或通过 JavaScript 加载的内容也能确保准确结果。无头浏览器实例在最后一次审计调用后保持活动状态 60 秒，以高效处理连续的审计请求。
结构化结果：每次审计都以结构化的 JSON 格式返回结果，包括总体得分和详细的问题列表，便于 MCP 兼容客户端解读结果并提供可行建议。

架构

系统由三个核心组件组成，用于捕获和分析浏览器数据：

Chrome 扩展：捕获屏幕截图、控制台日志、网络活动和 DOM 元素。
Node 服务器：作为 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 服务器以捕获/发送屏幕截图。
允许用户配置令牌/截断限制和屏幕截图文件夹路径。

Node 服务器

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

MCP 服务器

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

🔧 技术细节

无头浏览器自动化：使用 Puppeteer 库自动化无头 Chrome 实例，确保对单页应用和动态加载内容的准确审计。
日志处理：Node 服务器对日志进行智能截断和敏感信息过滤，避免超出 MCP 客户端的令牌限制和保护数据安全。
标准化协议：MCP 服务器遵循模型上下文协议，为不同的 AI 客户端提供统一的接口，确保兼容性和可扩展性。

📄 许可证

文档中未提及相关许可证信息。

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

0 条评论
分类：开发