跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客GitHub 精选镜像AI 生图工具UI配色美学隐私政策关于联系
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScriptNode.jsAI

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

Browser Tools MCP 插件配置流程涵盖环境准备、服务安装及 Cline 集成步骤。首先需确保本地安装 Node.js 与 Git,克隆官方仓库并初始化依赖。随后通过 NPM 安装服务端组件,并在浏览器中加载对应扩展程序。最后在 Cline 配置文件中注册 MCP 服务命令,实现 AI 对浏览器环境的直接访问能力。整个过程无需复杂网络代理,重点在于路径配置与服务端启动参数的准确性。

DevStack发布于 2026/3/16更新于 2026/7/528 浏览
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" 
  

:
[
]
}
}

注意: 上面的 args 路径需要修改为你实际安装该项目的绝对路径。autoApprove 数组用于设置自动批准的操作权限,根据安全需求配置即可。

5. 验证效果

完成上述配置后,重启 Cline 服务。现在你可以尝试让 AI 执行一些浏览器相关的任务,比如打开网页或读取页面内容。在浏览器侧,调试工具栏应该已经集成了新的插件入口,表明连接已成功建立。

此时,AI Agent 就能通过 MCP 协议直接感知和控制浏览器环境了,大大提升了自动化测试和网页交互的效率。

目录

  1. 1. 环境准备
  2. 2. 安装与服务启动
  3. 3. 浏览器插件配置
  4. 4. Cline 服务配置
  5. 5. 验证效果
  • 免费图片AI生成工具免费生成了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 免费图片视频在线生成30秒,将你的创意变成现实开始设计
  • X/Twitter免费视频下载器免登陆无限额度免费视频解析下载了解详情
  • 100+免费在线小游戏爽一把
极客日志微信公众号二维码

微信扫一扫,关注极客日志

微信公众号「极客日志V2」,在微信中扫描左侧二维码关注。展示文案:极客日志V2 zeeklog

更多推荐文章

查看全部
  • VSCode Copilot 登录异常排查与修复指南
  • 基于 STM32 的物流分拣小车设计与实现
  • 大模型时代企业 AI 发展趋势分析
  • JadeAI:开源 AI 简历生成器,支持 50 套模板与 Docker 部署
  • 基于昇腾 NPU 部署 Mistral-7B-Instruct-v0.2 模型实战
  • 昇腾 NPU 部署 Mistral-7B-Instruct-v0.2 模型实战指南
  • 文心一言大模型本地部署与微调实战指南
  • 文心一言大模型本地部署与微调应用实战
  • pyEIT 电阻抗断层成像算法完整解析
  • 开源客服智能体系统搭建指南:从选型到生产部署
  • 2025 年智能机器人操作系统(AGIROS)开源社区生态大会
  • 动手学大模型应用开发:从零构建个人知识库助手
  • 基于 LangGraph + RAGFlow 的三智能体长文档生成平台 OpenSpec
  • 开源机器人 AI 框架 LeRobot 入门与实践
  • 小米温湿度计智能家居改造:ATC 固件刷写与 HA 集成
  • 开源机器人 AI 框架 LeRobot 入门与实践
  • GraphMindStudio 开源工作流引擎:架构设计与 AI 智能体实践
  • 开源鸿蒙 6.1、8.1 确认为 LTS 版本:2026~2028 年发布
  • 工业 AI 模型训练平台:图像采集、智能检测、数据标注与模型训练
  • AI Agent Skills 资源合集:支持 Cursor、Claude Code 等工具

相关免费在线工具

  • RSA密钥对生成器

    生成新的随机RSA私钥和公钥pem证书。 在线工具,RSA密钥对生成器在线工具,online

  • Mermaid 预览与可视化编辑

    基于 Mermaid.js 实时预览流程图、时序图等图表,支持源码编辑与即时渲染。 在线工具,Mermaid 预览与可视化编辑在线工具,online

  • 随机西班牙地址生成器

    随机生成西班牙地址(支持马德里、加泰罗尼亚、安达卢西亚、瓦伦西亚筛选),支持数量快捷选择、显示全部与下载。 在线工具,随机西班牙地址生成器在线工具,online

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online