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

MCP 插件配置指南:以 browser-tools-mcp 为例

browser-tools-mcp 是一款基于 Model Context Protocol 的浏览器调试工具插件。配置过程包括环境准备、服务安装、插件部署及 Cline 集成设置。首先需安装 Node.js 并克隆仓库,随后通过 npm 安装依赖包并启动服务器。接着下载浏览器扩展插件并在 Cline 中注册 MCP 服务路径。完成后,浏览器端将显示调试工具页面,支持 AI 代理进行浏览器操作。该方案适用于需要自动化浏览器交互的开发场景。

蜜桃汽水发布于 2026/3/16更新于 2026/6/1825 浏览
MCP 插件配置指南:以 browser-tools-mcp 为例

1. 环境配置

确保已安装 Node.js 和 npm。创建项目目录并克隆仓库:

mkdir <project_path>/browser-tools-mcp
cd <project_path>/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]

详细安装步骤请参考官方文档:Installation Guide

3. 浏览器插件配置

下载并安装浏览器扩展插件:

BrowserTools Extension Download

4. Cline 服务配置

在 Cline 配置文件中添加以下 MCP 服务配置:

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

5. 最终效果

浏览器端调试工具将增加插件页面,实现 MCP 功能集成。

目录

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

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

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

更多推荐文章

查看全部
  • 深入解析程序翻译环境:从源代码到可执行文件
  • PlantUML 绘图工具简介与使用指南
  • 飞算 JavaAI:Java 遗留系统重构与工程化生成实战
  • Python Web 框架对比与实战:Django vs Flask vs FastAPI
  • 队列的数组模拟与 STL queue 实战:从原理到代码实现
  • 蚂蚁集团推出企业级 AI 集成解决方案
  • 海外程序员接单平台推荐:Freelancer、Upwork、Fiverr 与 Toptal 详解
  • ChatGPT 降低低质内容生成指令实战:精准控制输出质量
  • OpenClaw 龙虾 AI 全能助手安装与配置指南
  • MaaS 模型选型指南:利用 AI Ping 进行性能评测与供应商筛选
  • LLaMA Factory 大模型训练与微调指南
  • FreeCAD 将 STL 模型转换为 STEP 格式的实操指南
  • OpenClaw 本地部署与 AI 助理搭建实战指南
  • 10 款主流 UI 设计工具评测:从原型构建到代码交付
  • GLM-5 代码生成能力深度评测与实战体验
  • Rust 控制流核心:条件、循环与模式匹配
  • 大模型 Agent Skills 设计与配置详解
  • LeetCode 每个小孩最多能分到多少糖果
  • C++ 继承机制详解:从基础语法到虚拟继承原理
  • Xilinx FPGA 实现 RISC-V 五级流水线 CPU 设计实战

相关免费在线工具

  • 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