关键词

浏览器自动化网页分析性能审计可访问性审计SEO优化

使用说明

项目简介

BrowserTools MCP (Model Context Protocol) 是一个旨在提升 AI 应用浏览器交互能力的工具。它通过 Model Context Protocol (MCP) 标准，将浏览器监控和交互功能以工具的形式提供给兼容 MCP 协议的 AI 客户端，例如 Cursor IDE。该项目包含一个 Chrome 扩展、一个 Node.js 服务器（browser-tools-server）和一个 MCP 服务器（browser-tools-mcp），三者协同工作，允许 AI 客户端通过标准化的 MCP 协议调用浏览器工具，实现网页数据抓取、分析和自动化操作。

主要功能点

  • 资源访问 (Resources): 虽然仓库描述中没有明确提及“资源”的托管和管理，但通过提供的工具（如 'getConsoleLogs', 'getNetworkLogs', 'getSelectedElement'）可以看出，MCP 服务器能够间接提供对浏览器运行时数据的访问能力，这些数据可以被视为“资源”。
  • 工具注册和执行 (Tools): 该仓库实现了多个工具，例如 'getConsoleLogs'、'getConsoleErrors'、'getNetworkLogs'、'takeScreenshot'、'getSelectedElement'、'wipeLogs'、'runAccessibilityAudit'、'runPerformanceAudit'、'runSEOAudit' 和 'runBestPracticesAudit'。这些工具符合 MCP 定义，允许 LLM 客户端调用并执行浏览器相关的功能，例如获取日志、截图和执行网页审计。
  • Prompt 模板 (Prompts): 仓库中包含 'runNextJSAudit' 工具，该工具内部预置了 NextJS 相关的 Prompt，用于优化 NextJS 应用的 SEO。虽然 Prompt 模板功能较为隐式，但 'runNextJSAudit' 工具体现了通过预定义 Prompt 模板支持定制 LLM 交互模式的能力。
  • JSON-RPC over Stdio/WebSocket: MCP 服务器 (browser-tools-mcp) 通过 JSON-RPC 协议与客户端通信，并通过 StdioServerTransport 实现标准输入输出通信。同时，browser-tools-server 组件使用了 WebSocket 与 Chrome 扩展通信，间接支持 WebSocket 传输协议。
  • 会话管理和能力声明: MCP 服务器 (browser-tools-mcp) 基于 '@modelcontextprotocol/sdk/server/mcp.js' 构建，具备 MCP 服务器的基本框架和协议处理能力，包括会话管理和能力声明。

安装步骤

  1. 安装 Node.js 服务 (browser-tools-server): 打开终端，运行以下命令安装 browser-tools-server 组件：

    npx @agentdeskai/browser-tools-server@latest

    请注意，'@latest' 会安装最新版本，您也可以指定版本号，例如 '@1.2.0'。首次运行时，NPX 可能会需要一些时间下载和安装依赖。

  2. 安装 Chrome 扩展:

    • 访问 v1.2.0 BrowserToolsMCP Chrome Extension 下载最新版本的 Chrome 扩展压缩包 ('BrowserTools-1.2.0-extension.zip')。
    • 解压下载的压缩包。
    • 在 Chrome 浏览器中，访问 'chrome://extensions/'。
    • 开启 "开发者模式" (Developer mode)，通常在页面右上角。
    • 点击 "加载已解压的扩展程序" (Load unpacked)，选择解压后的扩展程序文件夹。

  3. 安装 MCP 服务器 (browser-tools-mcp): 打开另一个终端窗口，运行以下命令安装 browser-tools-mcp 组件：

    npx @agentdeskai/browser-tools-mcp@latest

    同样，'@latest' 会安装最新版本，您也可以指定版本号，例如 '@1.2.0'。

服务器配置 (MCP 客户端)

MCP 客户端需要配置连接到 BrowserTools MCP 服务器的信息。以下是 Cursor IDE 等 MCP 客户端可能需要的配置信息 (JSON 格式示例，请根据您的 MCP 客户端实际要求进行配置)：

{
  "serverName": "BrowserToolsMCP",  // MCP 服务器名称，可以自定义
  "command": "npx",             // 启动 MCP 服务器的命令，通常是 npx
  "args": [                      // 启动 MCP 服务器的参数
    "@agentdeskai/browser-tools-mcp@latest" // 使用 npx 运行 browser-tools-mcp 包的最新版本
  ]
}

参数注释:

  • '"serverName"': MCP 服务器的名称，用于在客户端界面上标识该服务器，可以自定义。
  • '"command"': 启动 MCP 服务器的可执行命令，这里使用 'npx'，它允许直接运行 npm 包，无需全局安装。
  • '"args"': 一个字符串数组，包含传递给 'command' 的参数。
    • '"@agentdeskai/browser-tools-mcp@latest"': 指定要运行的 npm 包及其版本。'@latest' 表示使用最新版本，也可以替换为特定版本号，例如 '"@agentdeskai/[email protected]"'。

基本使用方法

  1. 启动 browser-tools-server: 在终端中运行 'npx @agentdeskai/browser-tools-server@latest' 启动 Node.js 服务器。保持该终端窗口运行。

  2. 启动 MCP 服务器: 在另一个终端中运行 'npx @agentdeskai/browser-tools-mcp@latest' 启动 MCP 服务器。保持该终端窗口运行。

  3. 打开 Chrome DevTools: 在 Chrome 浏览器中打开 DevTools (通常按 F12 键)。确保已安装并启用了 BrowserTools MCP Chrome 扩展。DevTools 面板中应该会出现 "BrowserToolsMCP" 标签页。

  4. 配置 MCP 客户端: 在您的 MCP 客户端（如 Cursor IDE）中，配置连接到 BrowserTools MCP 服务器。配置信息参考上面的 "服务器配置 (MCP 客户端)" 部分。

  5. 使用 MCP 工具: 在 MCP 客户端中，您应该能够看到 BrowserTools MCP 服务器提供的工具，例如 'getConsoleLogs'、'runPerformanceAudit' 等。您可以像调用其他工具一样调用这些工具，与浏览器进行交互，获取浏览器数据或执行网页审计。例如，在 Cursor IDE 中，您可以使用 '@getConsoleLogs' 来查看浏览器控制台日志。

注意事项

  • 版本一致性: 建议 browser-tools-server 和 browser-tools-mcp 以及 Chrome 扩展都使用相同的版本，以确保兼容性。
  • 端口占用: 默认情况下，browser-tools-server 使用 3025 端口。如果端口被占用，请检查是否有其他程序占用了该端口，或尝试配置不同的端口。
  • 网络连接: 确保 Chrome 扩展、browser-tools-server 和 browser-tools-mcp 能够相互通信。如果遇到连接问题，请检查防火墙设置和网络配置。
  • 文档查阅: 更详细的安装、配置和使用说明，请参考官方文档 BrowserTools MCP Docs。

信息

分类

开发者工具

访问项目