跳到主要内容
极客日志极客日志
首页博客AI提示词GitHub精选代理工具
搜索
|注册
博客列表
JavaScriptNode.jsAI大前端

MCP 插件配置实战:browser-tools-mcp 集成指南

综述由AI生成MCP 插件配置实战:browser-tools-mcp 集成指南。详细演示了从环境搭建、服务启动到 Cline 配置的全流程,重点解决了浏览器调试工具与 AI 代理的对接问题。通过 npm 安装依赖并配置本地服务器,结合浏览器扩展实现页面交互能力,最终在 Cline 中启用自动批准策略,完成 MCP 协议下的功能集成。

DotNetGuy发布于 2026/3/16更新于 2026/5/1011 浏览
MCP 插件配置实战:browser-tools-mcp 集成指南

环境准备

首先确保本地已安装 Node.js 环境。创建项目目录并克隆源码仓库,建议将路径设置在便于管理的文档目录下。

mkdir -p ~/Documents/Cline/MCP/browser-tools-mcp
cd ~/Documents/Cline/MCP/browser-tools-mcp
git clone https://github.com/AgentDeskAI/browser-tools-mcp.git .

安装与服务启动

进入项目目录后,使用 npm 安装依赖包并启动服务。注意版本匹配,这里以 1.2.0 为例。

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

官方安装文档提供了更详细的说明,可参考 Browser Tools 安装指南。

步骤截图

步骤截图

步骤截图

步骤截图

步骤截图

步骤截图

浏览器插件配置

下载并安装对应的浏览器扩展程序,版本需与服务器保持一致。

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

插件安装

Cline 服务配置

在 Cline 的配置文件中添加 MCP 服务定义。关键参数包括命令、参数列表以及自动批准策略。

{
  "browser-tools-mcp": {
    "command": "node",
    "args" 
      
    
     
     
  

:
[
"<project_path>/browser-tools-mcp/dist/mcp-server.js"
]
,
"disabled"
:
false
,
"autoApprove"
:
[
]
}
}

请将 <project_path> 替换为实际的项目绝对路径。

验证结果

配置完成后,重启 Cline 服务。检查浏览器端是否增加了调试工具页面,通常会在侧边栏看到新的入口图标。

最终效果

最终效果

最终效果

目录

  1. 环境准备
  2. 安装与服务启动
  3. 浏览器插件配置
  4. Cline 服务配置
  5. 验证结果
  • 💰 8折买阿里云服务器限时8折了解详情
  • GPT-5.5 超高智商模型1元抵1刀ChatGPT中转购买
  • 代充Chatgpt Plus/pro 帐号了解详情
  • 🤖 一键搭建Deepseek满血版了解详情
  • 一键打造专属AI 智能体了解详情
极客日志微信公众号二维码

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

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

更多推荐文章

查看全部
  • 基于 Docker 部署 Web-Check 并通过 cpolar 实现远程访问
  • 发那科 FANUC 涂胶机器人全解析:从程序到维护
  • 3D Max VR 渲染器局部渲染设置教程
  • C++ Vector 算法精讲与经典例题实战
  • SpringBoot 整合 Lock4j 分布式锁使用详解
  • 面试官常问:为什么 MySQL 不推荐滥用 JOIN?
  • Llama-3.2-3B 参数详解与 Ollama 部署:3B 小模型高效推理方案
  • 前端部署:别让你的应用在上线后掉链子
  • C++ 类与对象:封装特性实现与实战应用
  • DeepSeek-R1-Distill-Llama-8B 模型写作能力实测与性能分析
  • LeetCode 384 打乱数组 Swift 实现与 Fisher-Yates 算法解析
  • 鸿蒙 5.0/6.0 第三方应用侧载与小白调试助手使用指南
  • Python 布尔类型(bool)核心用法与特性
  • DeepSeek 本地部署最简教程:基于 Ollama 的 GUI 交互方案
  • C++ STL 容器详解:map 与 set 的基本使用及底层原理
  • Clawdbot(Moltbot) 飞书机器人配置指南
  • 位运算实战:两数之和、唯一数字与消失数字解析
  • 软件工程演进:低代码技术逻辑与未来趋势解析
  • Github Copilot 学生认证通过指南及常见问题处理
  • 机器人远程监控与 OTA 升级

相关免费在线工具

  • 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