Chrome MCP Server 安装教程：让 Claude Code 接管浏览器做自动化

Chrome MCP Server 的核心不是“看起来很酷的浏览器截图”，而是把 Claude Code 和你本机 Chrome 的控制能力接起来。安装教程最该给的是可复制命令、配置片段和排错顺序，所以这版改成代码块为主，不再使用自制假截图。

如果你正在搭建 AI 开发工作流，可以顺手阅读AI 辅助 WordPress 运营教程、Codex 接入第三方模型实践、AI 开发分类页和WordPress 外贸站工具中心，把浏览器调试、内容审查和代码工作流串起来。

Chrome MCP Server 是什么

Chrome MCP Server 是 hangwin/mcp-chrome 提供的基于 Chrome 扩展的 MCP Server。它通过本机桥接服务把 Chrome 浏览器能力暴露给支持 MCP 的 AI 客户端，让 AI 助手能读取标签页、截图、分析页面内容并执行浏览器动作。

它和 Playwright 这类测试框架的定位不同：Playwright 更适合 CI 和可重复测试脚本；Chrome MCP Server 更适合临时使用你日常 Chrome 的登录态、扩展和已有标签页做分析与操作。

第 1 步：检查 Node、npm 和 Claude Code

先确认当前命令行能找到 Node.js、npm 和 Claude Code。Windows 上建议固定使用 PowerShell 7 或 WSL 其中一种环境，避免全局 npm 包装到另一个环境里。

node -v
npm -v
claude --version
claude mcp list

如果 `node` 或 `npm` 不存在，先安装 Node.js LTS；如果 `claude mcp list` 不可用，先升级或重新安装 Claude Code。

第 2 步：安装 mcp-chrome-bridge

官方 README 推荐全局安装 `mcp-chrome-bridge`。使用 npm 时可以直接安装；使用 pnpm 时要注意 postinstall 脚本，必要时手动注册。

npm install -g mcp-chrome-bridge

如果你使用 pnpm，可以按官方 README 的思路启用脚本或手动注册：

pnpm config set enable-pre-post-scripts true
pnpm install -g mcp-chrome-bridge

# 如果自动注册没有执行，再手动注册
mcp-chrome-bridge register

第 3 步：安装 Chrome 扩展

打开官方 Release 页面下载最新 Chrome 扩展包，然后在 Chrome 扩展管理页加载。不要从不明网盘或二次打包站点下载，因为浏览器扩展有很高权限。

https://github.com/hangwin/mcp-chrome/releases

Chrome 地址栏打开：
chrome://extensions/

操作顺序：
1. 开启 Developer mode / 开发者模式
2. 点击 Load unpacked / 加载已解压的扩展程序
3. 选择下载并解压后的扩展目录
4. 点击扩展图标并连接本机服务

第 4 步：把 Chrome MCP Server 加到 Claude Code

Claude Code 官方 MCP 文档说明，HTTP 类型 MCP Server 可以用 `claude mcp add –transport http` 添加。Chrome MCP Server 默认示例使用本机地址 `http://127.0.0.1:12306/mcp`，实际端口以扩展显示或官方 README 为准。

claude mcp add --transport http chrome-mcp-server http://127.0.0.1:12306/mcp

如果你更喜欢项目级配置，可以在项目根目录放 `.mcp.json`。Claude Code 文档说明 `type` 可使用 `http`，也兼容 MCP 规范中的 `streamable-http` 命名。

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

如果你复制的是其他客户端示例，看到 `streamableHttp`、`streamable-http`、`http` 这几种写法时不要混用。Claude Code 里最稳的是命令行添加方式，或者按 Claude Code 文档使用 `type: “http”`。

第 5 步：验证连接是否成功

配置后重新打开 Claude Code，先列出 MCP Server，再进入会话里运行 `/mcp` 检查连接状态。第一次不要直接操作真实后台，先用普通网页验证读取和截图能力。

claude mcp list
claude mcp get chrome-mcp-server

# 进入 Claude Code 会话后
/mcp

可以让 Claude Code 做一个低风险测试，例如读取当前测试页面标题、列出打开的标签页、截取当前页面。确认动作和预期一致后，再进入真实业务页面。

常见错误和排查顺序

连接不上时不要急着重装，先按“扩展、桥接服务、Claude Code 配置”这个顺序排查。

# 1. 确认全局包存在
npm list -g mcp-chrome-bridge --depth=0

# 2. 确认 Claude Code 已添加 server
claude mcp list
claude mcp get chrome-mcp-server

# 3. 确认 URL 和扩展里显示的端口一致
# 默认示例：
http://127.0.0.1:12306/mcp

安全边界

浏览器 MCP 能力很强，使用时要按最小权限原则：只监听 `127.0.0.1`，不用时关闭扩展或本地服务，涉及支付、客户数据、删除内容、账号权限、DNS 和服务器设置时必须人工确认。

实用检查清单

• 只从官方 GitHub Release 或官方文档指定来源安装。
• 本地服务只监听 localhost 或 127.0.0.1。
• `claude mcp list` 能看到 `chrome-mcp-server`。
• `claude mcp get chrome-mcp-server` 的 URL 与扩展显示一致。
• 先用测试网页验证读取、截图和标签页能力。
• 敏感后台动作必须人工确认，不让模型直接执行。

常见问题

参考资料

• hangwin/mcp-chrome 官方 GitHub 仓库
• Chrome MCP Server 官方 README
• Model Context Protocol 官方介绍
• Claude Code MCP 官方文档
• Chrome DevTools MCP 官方项目