环境信息

• Windows 11
• VSCode

目的

• 通过使用Chrome MCP Server调用本地浏览器的插件扩展，实现AI完成页面操作过程
• 参考官网示例：https://github.com/hangwin/mcp-chrome/blob/master/README_zh.md

---

应用过程

1. 两种连接方式：stdio vs streamable HTTP 区别

① stdio 方式（我本地用这个）

最简单、最稳、本地专用

• MCP 服务器就是一个 Node 脚本
• VSCode/OpenCode 直接 启动这个 Node 进程
• 通过「标准输入输出」对话，不走网络端口
• 不用开服务、不用占 12306 端口

② streamable HTTP 方式（远程/服务器才用）

• 把 MCP 启成一个 http 服务器（localhost:12306）
• 客户端通过 POST 请求收发 JSON
• 适合：跨机器、Docker、多人共用一个 MCP 服务
• 本地用反而麻烦，需要一直开着服务

---

2. MCP 协议是怎么调用的？

调用链路（本地环境）

VSCode / OpenCode
        ↓（发指令：帮我打开Chrome、点按钮）
      mcp.json
        ↓（找到：用 node 启动 chrome mcp 服务）
   MCP Server（node 进程）
        ↓（通过 Chrome 扩展）
    Chrome 浏览器
        ↓（真正操作页面）
      网页执行动作
        ↓（结果返回）
   MCP Server
        ↓
VSCode / OpenCode 展示结果

协议本身做了什么？

MCP 就干 3 件事：

1. 列举有哪些工具

   • 你有：打开网页、点击、输入、截图、搜索页面内容…

2. 调用一个工具

   • 客户端说：callTool: chrome_navigate
   • 带参数：{ url: "https://www.baidu.com" }

3. 返回结果

   • 成功/失败
   • 截图 base64
   • 页面内容
   • 元素定位

---

3. 最终能用的 mcp.json（直接复制）

路径必须是：

C:\Users\86136\.mcp\mcp.json

内容如下（stdio 官方标准配置）：

假设你的客户端仅支持stdio的连接方式，那么请使用下面的方法：

先查看你刚刚安装的npm包的安装位置
# npm 查看方式
npm list -g mcp-chrome-bridge
# pnpm 查看方式
pnpm list -g mcp-chrome-bridge
假设上面的命令输出的路径是：/Users/xxx/Library/pnpm/global/5 那么你的最终路径就是：/Users/xxx/Library/pnpm/global/5/node_modules/mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js

把下面的配置替换成你刚刚得到的最终路径
{
  "mcpServers": {
    "chrome-mcp-stdio": {
      "command": "npx",
      "args": [
        "node",
        "/Users/xxx/Library/pnpm/global/5/node_modules/mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js"
      ]
    }
  }
}

---

4. 如何确认连通成功？

在 VSCode 里：

1. Ctrl + Shift + P
2. 输入：

   MCP: Reload Servers
   

3. 再输入：

   MCP: List Servers
   

出现如下说明MCP服务器和Chrome浏览器联动成功：

5. 具体安装步骤

参考了大佬的文章，通篇写的很全面：

https://zhuanlan.zhihu.com/p/1945244696445182752

---

过程问题

1. 扩展安装后显示"未连接"

   • 症状：扩展图标是灰色的，点击后显示"Not Connected"
   • 原因分析：
     mcp-chrome-bridge未正确安装或注册
     Chrome的Native Messaging权限被阻止
   • 解决方案：

   重新bash命令注册桥接器
   mcp-chrome-bridge register
   重启Chrome浏览器
   

2. 连接失败

   • 症状：服务器已调通，但扩展连接失败
   • 原因分析：
     a. 前往 chrome://inspect/#remote-debugging 以启用远程调试。
     b. 按照对话框界面中的说明开启：允许传入的调试连接。
     

附录

• vscode添加MCP协议示例：https://vscode.js.cn/docs/copilot/customization/mcp-servers
• mcp-chrome协议：https://github.com/hangwin/mcp-chrome/blob/master/README_zh.md
• 让MCP调试浏览器会话：https://developer.chrome.com/blog/chrome-devtools-mcp-debug-your-browser-session?hl=zh-cn