在 Chrome 中使用 Claude Code（Beta）

Claude Code 可以通过 Claude in Chrome 浏览器扩展获得浏览器自动化能力。写完代码，直接在浏览器里测试和调试，不需要来回切换上下文。

Chrome 集成目前是 Beta 版，支持 Google Chrome 和 Microsoft Edge，暂不支持 Brave、Arc 或其他 Chromium 浏览器。WSL（Windows Subsystem for Linux）也不支持。

能做什么？

功能	说明
实时调试	直接读取控制台错误和 DOM 状态，修复导致问题的代码
设计验证	根据 Figma 稿构建 UI，在浏览器里验证还原度
Web 应用测试	测试表单验证、检查视觉回归、验证用户流程
已认证应用	操作 Google Docs、Gmail、Notion 等你已登录的应用（无需 API 连接器）
数据提取	从网页提取结构化信息保存到本地
任务自动化	数据录入、表单填写、跨站工作流自动化
录制 GIF	录制浏览器交互过程生成 GIF，方便分享演示

Claude 打开新标签页来执行浏览器任务，共享你浏览器的登录状态，可以访问你已登录的任何网站。遇到登录页或 CAPTCHA 时，Claude 会暂停并让你手动处理。

使用前提

• Google Chrome 或 Microsoft Edge 浏览器
• Claude in Chrome 扩展 v1.0.36+（Chrome Web Store 可安装）
• Claude Code v2.0.73+
• claude.ai 直接订阅计划（Pro、Max、Teams 或 Enterprise）

不支持通过第三方云服务商（Amazon Bedrock、Google Cloud Vertex AI、Microsoft Foundry）的访问方式。如果你只有第三方账号，需要额外注册 claude.ai 账号才能使用此功能。

开始使用（CLI）

第一步：启动时开启 Chrome 集成

claude --chrome

或在已有会话里输入 /chrome 开启。

第二步：让 Claude 使用浏览器

前往 code.claude.com/docs，点击搜索框，输入 "hooks"，告诉我出现了哪些结果

默认开启 Chrome（避免每次都加 --chrome）：

运行 /chrome，选择"Enabled by default"。

默认开启会增加上下文用量（浏览器工具始终加载）。如果发现上下文消耗增加，可关闭此设置，改为按需使用 --chrome。

查看可用浏览器工具：运行 /mcp 选择 claude-in-chrome。

---

实用场景示例

测试本地 Web 应用

我刚更新了登录表单验证。你能打开 localhost:3000，尝试提交无效数据，
检查错误提示是否正确显示吗？

用控制台日志调试

打开 dashboard 页面，检查页面加载时控制台里有什么错误

告诉 Claude 要找什么模式，而不是要求获取所有控制台输出（日志可能很多）。

自动填写表单

我有个客户联系人列表存在 contacts.csv 里。对每一行，
去 crm.example.com 点击"添加联系人"，填写姓名、邮箱和电话。

在 Google Docs 里起草内容

根据最近的 commits，起草一份项目更新报告，添加到我的 Google Doc
docs.google.com/document/d/abc123

提取网页数据

去产品列表页，提取每个商品的名称、价格和库存状态，保存为 CSV 文件

跨站工作流

查看我明天的日历，对每个有外部参与者的会议，查找他们的公司网站，
添加一条关于他们业务的备注

录制演示 GIF

录制一个 GIF，展示从把商品加入购物车到确认页面的完整结帷流程

---

故障排查

未检测到扩展

1. 确认 Chrome 扩展已安装并在 chrome://extensions 中启用
2. 运行 claude --version 检查版本
3. 确认 Chrome 正在运行
4. 运行 /chrome 选择"Reconnect extension"

第一次启用 Chrome 集成时，Claude Code 会安装本地消息主机配置文件。Chrome 在启动时读取此文件，所以如果首次尝试未检测到扩展，重启 Chrome 再试。

验证配置文件位置：

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：

• macOS：~/Library/Application Support/Microsoft Edge/NativeMessagingHosts/
• Linux：~/.config/microsoft-edge/NativeMessagingHosts/

浏览器不响应

1. 检查页面是否有 JavaScript 对话框（alert/confirm/prompt）阻塞——手动关闭后告诉 Claude 继续
2. 让 Claude 新建标签页重试
3. 在 chrome://extensions 禁用后重新启用扩展

长时间会话连接断开

Chrome 扩展的 service worker 可能在长时间不活动后进入休眠，导致连接断开。运行 /chrome 选择"Reconnect extension"重新连接。

Windows 特有问题

• 命名管道冲突 (EADDRINUSE)：重启 Claude Code，关闭其他正在使用 Chrome 的 Claude Code 会话
• 本地消息主机崩溃：重新安装 Claude Code 以重新生成主机配置

常见错误

错误	原因	解决方法
"Browser extension is not connected"	本地消息主机无法连接扩展	重启 Chrome 和 Claude Code，运行 /chrome 重连
"Extension not detected"	扩展未安装或已禁用	在 chrome://extensions 安装或启用
"No tab available"	Claude 在标签页准备好前就尝试操作	让 Claude 新建标签页重试
"Receiving end does not exist"	扩展 service worker 进入休眠	运行 /chrome 选择"Reconnect extension"

---

相关文档

• VS Code Chrome 自动化 — VS Code 中的浏览器自动化
• CLI 参考 — 包含 --chrome 等命令行参数
• 常用工作流 — 更多 Claude Code 使用场景