logoChat01.ai

如何在Claude code中配置并使用上Chrome MCP Server

Creato il: 13 luglio 2025

Risposto usando O3 da Chat01

Domanda

如何在Claude code中配置并使用上Chrome MCP Server

Pensiero

Thought for 43 seconds

Risposta

在 Claude Code 中引入 Chrome MCP Server 的核心流程可以概括为：先准备运行环境（Node.js ≥ 18 + Chrome），再安装并启动 Chrome MCP Server（扩展 + 桥接器），最后用 claude mcp add 将其注册到 Claude Code，即可在代码里直接调用浏览器自动化和内容分析工具。整个过程完全本地化，复用你原本登录状态的 Chrome，且支持 Streamable HTTP、STDIO 等多种传输方式。GitHub LobeHub Anthropic

1. 背景与优势

  • Chrome MCP Server 通过 Chrome 扩展 + Native-Messaging Host，把浏览器能力暴露为 MCP 工具，供 Claude、Cursor 等 LLM 客户端调用Juejin GitHubciteturn0search0turn3view0。
  • 与传统 Playwright-型浏览器自动化相比，它无需启动独立的“裸浏览器”，可直接复用你的插件、Cookie 与会话；启动速度和交互延迟也更低Juejin GitHubciteturn0search5turn3view0。
  • 内置 20 + 工具（标签管理、导航、脚本注入、截屏、网络抓包、历史/书签检索等），并带向量语义搜索能力，方便 Claude 对多标签内容做智能检索Juejin GitHubciteturn3view0。

2. 前置条件

组件版本/说明
Node.js18.19.0 及以上（建议配合 pnpm）Juejin GitHubciteturn3view0
Chrome / Chromium任意稳定版；需启用扩展“开发者模式”加载本地包Juejin GitHubciteturn3view0
pnpm / npm用于全局安装 mcp-chrome-bridgeJuejin GitHubciteturn6search1
Claude Code CLI / 插件 ≥ 2025-Q1该版本开始全面支持 MCP 服务器注册Juejin GitHubciteturn4view0

3. 安装并启动 Chrome MCP Server

3.1 获取扩展包

  1. 访问 GitHub Releases 下载最新 mcp-chrome-extension.zip，解压到本地目录Juejin GitHubciteturn3view0。
  2. Chrome 地址栏输入 chrome://extensions/ → 开启 开发者模式 → 加载已解压的扩展，选中解压目录Juejin GitHubciteturn3view0。

3.2 安装 Native-Messaging Host（桥接器）

bash
# 建议使用 pnpm 打开 postinstall
pnpm config set enable-pre-post-scripts true
pnpm add -g mcp-chrome-bridge       # 或 npm i -g mcp-chrome-bridge
# 若 postinstall 未自动注册则手动：
mcp-chrome-bridge register

Juejin GitHubciteturn3view0

3.3 启动 Streamable HTTP 服务（推荐）

扩展安装完毕后点击图标 Connect，会自动在本地起一个 http://127.0.0.1:12306/mcp 服务；如需自定义端口，可在扩展设置里修改Juejin GitHubciteturn3view0。

可选： 若你想通过 Chrome 调试端口运行纯 Node 版本（不装扩展），可以用 --remote-debugging-port=9222 启动 Chrome，再使用社区的 chrome-debug-mcp 服务器，但步骤更复杂，建议先用官方扩展方案熟悉流程Juejin GitHubciteturn0search3。

4. 在 Claude Code 中注册 MCP Server

4.1 Streamable HTTP 方式

bash
# 项目级（本仓库配置）添加
claude mcp add --transport http chrome-mcp http://127.0.0.1:12306/mcp
# 或全局
claude mcp add -s user --transport http chrome-mcp http://127.0.0.1:12306/mcp

Claude 会在 .mcp.json（或用户目录）里写入：

json
{
  "mcpServers": {
    "chrome-mcp": {
      "type": "http",
      "url": "http://127.0.0.1:12306/mcp"
    }
  }
}
```[Juejin](https://juejin.cn/post/7513971139875323941?utm_source=chatgpt.com) [GitHub](https://github.com/hangwin/mcp-chrome)citeturn4view0

### 4.2 STDIO 备用方案  
如果你只能用 STDIO，可把桥接脚本路径填给 `claude mcp add chrome-mcp node /path/to/mcp-server-stdio.js`，但不支持实时 SSE 流[Juejin](https://juejin.cn/post/7513971139875323941?utm_source=chatgpt.com) [GitHub](https://github.com/hangwin/mcp-chrome)citeturn3view0。

### 4.3 验证
```bash
claude mcp list          # 查看已注册服务器
/mcp                     # 在 Claude 聊天框中查看连接状态

成功后你会看到 chrome-mcp (connected)，并能在自动补全中看到诸如 chrome_screenshot 等工具名称Juejin GitHubciteturn4view0。

5. 常用工具与代码示例

典型需求Claude 调用示例（对话或代码块）
打开网页> 请使用 chrome_navigate 打开 https://news.ycombinator.com
获取当前标签 HTML> chrome_get_web_content
语义检索 tab 内容> search_tabs_content "找与“量子计算”相关的标签"
截全屏并保存python\n# 在 Claude Code 里\nfrom mcp import chrome_screenshot\nchrome_screenshot(save_to='~/Desktop/full.png')\n

以上工具均来自 mcp-chrome 的 20 + API 列表，可在 README「Available Tools」查看完整签名Juejin GitHubciteturn3view0。

6. 常见问题（FAQ）

问题解决方案
扩展已连接但 Claude 显示未连接确认端口与 claude mcp add 中一致，且无代理/防火墙拦截Juejin GitHubciteturn1search3
mcp-chrome-bridge 安装后无任何注册信息根据 pnpm 7+ 安全策略，需手动执行 mcp-chrome-bridge register 再重启 ChromeJuejin GitHubciteturn6search1
CPU 占用高关闭不必要的标签；MCP 会对活动页做向量化，可在扩展设置里降低索引频率Juejin GitHubciteturn0search2
Prompt 注入风险仅在本地使用；不要连接不可信的远程 HTTP MCP 服务器，如必须使用，务必加鉴权头并限制指令范围Juejin GitHubciteturn4view0

7. 进阶阅读

  • 官方 README & 中文文档：完整工具列表、架构设计及故障排查Juejin GitHubciteturn3view0
  • Undead Pickle《Claude Code MCP Servers–Setup Guide》：涵盖多种 MCP 服务器对比与实战要点Juejin GitHubciteturn1search0
  • CloudArtisan 博客：对比 SSE/HTTP/STDIO 三种传输方式的优劣与应用场景Juejin GitHubciteturn1search3
  • 掘金 & CSDN 文章：社区经验与踩坑合集，适合参考启动脚本、远程调试等特殊场景Juejin GitHubciteturn0search1turn0search5

按照以上步骤完成配置后，你就可以在 Claude Code 里像调用普通 Python/JS 库一样，让 Claude 自动控制本地 Chrome，抓取信息、批量操作网页，甚至结合向量搜索做多标签知识管理。祝开发顺利，玩得开心!

Domanda

● chrome-mcp 已成功添加到用户配置中。
╭────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ Chrome-mcp-server MCP Server │
│ │
│ Status: ✘ failed │
│ URL: http://127.0.0.1:12306/mcp │
│ │
│ Error: Dynamic client registration failed: HTTP 404

Pensiero

It looks like I need to craft an answer while incorporating multiple citations. I'll reference the necessary documentation for dynamic client registration and remote server support. We’ll use the required citation from the dynamic client registration spec, bug issue #2831, the Upstash fix, the README quick start, and the fastmcp 404 fix path. I'll make sure to cite these sources in the format "(website)." This should give a well-rounded, fully-cited explanation for the user.

To explain the potential cause of the 404 error during dynamic client registration, I’ll outline a few steps and reference relevant sources. First, I’ll discuss the dynamic client registration requirement and clarify

Thought for 1m 39s

Risposta

在 Chrome MCP Server 端一切正常、却在 claude mcp add --transport http 之后看到

text
Status: ✘ failed  
Error: Dynamic client registration failed: HTTP 404

的根本原因是：Claude 在 HTTP 传输模式下一定会先走 OAuth “动态客户端注册（DCR）”流程，而 chrome-mcp 并没有实现这两个端点（/.well-known/oauth-authorization-server 和 /register），因此返回 404。Anthropic Help Center Model Context Protocol
下面给出一份常见排错清单及三个可行的绕过方案，任选其一即可让连接变成 ✓ running。

1 . 先确认扩展和本地服务真的在跑

检查项期望现象
Chrome 扩展图标点开后显示 Connected说明 Native-Messaging host 已成功握手
浏览器里打开 http://127.0.0.1:12306/mcp 能返回一段 JSON（或 SSE 流）说明本地 HTTP 端口已监听

chrome-mcp 官方 README 的“Quick Start”章节同样要求端口 12306 与路径 /mcp 保持一致。GitHubciteturn22view0

若此步就访问不到，请先重装 mcp-chrome-bridge、重新勾选扩展的 Connect 按钮，再重试后续步骤。GitHubciteturn22view0

2 . 方案 A — 直接换成 SSE 传输（最简单）

许多用户报告：把 transport 从 http 改成 sse 即可跳过 DCR，状态立即变绿。GitHubciteturn18search0turn5search1

bash
# 移除旧配置
claude mcp remove chrome-mcp -s user

# 重新添加（SSE）
claude mcp add --transport sse chrome-mcp http://127.0.0.1:12306/mcp

重新打开 Claude，/mcp 列表应显示 running。

3 . 方案 B — 使用 streamable-http（Claude CLI ≥ 1.0.35）

Chrome-mcp 默认就是新的「Streamable HTTP」服务器。若你的 Claude CLI 已更新到 1.0.35 或更高，可以直接使用官方推荐的写法：GitHubciteturn22view0

bash
claude mcp remove chrome-mcp -s user
claude mcp add --transport streamable-http chrome-mcp http://127.0.0.1:12306/mcp

在旧版本 (≤ 1.0.31) 中，http 传输会无条件触发 DCR，即便你加了 -H "Authorization: …" 也会被忽略。该缺陷已在 #2831 里确认并修复。GitHubciteturn2view0

4 . 方案 C — 退回 STDIO 本地连接（不走网络）

如果你的环境对端口或 CORS 有额外限制，可让 Claude 直接通过 STDIO 调用 bridge 脚本：GitHubciteturn22view0

bash
# 假设 mcp-chrome-bridge 装在 ~/.pnpm/global
claude mcp add chrome-mcp-stdio \
  npx node ~/.pnpm/global/5/node_modules/mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js

STDIO 通道不会触发 DCR，也不需要任何端口映射。

5 . 如果你确实需要 HTTP + OAuth

按照 MCP 规范，服务端必须提供

  • /.well-known/oauth-authorization-server（元数据）
  • /register（RFC 7591 动态注册端点）

才能让 Claude 通过 DCR 获取 client_id。GitHubciteturn6search4turn6search5
除非你要对外公开 Chrome-mcp，否则本地开发场景通常不值得为它再搭一个 OAuth 服务器；直接采用上面 A/B/C 方案即可。

6 . 快速自检清单

  1. 升级 Claude CLI npm i -g claude-code@latest，避免旧版 HTTP 传输 Bug。GitHubciteturn2view0
  2. 彻底重启 Claude Desktop/Terminal，再刷新一次 /mcp。
  3. 检查是否有系统代理、VPN、WSL 转发等把 127.0.0.1 重定向到别处。
  4. 查看 ~/Library/Logs/Claude/mcp-chrome-mcp*.log（macOS 路径），定位端口占用或权限问题。GitHubciteturn15search1

完成以上任一方案后，再执行 /mcp → chrome-mcp (connected) 就表示恢复正常。祝你玩得开心！

Condividi questa Q&A