MCP-Chrome 浏览器控制插件安装教程

MCP-Chrome 可以让 AI 助手直接控制你的 Chrome 浏览器，自动浏览网页、填写表单、点击按钮等。

什么是 MCP？

MCP（Model Context Protocol）是一个让 AI 工具连接外部服务的协议。简单理解就是让 AI 能够使用更多功能的"桥梁"。

Chrome MCP Server 的优势：

• 直接使用你日常的 Chrome 浏览器（保留登录状态、书签、设置等）
• 不需要启动额外的浏览器进程
• 完全本地运行，保护隐私
• 支持 20+ 种浏览器操作工具

支持的 AI 工具：

• Claude Desktop（官方客户端）
• Cursor（代码编辑器）
• Augment（本教程基于此工具编写）
• CherryStudio 等其他支持 MCP 的 AI 工具

准备工作

1. 环境要求

安装前确保电脑已有：

• Node.js（版本 18.19.0 或更高）- JavaScript 运行环境
• npm 或 pnpm - Node.js 的包管理器，用来安装软件包
• Chrome 浏览器

检查方法：

• Node.js 版本：按 Win+R 输入 cmd，然后输入 node -v
• 如果没有安装 Node.js，去 nodejs.org 下载安装

2. 安装核心程序

打开命令行，根据你的包管理器选择：

使用 npm：

npm install -g mcp-chrome-bridge

使用 pnpm：

# 方法一：启用脚本（推荐）
pnpm config set enable-pre-post-scripts true
pnpm install -g mcp-chrome-bridge

# 方法二：手动注册（如果自动注册失败）
pnpm install -g mcp-chrome-bridge
mcp-chrome-bridge register

说明： pnpm v7+ 默认禁用安装脚本，需要手动启用或注册。安装需要几分钟时间。

安装浏览器插件

3. 下载插件文件

官方下载：
https://github.com/hangwin/mcp-chrome/releases

国内镜像（下载更快）：

• 备用地址1
• 备用地址2
• 备用地址3
• 备用地址4
• 备用地址5
• 备用地址6

4. 解压文件

下载后找个固定位置解压，建议解压到新建文件夹，避免文件散乱。

5. 安装到 Chrome

5.1. 点击 Chrome 右上角的扩展图标

5.2. 点击"管理扩展程序"

5.3. 打开右上角的"开发者模式"开关

5.4. 点击"加载已解压的扩展程序"

5.5. 选择刚才解压的文件夹

5.6. 安装完成，插件会出现在列表中

启动服务

6. 启动 MCP 服务

配置连接

7. 配置 MCP 连接

需要在你的 AI 工具配置文件中添加 MCP 服务器配置。

配置文件位置：

• Claude Desktop: %APPDATA%\Claude\claude_desktop_config.json (Windows)
• Cursor: 设置 → Extensions → MCP 配置
• Augment: 项目设置中的 MCP 配置

方式一：HTTP 连接（推荐）

HTTP 连接更稳定，响应更快：

{
  "mcpServers": {
    "chrome-mcp-server": {
      "type": "streamableHttp",
      "url": "http://127.0.0.1:12306/mcp"
    }
  }
}

解释：

• 127.0.0.1:12306 是本地服务器地址和端口
• 插件启动后会在这个地址提供服务

方式二：stdio 连接（备选）

如果你的 AI 工具不支持 HTTP 连接，使用此方式：

首先查找安装路径：

# npm 用户
npm list -g mcp-chrome-bridge
# pnpm 用户
pnpm list -g mcp-chrome-bridge

找到路径后，配置如下（重要：替换成你的实际路径）：

{
  "mcpServers": {
    "chrome-mcp-stdio": {
      "command": "npx",
      "args": [
        "node",
        "D:/dev/fnm/node/node-versions/v23.2.0/installation/node_modules/mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js"
      ]
    }
  }
}

解释：

• stdio 是标准输入输出连接方式
• 需要指定具体的 JavaScript 文件路径
• 路径因安装位置而异，必须替换成你的实际路径

8. 验证配置

配置完成后重启你的 AI 工具，应该能看到 MCP 连接成功：

开始使用

可用功能

Chrome MCP Server 提供 20+ 种浏览器操作工具：

浏览器管理：

• 获取窗口和标签页列表
• 导航到指定网址
• 关闭标签页
• 前进后退导航

内容分析：

• 智能搜索标签页内容
• 提取网页文本/HTML
• 查找可点击元素
• 获取控制台输出

交互操作：

• 点击页面元素
• 填写表单
• 模拟键盘输入

数据管理：

• 搜索浏览历史
• 管理书签
• 网络请求监控

使用示例：

现在可以让 AI 助手帮你控制浏览器了：

常见问题

Q: 插件无法连接？
A: 确保插件已启动并显示"Connected"状态，检查端口 12306 是否被占用。

Q: 配置文件在哪里？
A: 不同工具位置不同，Claude Desktop 在 %APPDATA%\Claude\claude_desktop_config.json。

Q: 支持其他浏览器吗？
A: 目前只支持 Chrome/Chromium，Firefox 支持在开发计划中。

---

官方文档： https://github.com/hangwin/mcp-chrome