BrowserTools MCP
2025.03.05
6
JavaScript浏览器监控AI 交互工具浏览器自动化开发效率
BrowserTools MCP 是一个强大的浏览器监控和交互工具，通过 Anthropic 的 Model Context Protocol (MCP) 实现 AI 驱动的应用程序，能够通过 Chrome 扩展捕获和分析浏览器数据。该工具主要由 Chrome 扩展、Node 服务器和 MCP 服务器三部分组成，支持监控浏览器控制台输出、捕获网络流量、截图、分析选定元素等功能。
View on GitHub
Overview
基本能力
产品定位
BrowserTools MCP 是一个浏览器监控和交互工具，旨在通过 MCP 协议增强 AI 工具与浏览器的交互能力。
核心功能
- Chrome 扩展：
- 监控 XHR 请求/响应和控制台日志
- 跟踪选定的 DOM 元素
- 发送日志和当前元素到 BrowserTools Connector
- 连接到 Websocket 服务器以捕获/发送截图
-
允许用户配置令牌/截断限制和截图文件夹路径
-
Node 服务器：
- 作为 Chrome 扩展和 MCP 服务器之间的中间件
- 接收日志和当前选定的元素
- 处理 MCP 服务器的请求以捕获日志、截图或当前元素
- 发送 Websocket 命令到 Chrome 扩展以捕获截图
- 智能截断字符串和重复对象以避免令牌限制
-
移除 cookie 和敏感头以避免发送给 LLMs
-
MCP 服务器：
- 实现 Model Context Protocol
- 提供标准化的工具供 AI 客户端使用
- 兼容多种 MCP 客户端（Cursor、Cline、Zed、Claude Desktop 等）
适用场景
- 监控浏览器控制台输出
- 捕获网络流量
- 截图
- 分析选定元素
- 清除 MCP 服务器中的日志
使用教程
使用依赖
- 确保已安装 Node.js 和 npm
- 安装 Chrome 浏览器
安装教程
-
安装最新版本的 Chrome 扩展： v1.1.0 BrowserToolsMCP Chrome Extension
-
安装 Node 服务器：
bash npx @agentdeskai/browser-tools-server -
运行 MCP 服务器：
bash npx @agentdeskai/[email protected]
调试方式
- 打开 Chrome 开发者工具
- 确保日志正在发送到服务器
- 检查 Node 服务器和 MCP 服务器的运行状态
常见问题解答
-
如何更新版本？ 确保在 IDE 或 MCP 客户端中更新版本：
bash npx @agentdeskai/[email protected] -
如何获取帮助？ 可以提交问题工单或联系 @tedx_ai on x