· CLAUDE-CODE-FEATURE-RADAR · 2026.05.14 · 14 MIN ·

Claude in Chrome:让 Claude Code 直接驾驶你的浏览器

Native Messaging Host 把 Chrome 扩展和本机 CLI 直连 —— Claude 自己开浏览器、点表单、读 console、回报哪儿出错了。 · by 思扬

AI · HERO seed:4220260514 Native Messaging Host 把 Chrome 扩展和本机 CLI 直连 —— Claude 自己开浏览器、点表单、读 console、回报哪儿出错了。

FIG.00 — cover · ai-generated · placeholder

原文:https://code.claude.com/docs/en/chrome 官方定位:Use Claude Code with Chrome (beta) — Connect Claude Code to your Chrome browser to test web apps, debug with console logs, automate form filling, and extract data from web pages. Chrome 扩展:https://chromewebstore.google.com/detail/claude/fcoeoabgfenejglbffodgkkbkcdhcgfn(本机要装的就是它) 状态:Beta · 支持 Chrome / Edge,不支持 Brave / Arc / 其他 Chromium 衍生 / WSL

🔥 影响力卡片

维度	数据
引入版本	Claude Code 2.0.73+ + Chrome 扩展 1.0.36+ — 这条组合是个硬门槛
跟 Computer Use 的关系	”Computer use 是核武器,Claude in Chrome 是常规武器” — 浏览器场景的剪裁版,延迟和成本都更友好
数据通道	装的是 Native Messaging Host(`com.anthropic.claude_code_browser_extension.json`)— Chrome 扩展 ↔ 本机 CLI 之间的官方 IPC,不走网络
商业模型	必须第一方 Anthropic 订阅(Pro/Max/Team/Enterprise)— Bedrock/Vertex/Foundry 用户没有
状态信号	Anthropic 让独立扩展 “Claude in Chrome” 自己迭代到 1.0.36+,说明这是被作为 product line(产品线)经营的,不是一次性 demo

🎯 为什么必读

1. 这是 Claude Code 跨过”代码工具 → 浏览器代理”边界的第一步。

以前你写 web app,Claude 给你写代码,你打开浏览器测试。现在 Claude 自己开浏览器、自己点表单、自己读 console、自己回报”哪儿出错了” — 你只需要在终端坐着。

2. 它绕过了一个传统大坑:登录态。

API 调外部服务时永远卡在 OAuth / API key / 速率限。Claude in Chrome 用的是你自己已经登录的 Chrome session,所以 Google Docs / Gmail / Notion / 公司内部 SSO 系统 — 全部直接可达,不用搭 API 集成。这一条对个人生产力是革命性的。

3. 跟 Computer Use 比有清晰取舍。

	Computer Use	Claude in Chrome
覆盖范围	macOS + Windows 所有 app(Desktop app);CLI 仅 macOS	只 Chrome / Edge 浏览器
视觉模型	截屏 → 视觉理解(自动 downscale)	DOM 直接读 + 浏览器 API
速度 / 成本	慢、贵(每张截图都是 vision input)	快、便宜(DOM 是文本)
失败模式	UI 变了找错按钮、retina 高 DPI 字太小	DOM 变了就抓不到、`iframe` 跨域限制
启用门槛	Pro/Max 限定 + 系统权限(Accessibility/Screen Recording)	Chrome 扩展装上即可
详细对照	见 `14-computer-use.md`	—

结论:能用浏览器解决的,优先 Chrome 扩展(官方优先级是 MCP > Bash > Chrome > Computer Use);非要 native(VSCode 内部菜单、Slack 桌面 app、Figma 桌面、iOS Simulator)再 Computer Use。

一句话总结

claude --chrome 让 Claude 多出一双手 — 一只在终端打字,一只在你已经登录的 Chrome 里点鼠标读 DOM,中间走本机 Native Messaging Host,不经过 Anthropic 云。

💎 金句墙

★ “Claude opens new tabs for browser tasks and shares your browser’s login state, so it can access any site you’re already signed into.” “Claude 为浏览器任务开新标签页,共享你的浏览器登录态 — 任何你已经登录的网站它都能访问。” —— 🟢 这一句把”为什么不需要 API 集成”说透了。登录态 = OAuth 已经躺在 Chrome 里了

★ “When Claude encounters a login page or CAPTCHA, it pauses and asks you to handle it manually.” “遇到登录页面或验证码时,Claude 会暂停并请你手动处理。” —— 🟢 设计上的诚实 — 自动化也有上限,反人类的网站防爬关卡照样卡住它,所以人机协作而不是纯自动。从安全角度也好:Claude 不会替你输密码

★ “Enabling Chrome by default in the CLI increases context usage since browser tools are always loaded.” “在 CLI 里默认启用 Chrome 会增加 context 消耗,因为浏览器工具一直挂着。” —— 🟢 隐藏的实际成本 — 不只是 quota,是 context window 也被占 — 等你 100k+ context 时这个开销变明显

📋 核心精读

1. 三种启动方式

# 一次性
claude --chrome

# 已开的 session 里加
> /chrome

# 永远开启
> /chrome
# 选 "Enabled by default"

注意:VSCode 扩展里不需要 flag — 装了 Chrome 扩展就自动可用。

2. Native Messaging Host — 为什么是本机不是网络

启用第一次时,Claude Code 会安装一个本机 IPC 配置文件:

平台	路径(Chrome 版)
macOS	`~/Library/Application Support/Google/Chrome/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json`
Linux	`~/.config/google-chrome/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json`
Windows	`HKCU\Software\Google\Chrome\NativeMessagingHosts\` 注册表项

Edge 用户路径相应换成 Microsoft Edge。

Native Messaging 是 Chrome 官方机制:浏览器扩展通过 stdin/stdout 跟一个本机进程通信。意味着:

Chrome 扩展 ↔ Claude Code 进程之间的命令不经过 Anthropic 云(只有 Claude 决策走云)
安装时会写一次配置 → 第一次启用要重启 Chrome(没生效就再试)
卸载 Claude Code 后要清这个配置,不然冷启动报错

3. 七大能力 + 实际 prompt 范例

官方列了 7 大场景,我加了 prompt 模板:

a. Live debugging — 改代码 + 看 console + 立刻验证

Open the dashboard page and check the console for any errors
when the page loads. Filter for ReferenceError specifically.

b. Design verification — Figma → 实现 → 对比

I just implemented the new pricing page from the Figma mock.
Open localhost:3000/pricing and tell me what doesn't match
the mock at <figma-url>.

c. Web app 表单 / 回归测试

I just updated the login form validation. Submit the form
with these invalid combinations and tell me which error messages
appear: empty email, malformed email, empty password.

d. 已登录 web app 操作 — 杀手级用法

Draft a project update based on the recent git commits and add it
to my Google Doc at docs.google.com/document/d/abc123

e. 数据提取 → 本地文件

Go to <some-product-listing-page> and extract name, price,
availability for each item. Save as products.csv.

f. 跨多站点工作流

Check my calendar for meetings tomorrow. For each meeting with
an external attendee, look up their company website and add a
note in the calendar event about what they do.

g. 录 GIF 演示

Record a GIF showing how to complete the checkout flow,
from adding an item to cart through to confirmation page.

🟢 我的判断(对独立开发者最值钱):

c + d + e 是日常会复用的
f + g 是”灵感时刻”的工具
a + b 视前端项目密度而定

4. 权限模型 — 站点级,跟着扩展走

chrome://extensions → Claude → 详细信息 → 允许访问的网址

这里设了什么,Claude 就只能动什么。强烈建议:

开发环境(localhost:*、127.0.0.1:*)→ 一律放行
自己用的 web app(Gmail / Docs / Notion / GitHub) → 按需放行
银行 / 公司内部敏感系统 → 不放行

5. 8 个真实故障 + 对应解法

故障	实际原因	解
”Chrome extension not detected”	多半是没重启 Chrome	重启 Chrome;`/chrome` 选 “Reconnect extension"
"Receiving end does not exist”	扩展的 service worker 闲置进入 idle	跑 `/chrome` 选 reconnect
”No tab available”	Claude 在还没准备好的 tab 上动作	让它”新开一个 tab 再试"
"Browser extension is not connected”	Native Messaging Host 到不了扩展	重启 Chrome + Claude Code,跑 `/chrome` reconnect
JS 弹窗 alert/confirm/prompt 挡住操作	浏览器原生 dialog 阻塞事件	手动关掉 dialog,告诉 Claude 继续
Windows: EADDRINUSE 命名管道冲突	另一个 Claude Code session 在用	关其他 session,重启
Windows: Native Messaging host 启动崩溃	配置文件损坏	重装 Claude Code 重生成配置
WSL 用户根本起不来	官方明确不支持	用原生 Windows / macOS / Linux,WSL 没办法

6. Context 消耗的隐藏代价

开了 --chrome → 浏览器工具集一直挂在 context 里
长会话(100k+ tokens)→ 这部分占比变明显

对策:不是每个 session 都开。默认关,需要时 /chrome 临时开,等浏览器任务做完用 /chrome 关。

/mcp → 选 claude-in-chrome 能看到这套工具的全部 schema(MCP 实现的)。

7. 跟其他自动化的取舍

工具	何时用它代替 Claude in Chrome?
Playwright / Puppeteer(本地脚本)	需要 CI 跑、需要 headless、需要可重放
MCP Playwright server(第三方)	同上但想让 Claude 调用 — 跟 Chrome 扩展是平行方案
Computer Use	浏览器之外的桌面 app(Slack desktop / Figma 桌面 / iTerm)
`curl` + `pandoc`(本系列的扫描手法)	静态页 / API 文档 / 不需要登录
Anthropic API + WebFetch	一次性抓内容,不需要交互

🟢 经验法则:

要登录 + 要点击 + 要看 DOM → Claude in Chrome 几乎没竞品
不要登录 / 不要交互 → curl + pandoc 永远更快更省

🟢 译者总评

1. 这是 Claude Code 边界扩张的样板:扩展产品矩阵,而非堆 CLI 功能。

Anthropic 没把 “browser automation” 直接塞进 CLI(那会让 CLI 越发臃肿),而是做了个独立 Chrome 扩展,通过 Native Messaging 跟 CLI 沟通。这套架构的好处:

Chrome 扩展可以独立迭代(已经到 1.0.36+,跟 CLI 解耦)
桌面 app 也能复用同一个扩展(VSCode 自动用)
未来 Firefox / Safari 加扩展时不会污染 CLI

**2. 隐含的产品策略:**让 Claude 主动”看屏幕”和”动设备”,而不是被动等你贴 URL/HTML。

Computer Use + Claude in Chrome + Desktop scheduled tasks(Mac 桌面 app)这三件套加起来就是 Anthropic 在”agentic AI 主动操作设备”这条路上的全部弹药。Claude in Chrome 是其中门槛最低、用户基数最大那块。

3. 给独立开发者的具体建议

试着这周内做以下 3 件事(都是低风险高收益):

localhost 调试场景:写 React app → --chrome 开起来 → 让 Claude 自己开 localhost:3000 → 自己测自己改
GitHub PR review 场景:Claude 自己开 PR 页面 → 自己读 diff → 写评论草稿到本地(不直接 submit)
个人内容工作流:用它在 Notion / Google Docs 里草稿、整理,免去你切窗口

但不要做的:

给银行登录页授权(无论如何不要)
大规模数据爬(用 Playwright,这俩定位不同)
用 Brave / Arc(不支持就是不支持,别折腾)

🔗 延伸阅读

同系列:05-skills-system.md(skills 也能配 Chrome 用)、07-mcp-ecosystem.md(MCP-Playwright 等浏览器替代方案)
官方:Computer Use 文档 — 比 Chrome 扩展更强但更慢的兄弟功能
官方:Claude in Chrome 用户文档(独立扩展自己的 docs,包括快捷键 / 调度 / 权限)

🔗 调研来源(可校验)

主原文:https://code.claude.com/docs/en/chrome
changelog 引入:Added Claude in Chrome (Beta) feature ... https://claude.ai/chrome — 较早版本(本机 raw/scan/CHANGELOG.md 第 2509 行)
WSL 不支持的官方说明:docs Note 块明确
本机 Chrome 扩展可装:https://chromewebstore.google.com/detail/claude/fcoeoabgfenejglbffodgkkbkcdhcgfn(确认 ID fcoeoabgfenejglbffodgkkbkcdhcgfn)