📌 什么是 Chrome MCP Server

Chrome MCP Server 是一个基于 Chrome 插件的模型上下文协议（MCP）服务器，它将 Chrome 浏览器功能暴露给 Claude、Cursor 等 AI 助手，实现零代码的浏览器自动化、内容分析和语义搜索等功能。

🚀 安装步骤

1. 环境准备

1.1 安装 Node.js

• 版本要求：Node.js >= 18.19.0

• 下载地址：https://nodejs.org/zh-cn/download/current

• 验证安装：

node -v    # 应显示版本号，如 v20.18.0
npm -v     # 应显示版本号，如 10.8.2

1.2 Chrome 浏览器

电脑上已安装 Chrome 浏览器即可，无需特殊配置。

---

2. 安装 mcp-chrome-bridge

使用 npm 全局安装：

npm install -g mcp-chrome-bridge

成功标志：

added 157 packages in 5s

---

3. 安装 Chrome 扩展

3.1 下载扩展

• 下载地址：https://github.com/hangwin/mcp-chrome/releases

• 下载最新版本的压缩包并解压

3.2 安装扩展

1. 打开 Chrome 浏览器

2. 访问 chrome://extensions/

3. 开启右上角的 "开发者模式"

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

   

5. 选择解压后的文件夹

   

3.3 连接扩展

• 在扩展程序列表中找到 MCP Chrome 扩展

• 点击连接按钮，状态显示 "服务运行中" 即可

  

---

4. 配置 Cursor MCP

4.1 打开 MCP 配置

在 Cursor 中：

1. 打开设置 → MCP Server

2. 点击编辑配置文件 mcp.json

4.2 添加配置

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

4.3 启用服务

• 保存配置文件

• 回到 MCP 配置页

• 将 Chrome MCP Server 开关切换为 "启用"

• 状态变为 绿色 表示启动成功

---

✅ 验证安装

在 Cursor 中输入以下提示词测试：

使用 chrome MCP 执行以下操作：
1. 打开 chrome 浏览器，输入网址：https://www.baidu.com
2. 找到百度输入框，输入：测试
3. 找到并点击百度一下按钮
4. 检查页面是否出现相关内容
5. 关闭 chrome 浏览器

如果 Chrome 自动打开并执行搜索操作，说明安装成功！

---

📊 优缺点总结

优点	缺点
✅ 零代码实现自动化	❌ 无法处理页面弹窗
✅ AI 直接控制浏览器	❌ 不支持无头模式
✅ 自然语言驱动测试	❌ 执行时间比传统方式慢 5 倍+
✅ 无需维护元素定位器	❌ 复杂场景稳定性有待提升

---

🎯 适用场景

• 快速原型验证

• 探索性测试

• 非技术人员的自动化需求

• 辅助手工测试的简单回归场景

---

📝 注意事项

1. 弹窗处理：遇到 alert/confirm 弹窗时可能会阻塞，需要手动处理

2. 标签页管理：建议测试过程中只使用一个标签页

3. 执行时间：比传统 Selenium 脚本慢，不适合大规模回归测试

4. 成功率：实测约 70% 的 WebUI 自动化场景可满足