在 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

![](https://i-blog.csdnimg.cn/direct/3c2acfb67fa14313896bf6730cfcc41b.png)
* • **npm**（随 Node.js 自带）  
 检查：
* ```  
npm -v

• Chrome 或 Chromium 浏览器

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

安装步骤

1. 下载并加载 Chrome MCP 扩展

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

https://github.com/hangwin/mcp-chrome?tab=readme-ov-file![https://github.com/hangwin/mcp-chrome?tab=readme-ov-file](https://github.com/hangwin/mcp-chrome?tab=readme-ov-file "https://github.com/hangwin/mcp-chrome?tab=readme-ov-file")![](https://i-blog.csdnimg.cn/direct/f421c9121b5a4cdfbbd73d8e9dcd5fdd.png)

下载地址：https://download.csdn.net/download/wuhanwhite/92051260![https://download.csdn.net/download/wuhanwhite/92051260](https://download.csdn.net/download/wuhanwhite/92051260 "https://download.csdn.net/download/wuhanwhite/92051260")

2. 解压缩
3. 打开浏览器地址栏输入 chrome://extensions/
4. 右上角打开"开发者模式"
5. 点击"加载已解压的扩展程序"，选择刚才解压的目录
6. 安装完成后，扩展图标会出现在右上角。点开后需要点击 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

在我电脑上的输出是：

C:\Users\liuhao\AppData\Roaming\npm
`-- [email protected]

说明全局安装成功。

3. 确认 stdio 启动脚本路径

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

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：

{ "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 的绝对路径，比如：

"command": "C:\Program Files\nodejs\node.exe"

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

![](https://i-blog.csdnimg.cn/direct/f51d486dcf614e148d0a119cb8a9cba3.png)

![](https://i-blog.csdnimg.cn/direct/f420489b37c149b095ad3fa9de67af20.png)

![](https://i-blog.csdnimg.cn/direct/496590bff0e74fa6960495b0969f6540.png)

### 常见问题

#### 报错找不到 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 和浏览器真正结合起来，大大提升效率

---

> 《[在 Trae 国际版中添加 Chrome Dev MCP Server（Windows 实战指南）](https://xplanc.online/92c408c2a633360be78ddd7f58be342979a66f8833381a20df569662bcdfa0eb)》 是转载文章，[点击查看原文](https://blog.csdn.net/wuhanwhite/article/details/152268364)。