让AI工具直接从浏览器获取日志browser-tools-mcp

项目简介

架构

有三个核心组件，都用于捕获和分析浏览器数据：

1. 1 Chrome 扩展程序：一种浏览器扩展，可以捕获屏幕截图、控制台日志、网络活动和 DOM 元素。
2. 2 节点服务器：一个中介服务器，用于促进 Chrome 扩展与任何 MCP 服务器实例之间的通信。
3. 3 MCP 服务器：一种模型上下文协议服务器，为 AI 客户端提供与浏览器交互的标准工具。

┌─────────────┐     ┌──────────────┐     ┌───────────────┐     ┌─────────────┐│  MCP Client │ ──► │  MCP Server  │ ──► │  Node Server  │ ──► │   Chrome    ││  (e.g.      │ ◄── │  (Protocol   │ ◄── │ (Middleware)  │ ◄── │  Extension  ││   Cursor)   │     │   Handler)   │     │               │     │             │└─────────────┘     └──────────────┘     └───────────────┘     └─────────────┘

模型上下文协议（MCP）是 Anthropic AI 模型支持的一项功能，允许您为任何兼容客户端创建自定义工具。MCP 客户端如 Claude 桌面、Cursor、Cline 或 Zed 可以运行 MCP 服务器，这些服务器“教授”这些客户端如何使用新工具。
这些工具可以调用外部 API，但在我们的情况下，所有日志都存储在您的机器上，并且永远不会发送给任何第三方服务或 API。BrowserTools MCP 运行一个本地的 NodeJS API 服务器，该服务器与 BrowserTools Chrome 扩展程序通信。
所有使用 BrowserTools MCP 服务器接口的消费者都通过相同的 NodeJS API 和 Chrome 扩展进行交互。

Chrome 扩展程序

• 监视 XHR 请求/响应和控制台日志
• 选定的 DOM 元素轨迹
• 发送所有日志和当前元素到浏览器工具连接器
• 连接到 WebSocket 服务器以捕获/发送屏幕截图
• 允许用户配置令牌/截断限制 + 截图文件夹路径

节点服务器

• 充当 Chrome 扩展和 MCP 服务器之间的中间件
• 接收日志和当前选中的元素（来自 Chrome 扩展程序）
• 处理来自 MCP 服务器的请求以捕获日志、截图或当前元素
• 发送 Websocket 命令到 Chrome 扩展程序以捕获屏幕截图
• 智能截断日志中的字符串和重复对象数量，以避免超出令牌限制
• 清除 cookies 和敏感头信息，以避免在 MCP 客户端发送至LLMs

MCP 服务器
实现了模型上下文协议

• 为 AI 客户端提供标准化工具
• 兼容各种 MCP 客户端（Cursor、Cline、Zed、Claude 桌面等）

安装

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

• 浏览器工具 MCP 文档

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

• 监视浏览器控制台输出
• 捕获网络流量
• 截屏
• 分析选定元素
• 
  清除我们 MCP 服务器上的日志

兼容性

扫码加入技术交流群，备注「开发语言-城市-昵称」

（文：GitHubStore）