浏览器工具mcp
项目介绍
BrowserTools MCP
让你的AI工具在与浏览器交互时变得更敏锐且能力更强
此应用程序是一个强大的浏览器监控和交互工具，通过Anthropic的模型上下文协议（MCP），借助Chrome扩展程序捕获并分析浏览器数据。
阅读我们的文档以获取完整的安装、快速入门和贡献指南。
发展路线图
查看我们的项目发展路线图：GitHub 路线图 / 项目板
更新内容
v1.2.0 已发布！以下是更新的简要概述：
- 您现在可以在DevTools面板中启用“允许自动粘贴到光标”。截图将自动粘贴到Cursor（只需确保点击进入Cursor中的代理输入字段，否则将不起作用！）
- 集成了一套SEO、性能、可访问性和最佳实践分析工具，通过Lighthouse实现。
- 实现了一个特定于NextJS的提示，用于改进NextJS应用的SEO。
- 添加了调试器模式作为工具，按特定顺序执行所有调试工具，并附带一个改进推理的提示。
- 添加了审核模式作为工具，按特定顺序执行所有审核工具。
- 解决了Windows连接问题。
- 改进了BrowserTools服务器、扩展程序和MCP服务器之间的网络通信，包括主机/端口自动发现、自动重连和优雅关闭机制。
- 增加了使用Ctrl+C更轻松地退出Browser Tools服务器的能力。
快速入门指南
运行此MCP工具需要三个组件：
- 从这里安装我们的Chrome扩展程序：v1.2.0 BrowserToolsMCP Chrome扩展程序
- 在您的IDE中使用此命令安装MCP服务器：
npx @agentdeskai/browser-tools-mcp@latest - 打开一个新的终端并运行此命令：
npx @agentdeskai/browser-tools-server@latest
- 不同的IDE有不同的配置，但此命令通常是一个很好的起点；请参考您IDE的文档以进行正确的配置设置。
重要提示——您需要安装两个服务器。
- browser-tools-server（本地nodejs服务器，作为收集日志的中间件）
- 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开发的最佳实践
- 审查与SEO相关的NextJS特定问题
……所有这些都不离开您的IDE 🎉
🔑 关键新增功能
| 审核类型 | 描述 |
|---|---|
| 可访问性 | 符合WCAG标准的检查，如颜色对比度、缺少alt文本、键盘导航陷阱、ARIA属性等。 |
| 性能 | 通过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客户端