在 Trae 国际版中添加 Chrome Dev MCP Server（Windows 实战指南）

字数 812，阅读大约需 5 分钟

在 Trae 国际版中添加 Chrome Dev MCP Server（Windows 实战指南）

前言

最近在折腾 Trae 国际版这类 AI 编程工具的时候，我发现它虽然支持接入 MCP（Model Context Protocol），但是只接受通过 npx 或 uvx 启动的 stdio 模式。

与此同时，Chrome 端的 mcp-chrome 扩展确实很好用，可以让 AI 直接获取浏览器标签页、截图、修改网页样式，甚至做一些自动化操作。但它默认暴露的是 Streamable HTTP 接口，并不符合 Trae 的要求。

这篇文章记录一下我在 Windows 环境下的实践过程，分享如何正确安装、配置和跑通 Chrome MCP 与 Trae 的对接。

准备条件

• Node.js （版本必须 ≥ 18.19.0）

安装好后检查：
复制代码
```
  node -v
```

• npm （随 Node.js 自带）

检查：
复制代码
```
  npm -v
```

• Chrome 或 Chromium 浏览器

如果这几样没准备好，后面就跑不起来。

安装步骤

1. 下载并加载 Chrome MCP 扩展

1. 打开 GitHub Releases，下载最新的扩展 zip 包

github.com/hangwin/mcp...

1. 解压缩
1. 打开浏览器地址栏输入 chrome://extensions/
1. 右上角打开"开发者模式"
1. 点击"加载已解压的扩展程序"，选择刚才解压的目录
1. 安装完成后，扩展图标会出现在右上角。点开后需要点击 Connect 才能让 MCP 服务真正启动

2. 安装 mcp-chrome-bridge

接下来需要安装桥接器 mcp-chrome-bridge，它负责把 Chrome MCP 的 HTTP 接口转换成 stdio 模式。

在命令行执行：

复制代码

  npm install -g mcp-chrome-bridge

安装完成后，检查安装路径：

复制代码

  npm list -g mcp-chrome-bridge

在我电脑上的输出是：

kotlin 复制代码

  C:\Users\liuhao\AppData\Roaming\npm
`-- mcp-chrome-bridge@1.0.29

说明全局安装成功。

3. 确认 stdio 启动脚本路径

桥接器的核心脚本位于：我的用户名是liuhao,大家要换成自己的用户名，不要抄我的

vbscript 复制代码

  C:\Users\liuhao\AppData\Roaming\npm\node_modules\mcp-chrome-bridge\dist\mcp\mcp-server-stdio.js

后面 Trae 的配置就要指向这个文件。

4. 在 Trae 中添加 MCP 配置

打开 Trae → Settings → AI Management → MCP → Add Manually，填入下面的 JSON：

swift 复制代码

  {
  "mcpServers": {
    "chrome-mcp-stdio": {
      "command": "node",
      "args": [
        "C:\Users\liuhao\AppData\Roaming\npm\node_modules\mcp-chrome-bridge\dist\mcp\mcp-server-stdio.js"
      ],
      "env": {},
      "disabled": false,
      "autoApprove": []
    }
  }
}

几点注意：

• Windows 下路径要写成双反斜杠 \
• 如果 Trae 报错"找不到 node"，就把 "command": "node" 改成 Node.js 的绝对路径，比如：
swift 复制代码
```
  "command": "C:\Program Files\nodejs\node.exe"
```

验证

1. 确认 Chrome 扩展里已经点了 Connect
1. 确认 Trae 里启用了 chrome-mcp-stdio
1. 在 Trae 的对话里测试几个命令，例如"获取当前标签页""打开新页面"
1. 如果能得到返回结果，说明整个链路已经跑通

常见问题

报错找不到 node

Node.js 没在 PATH 里，直接填绝对路径即可。

报错路径错误

检查 npm list -g mcp-chrome-bridge 的输出，确认 JSON 里的路径是否一致。

扩展没反应

很多人忘记在扩展弹窗里点 Connect，这是必须的。

为什么不用 HTTP 直连？

因为 Trae 目前只认 stdio 模式，不支持 streamableHttp 配置。

总结

• Node.js 和 mcp-chrome-bridge 是必须的，光有扩展不行
• Trae 国际版只能走 stdio 模式，所以必须通过 mcp-server-stdio.js 来接入
• 配置的关键点就是：路径写对，Node.js 命令能找到，扩展要 Connect
• 跑通之后，Trae 就能调用浏览器的各种能力，把 AI 和浏览器真正结合起来，大大提升效率