MCP 协议实战：Browser Tools 插件集成指南

1. 环境准备

在开始之前，请确保你的开发环境中已经安装了 Node.js 和 Git。我们需要一个目录来存放 MCP 服务代码，这里以 Windows 路径为例，你可以根据实际情况调整。

mkdir "C:\Users\<YourName>\Documents\Cline\MCP\browser-tools-mcp"
cd "C:\Users\<YourName>\Documents\Cline\MCP\browser-tools-mcp"
git clone https://github.com/AgentDeskAI/browser-tools-mcp.git .

2. 安装与服务启动

进入项目目录后，安装依赖并启动服务。注意保持版本一致，这里使用的是 v1.2.0。

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

如果不确定如何操作，可以参考官方文档的 安装说明。服务启动成功后，终端会显示监听状态。

3. 浏览器插件配置

为了让 MCP 能够调用浏览器功能，还需要安装对应的浏览器扩展。从 GitHub Release 页面下载插件包：

BrowserTools-1.2.0-extension.zip

解压后在 Chrome 或 Edge 浏览器的'扩展管理'页面中，开启开发者模式并加载解压后的文件夹。加载成功后，你会在浏览器右上角看到新增的工具图标。

4. Cline 服务配置

接下来需要在 Cline 的配置文件中注册这个 MCP 服务。找到你的 config.json 或类似配置文件，添加如下内容：

{
  "browser-tools-mcp": {
    "command": "node",
    "args": [
      "<your_project_path>/dist/mcp-server.js"
    ],
    "disabled": false,
    "autoApprove":