MCP 插件实战：browser-tools-mcp 配置与使用指南

MCP（Model Context Protocol）协议扩展了 AI 模型的上下文能力，而 browser-tools-mcp 则提供了浏览器调试的集成支持。本文将演示如何在 Cline 中配置该插件，涵盖环境搭建、依赖安装及配置文件编写，帮助你实现 AI 对浏览器操作的自动化控制。

1. 环境准备

首先确保本地已安装 Node.js 和 Git。如果没有，请先完成基础环境配置。

2. 安装与服务启动

准备好目录后，我们开始克隆仓库并安装依赖。这里以 Windows 路径为例，你可以根据实际习惯调整。

# 创建目录
mkdir C:\Users\<你的用户名>\Documents\Cline\MCP\browser-tools-mcp

# 进入目录并克隆代码
cd C:\Users\<你的用户名>\Documents\Cline\MCP\browser-tools-mcp
git clone https://github.com/AgentDeskAI/browser-tools-mcp.git .

接下来安装核心包并启动服务。注意版本号可能随更新变化，建议参考官方文档确认最新稳定版。

npm install @agentdeskai/[email protected]
npx @agentdeskai/[email protected]
npx @agentdeskai/[email protected]

更多细节可参考官方安装文档。

浏览器工具安装界面

服务运行状态

控制台输出示例

日志信息

权限设置

最终运行效果

3. 浏览器插件配置

为了配合服务端工作，还需要在浏览器端安装对应的扩展程序。你可以从 GitHub Release 页面下载。

下载地址：BrowserTools-1.2.0-extension.zip

安装完成后，插件图标会出现在浏览器工具栏中。

插件安装界面

4. Cline 服务配置

最后一步是在 Cline 的配置文件中注册这个 MCP 服务。将以下 JSON 片段添加到你的 config.json 或相应配置项中。

{
  "browser-tools-mcp": {
    "command": "node",
    "args": [
      "d:/Suo/code/tmp-AI/browser-tools-mcp/browser-tools-mcp/dist/mcp-server.js"
    ],
    "disabled": false,
    "autoApprove": []
  }
}

注意： 请根据实际安装路径修改 args 中的绝对路径，否则服务无法找到入口文件。

5. 效果验证

配置成功后，浏览器端的调试工具会增加一个插件页面。此时 AI 即可通过 MCP 协议调用浏览器能力进行自动化操作。

插件页面显示

功能测试截图

调试结果