关键词

浏览器工具网页审计SEO优化性能分析可访问性IDE集成

使用说明

项目简介

Browser Tools MCP 是一个基于 Model Context Protocol (MCP) 构建的服务器，旨在增强 AI 应用（如 Cursor 编辑器）与浏览器的交互能力。它通过 Chrome 扩展程序捕获浏览器数据，并提供一系列工具，使 AI 能够理解和操作网页内容，例如进行网页审计（SEO、性能、可访问性等）、捕获屏幕截图、监控控制台日志和网络活动等。该项目主要用于 IDE 插件（如 Cursor）集成，允许开发者在 IDE 中无缝地利用浏览器环境进行各种网页分析和调试任务。

主要功能点

  • 资源 (Resources) 管理： 虽然仓库描述中没有明确提及资源管理，但 MCP 服务器的核心是提供上下文信息，而浏览器数据（如网页内容、DOM 元素、截图等）可以被视为提供给 LLM 的资源。Browser Tools MCP 侧重于实时浏览器数据的获取和分析，为 LLM 提供最新的网页上下文。
  • 工具 (Tools) 注册和执行： Browser Tools MCP 注册并提供了多种实用工具，允许 LLM 客户端调用，主要包括：
    • 网页审计工具： 提供 SEO 审计 ('runSEOAudit')、性能审计 ('runPerformanceAudit')、可访问性审计 ('runAccessibilityAudit') 和最佳实践审计 ('runBestPracticesAudit')，以及集成的审计模式 ('runAuditMode') 和调试模式 ('runDebuggerMode')。这些工具使用 Lighthouse 库和 Puppeteer 驱动 headless Chrome 浏览器进行深度网页分析。
    • 浏览器数据获取工具： 包括获取控制台日志 ('getConsoleLogs', 'getConsoleErrors')、网络日志 ('getNetworkLogs', 'getNetworkErrors')、当前选中元素 ('getSelectedElement') 和屏幕截图 ('takeScreenshot')。
    • 日志管理工具： 提供清除所有日志的功能 ('wipeLogs')。
  • Prompt 模板 (Prompts)： 仓库中包含 NextJS 审计相关的 Prompt 模板 ('runNextJSAudit')，用于指导 LLM 分析 NextJS 应用的 SEO 问题。
  • MCP 协议支持： 使用 '@modelcontextprotocol/sdk/server/mcp' 库构建，并通过 StdioServerTransport 实现与 MCP 客户端的通信，符合 MCP 服务器的标准定义。
  • 本地数据存储： 强调所有浏览器日志都本地存储，保护用户隐私和数据安全。
  • 多种传输协议支持： 通过 WebSocket 与 Chrome 扩展程序通信，并通过标准输入输出 (Stdio) 与 MCP 客户端通信。

安装步骤

  1. 安装 Browser Tools MCP 服务器： 打开终端，运行以下命令安装 Browser Tools MCP 服务器的 Node.js 包：

    npm install -g @agentdeskai/browser-tools-mcp@latest

    或指定版本安装：

    npm install -g @agentdeskai/[email protected]

  2. 安装 Browser Tools Server (Connector)： Browser Tools MCP 服务器依赖 Browser Tools Server 作为 Chrome 扩展和 MCP 服务器之间的桥梁。安装 Browser Tools Server：

    npm install -g @agentdeskai/browser-tools-server@latest

    或指定版本安装：

    npm install -g @agentdeskai/[email protected]

  3. 安装 Chrome 扩展程序：

    • 访问 v1.2.0 BrowserToolsMCP Chrome Extension 下载最新版本的 Chrome 扩展程序压缩包。
    • 在 Chrome 浏览器中打开 'chrome://extensions/'。
    • 启用 “开发者模式” 开关。
    • 点击 “加载已解压的扩展程序”，选择解压后的扩展程序文件夹。

服务器配置

MCP 客户端（例如 Cursor）需要配置以下信息才能连接到 Browser Tools MCP 服务器。以下是 'config.json' 格式的配置示例，您需要在 MCP 客户端中填写相应信息：

{
  "serverName": "Browser Tools MCP",  // MCP 服务器的名称，自定义
  "command": "browser-tools-mcp",    // 启动 MCP 服务器的命令，通常是安装的 npm 包名
  "args": [],                         // 启动命令的参数，这里不需要参数
  "transports": [                      // 配置传输协议
    {
      "type": "stdio"                // 使用标准输入输出 (stdio) 传输协议
    }
  ]
}

基本使用方法

  1. 启动 Browser Tools Server： 打开终端，运行以下命令启动 Browser Tools Server (Connector)：

    browser-tools-server

    或指定端口启动 (例如 3025)：

    browser-tools-server --port 3025

    Browser Tools Server 默认监听端口 3025。

  2. 启动 Browser Tools MCP 服务器： 打开 新的 终端窗口，运行以下命令启动 Browser Tools MCP 服务器：

    browser-tools-mcp

  3. 在 Chrome 浏览器中使用扩展程序：

    • 打开 Chrome 开发者工具 (DevTools)，应该能看到 "BrowserToolsMCP" 面板。
    • 确保 Browser Tools MCP Chrome 扩展程序已启用，并连接到 Browser Tools Server。在 "BrowserToolsMCP" 面板中可以查看连接状态和配置设置。

  4. 在 MCP 客户端中使用工具： 在 MCP 客户端（例如 Cursor 编辑器）中，您可以使用注册的工具，例如：

    • 使用自然语言触发审计工具：例如在 Cursor 中输入 “Run an accessibility audit.” 或 “Check SEO on this page.”。
    • 使用工具名称直接调用：例如在 Cursor 中可以使用 '/getConsoleLogs' 工具查看控制台日志。

注意:

  • 确保 Browser Tools Server 和 Browser Tools MCP 服务器都已成功启动，并且 Chrome 扩展程序已正确安装并连接。
  • 初次使用或更新版本后，请务必按照文档更新 npm 包和 Chrome 扩展程序版本。
  • 详细的使用指南和配置选项，请参考 BrowserTools MCP Docs。

信息

分类

开发者工具

访问项目