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

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

MCP 插件配置实战通过 browser-tools-mcp 实现浏览器调试能力集成。需先准备 Node.js 环境并克隆仓库,随后安装依赖并启动服务。浏览器端需加载对应扩展程序,最后在 Cline 配置文件中注册 MCP 服务入口。完成上述步骤后,即可在 AI 对话中调用浏览器调试工具,提升自动化测试与页面分析效率。

内存管理发布于 2026/3/16更新于 2026/9/348 浏览
MCP 插件配置实战:browser-tools-mcp 集成指南

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

在 AI 辅助开发中,让模型具备浏览器调试能力往往能显著提升效率。本文以 browser-tools-mcp 为例,梳理从环境准备到 Cline 集成的完整流程。整个过程基于 Node.js 生态,无需复杂依赖,适合快速落地。

1. 环境准备与仓库克隆

首先确保本地已安装 Python 和 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 .

注意:路径可根据个人习惯调整,但后续配置需保持一致。

2. 服务安装与启动

进入仓库目录后,安装依赖并启动 MCP 服务。这里直接指定版本以避免兼容性问题。

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

如果遇到问题,建议查阅官方文档确认依赖项是否完整。启动成功后,终端应显示服务监听状态。

3. 浏览器扩展加载

为了让浏览器工具正常工作,需要手动加载对应的 Chrome 扩展程序。

访问 GitHub Releases 页面下载最新版本的 .zip 包: https://github.com/AgentDeskAI/browser-tools-mcp/releases

解压后,在 Chrome 地址栏输入 chrome://extensions/,开启右上角的开发者模式,点击'加载已解压的扩展程序',选择刚才解压的文件夹即可。

加载完成后,浏览器工具栏中会出现 BrowserTools 图标,这表示扩展已就绪。

4. Cline 服务配置

接下来需要在 Cline 的配置文件中注册该 MCP 服务。打开 Cline 的设置或配置文件(通常是 settings.json),添加如下配置项。

{
  "mcpServers": {
    "browser-tools-mcp": {
      "command": "node",
      "args": ["~/Documents/Cline/MCP/browser-tools-mcp/dist/mcp-server.js"]
       
       
    
  

,
"disabled"
:
false
,
"autoApprove"
:
[
]
}
}
}

关键点说明:

  • command 指向 Node 可执行文件。
  • args 中的路径必须替换为你实际的项目绝对路径,否则服务无法启动。
  • autoApprove 用于设置自动批准的操作列表,初期建议留空以便观察权限请求。

5. 验证与效果

完成上述配置后,重启 Cline 服务。此时在对话界面尝试调用浏览器相关指令,例如查看当前网页结构或模拟点击。

如果配置正确,浏览器端会弹出调试面板,展示 DOM 树、网络请求等详细信息。这标志着 MCP 插件已成功接入,AI 现在可以直接操作你的浏览器环境了。

通过这种方式,我们不仅实现了工具的自动化调用,也为后续的复杂任务编排打下了基础。遇到连接问题时,优先检查端口占用和路径是否正确。

目录

  1. MCP 插件配置实战:browser-tools-mcp 集成指南
  2. 1. 环境准备与仓库克隆
  3. 2. 服务安装与启动
  4. 3. 浏览器扩展加载
  5. 4. Cline 服务配置
  6. 5. 验证与效果

更多推荐文章

查看全部
  • MCP 插件实战:Browser Tools 集成指南
  • MCP 插件配置实战:browser-tools-mcp 集成指南
  • 微服务架构下Spring Session与Redis分布式会话实战
  • 深入理解 MCP 协议:与 Function Call 的区别及 Python 实战
  • MCP 协议详解:与 Function Call 的区别及 Python SDK 使用指南
  • Stable Diffusion WebUI 入门与进阶实战指南
  • MacBook 配置 FRP 端口转发遇到 Token 不匹配错误解决
  • AI 视觉人体姿态关键点实时跟踪 Python 代码
  • AI 智能编码工具深度测评:Copilot、Comate 与通义灵码对比
  • MCP 协议详解:与 Function Call 的区别及使用方式
  • MCP 实战:Figma 设计稿自动转前端代码
  • MCP 工具 npx 与 uvx 安装使用指南
  • 10 款主流 AI 降重工具对比与选型建议
  • MCP Apps:重构 Web 应用,开启 AI 助手的小程序时代
  • MC.JS WEBMC 在在线教育中的应用案例
  • Java面试:基础、并发与容器高频考点整理
  • AI 大模型开发实战指南:从基础储备到项目部署
  • 使用 jsr:@langchain/pyodide-sandbox 构建 Python 安全沙箱
  • Mastergo AI 一键生成 HTML、Vue、React 前端代码
  • FastbuildAI:一款开源 AI 应用快速构建与商业化闭环工具

相关免费在线工具

  • 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