The core of Chrome MCP Server is not about “cool-looking browser screenshots,” but about connecting Claude Code to the control capabilities of your local Chrome. What installation tutorials should provide most are copy-paste commands, configuration snippets, and troubleshooting order, so this version is restructured to focus on code blocks, no longer using custom fake screenshots.
If you are building an AI development workflow, you can conveniently readAI-Assisted WordPress Operations Tutorial、Codex Integration with Third-Party Models Practice、AI Development Category Page和WordPress Foreign Trade Site Tools Center, to string together browser debugging, content review, and code workflows.
What Is Chrome MCP Server
Chrome MCP Server is an MCP Server based on a Chrome extension provided by hangwin/mcp-chrome. It exposes Chrome browser capabilities to MCP-compatible AI clients via a local bridge service, allowing AI assistants to read tabs, take screenshots, analyze page content, and execute browser actions.
It is positioned differently from testing frameworks like Playwright: Playwright is more suitable for CI and repeatable test scripts; Chrome MCP Server is more suitable for ad-hoc use of your everyday Chrome's login states, extensions, and existing tabs for analysis and operations.
Step 1: Check Node, npm, and Claude Code
First, confirm that the current command line can find Node.js, npm, and Claude Code. On Windows, it is recommended to stick to either PowerShell 7 or WSL to avoid having global npm packages installed in the other environment.
node -vIf `node` or `npm` is missing, install Node.js LTS first; if `claude mcp list` is unavailable, upgrade or reinstall Claude Code first.
Step 2: Install mcp-chrome-bridge
The official README recommends installing `mcp-chrome-bridge` globally. You can install it directly when using npm; when using pnpm, be mindful of the postinstall script and register manually if necessary.
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 与扩展显示一致。
- 先用测试网页验证读取、截图和标签页能力。
- 敏感后台动作必须人工确认，不让模型直接执行。
Frequently asked questions
Chrome MCP Server 和 Playwright 有什么区别？
Playwright 更适合写稳定的自动化测试脚本；Chrome MCP Server 更适合让 AI 助手连接你的日常 Chrome 环境，利用已有登录态和标签页完成临时分析、截图和操作。
Claude Code 里应该用 http 还是 streamable-http？
使用 `claude mcp add –transport http` 最稳。写 JSON 配置时，Claude Code 文档推荐 `type: “http”`，也说明 `streamable-http` 是兼容别名；不同客户端示例里的 `streamableHttp` 不一定能直接照搬。
连接失败先看哪里？
先看 Chrome 扩展是否启用并连接，再看 `mcp-chrome-bridge` 是否安装成功，最后检查 Claude Code 里的 server 名称、URL、端口和 transport 是否一致。
参与评论
须登录后才能发表评论
登录后即可参与讨论，新用户可免费注册账号
请勿发布垃圾评论、广告或包含恶意链接的内容。评论内容需遵守相关法律法规与社区准则。