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

MCP 插件配置实战:browser-tools-mcp 示例

本教程介绍如何在本地环境中配置 browser-tools-mcp 插件。步骤包括安装 Node.js 与 Python 环境、克隆项目源码、安装依赖并启动 MCP 服务、配置浏览器扩展以及集成至 Cline 编辑器。完成配置后,可在浏览器端获得调试工具支持,实现自动化交互功能。

活在当下发布于 2026/2/10更新于 2026/10/26109 浏览
MCP 插件配置实战:browser-tools-mcp 示例

1. 环境配置(以 Browser Tools 为例)

首先确保已安装 Python 和 Node.js 环境。创建项目目录并克隆仓库:

# 安装 Python 和 Node.js
mkdir ~/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 服务安装启动

进入项目目录,安装依赖并启动服务:

cd ~/Documents/Cline/MCP/browser-tools-mcp
npm install @agentdeskai/[email protected]
npx @agentdeskai/[email protected]
npx @agentdeskai/[email protected]

详细安装步骤可参考官方文档:Browser Tools Installation。

3. 浏览器插件配置

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

4. Cline 服务配置

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

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

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

5. 最终效果

配置完成后,浏览器端调试工具将增加插件页面,支持相关功能调用。

目录

  1. 1. 环境配置(以 Browser Tools 为例)
  2. 安装 Python 和 Node.js
  3. 2. MCP 服务安装启动
  4. 3. 浏览器插件配置
  5. 4. Cline 服务配置
  6. 5. 最终效果

更多推荐文章

查看全部
  • OpenClaw + Ollama 本地部署实战指南
  • Logitech G Hub 无法启动或无限转圈故障排除方案
  • CLAUDE.md 与 AGENTS.md 详解:让 AI 深度理解你的项目
  • Windows 版 Stable Diffusion WebUI 快速搭建指南
  • Ollama Windows 安装与使用:本地运行 Llama、DeepSeek 等大模型
  • VSCode Copilot 接入 OpenAI 兼容自定义模型方案
  • Python 网络流量模拟工具架构解析与合规使用
  • 2026 年主流 AI 工具深度对比:豆包、DeepSeek、ChatGPT 等选型指南
  • VSCode Copilot 接入 OpenAI 兼容自定义模型的实践方案
  • Hive 自定义函数输入输出特性:UDF、UDAF 与 UDTF
  • QTTabBar 为 Windows 资源管理器添加标签页功能
  • 在 Android 设备上利用 Termux 安装 llama.cpp 并启动 WebUI
  • DeerFlow 2.0 生产级 AI Agent 框架的 Docker 部署与并行编排
  • VRM4U 插件在 Unreal Engine 5 中的使用指南
  • CentOS 7 yum 配置阿里云镜像源
  • 学术论文写作中降低 AIGC 检测率的工具指南
  • 基于 Spring Boot 和 WebSocket 的 Java 实时聊天室实战
  • 编辑器 AI 工具实战:OpenClaw 与 Codex 深度指南
  • SimVascular 心血管建模高效使用技巧
  • Qwen-Image-2512 V2 整合包部署指南:ComfyUI 与 WebUI 支持

相关免费在线工具

  • 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