浏览器工具mcp
项目介绍
BrowserTools MCP
让你的AI工具在与浏览器交互方面变得更强，感知能力提升10倍
此应用程序是一款强大的浏览器监控和交互工具，通过Anthropic的模型上下文协议（MCP），借助Chrome扩展程序捕获并分析浏览器数据。
阅读我们的文档以获取完整的安装指南、快速入门指南和贡献指南。
发展路线图
查看我们的项目发展路线图：GitHub 路线图 / 项目板
更新
v1.2.0 已发布！以下是更新的简要概述：
- 您现在可以在DevTools面板中启用“允许自动粘贴到光标”。截图将自动粘贴到Cursor中（只需确保点击进入Cursor中的代理输入字段，否则将无法工作！）
- 集成了一套SEO、性能、可访问性和最佳实践分析工具，通过Lighthouse实现。
- 实现了一个针对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 扩展程序
然后您可以像这样运行本地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 🎉
🔑 关键新增功能
| 审核类型 | 描述 |
|---|---|
| 可访问性 | 对比度、缺失alt文本、键盘导航陷阱、ARIA属性等WCAG合规性检查。 |
| 性能 | 通过Lighthouse驱动的渲染阻塞资源、过大的DOM大小、未优化的图像等因素影响页面速度的分析。 |
| SEO | 评估页面上的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审核，我使用的是app路由器。”
- “运行NextJS审核，我使用的是page路由器。”
调试模式（runDebuggerMode）
按特定顺序运行所有调试工具。
示例查询：
- “进入调试模式。”
架构
有三个核心组件用于捕获和分析浏览器数据：
- Chrome 扩展程序：一个浏览器扩展程序，捕获屏幕截图、控制台日志、网络活动和DOM元素。
- Node 服务器：一个中间服务器，促进Chrome扩展程序和任何MCP服务器实例之间的通信。
- MCP 服务器：一个模型上下文协议服务器，为AI客户端提供标准化工具以与浏览器交互。
┌─────────────┐ ┌──────────────┐ ┌───────────────┐ ┌─────────────┐
│ MCP 客户端 │ ──► │ MCP 服务器 │ ──► │ Node 服务器 │ ──► │ Chrome │
│ （例如 │ ◄── │ （协议 │ ◄── │ （中间件） │ ◄── │ 扩展程序 │
│ Cursor） │ │ 处理程序） │ │ │ │ │
└─────────────┘ └──────────────┘ └───────────────┘ └─────────────┘
模型上下文协议（MCP）是Anthropic AI模型支持的一种能力，它允许您为任何兼容客户端创建自定义工具。MCP客户端如Claude Desktop、Cursor、Cline或Zed可以运行一个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等）兼容
安装
安装步骤可以在我们的文档中找到：
使用
安装并配置后，系统允许任何兼容的MCP客户端：
- 监控浏览器控制台输出
- 捕获网络流量
- 截取屏幕截图
- 分析选定的元素
- 清除存储在我们的MCP服务器中的日志
- 运行可访问性、性能、SEO和最佳实践审核
兼容性
- 适用于任何兼容的MCP客户端
- 主要设计用于Cursor IDE集成
- 支持其他AI编辑器和MCP客户端