程序员们早就习惯了在终端里跟 AI 助手聊天、改代码、跑测试。但有一个场景始终有点绕------代码改完了，得切到浏览器里看看效果、查查报错、填填表单，然后再切回终端告诉 AI "好像还差点意思"。来回折腾几次，思路容易断。
Anthropic 最近放出了一个测试版功能，把 Claude Code 和 Chrome 浏览器直接连了起来。有了这个，AI 不光能改代码，还能自己打开浏览器、点来点去、读控制台报错、甚至帮你录操作动图。而且这一切都可以从命令行或者 VS Code 插件里完成，不用来回切换窗口。
这篇文章就来讲讲这个 Chrome 集成能做什么、怎么用，以及遇到问题怎么处理。
它到底能干些什么
把 Claude Code 连上 Chrome 之后，用户可以在同一个工作流里串起浏览器操作和代码任务。官方列了一组典型能力：
- 实时调试：Claude 可以直接读取浏览器控制台的报错信息和 DOM 状态，然后回头去修代码。
- 设计验证：根据 Figma 设计稿把界面写出来后，让 Claude 打开浏览器看一眼，确认跟原稿是否一致。
- Web 应用测试：测试表单校验逻辑、检查视觉回归问题、验证用户操作流程。
- 已登录的 Web 应用：因为 Claude 会复用 Chrome 里的登录状态，所以它可以直接操作 Google Docs、Gmail、Notion 这些需要登录的网站，不需要额外配 API。
- 数据提取：从网页里把结构化信息抓出来，存到本地。
- 任务自动化：重复的浏览器操作------比如批量录入数据、填表单、跨站点的多步流程------都可以交给 Claude 做。
- 会话录制：把浏览器里的操作录成 GIF，用来记录步骤或者跟同事分享。
开始之前需要准备什么
这个功能目前是测试版，有几个硬性要求：
- 浏览器必须是 Google Chrome 或 Microsoft Edge。Brave、Arc 以及其他 Chromium 内核的浏览器暂不支持。WSL（Windows Subsystem for Linux）也不行。
- 需要安装 Claude in Chrome 扩展，版本 1.0.36 或更高。Chrome 和 Edge 都可以从 Chrome 网上应用店装到。
- Claude Code 的版本需要在 2.0.73 或以上。
- 账号必须是 Anthropic 直营计划------Pro、Max、Teams 或 Enterprise。通过第三方提供商（比如 Amazon Bedrock、Google Cloud Vertex AI、Microsoft Foundry）访问 Claude 的用户用不了这个功能，需要单独注册一个 claude.ai 账号。
在命令行里怎么用
启动时带上 Chrome 标志
最简单的办法：启动 Claude Code 的时候加上 --chrome 参数。
bash
claude --chrome如果已经在一个会话里了，也可以直接敲 /chrome 来启用。
然后就可以给 Claude 下跟浏览器相关的指令了。比如：
整个操作过程会在一个可见的 Chrome 窗口里实时进行。Claude 会自己开新标签页，并且复用用户已经登录的网站状态------这意味着如果遇到需要登录的页面，只要用户之前在这个浏览器里登录过，Claude 就能直接进去。万一遇到登录页或验证码，Claude 会停下来，等用户手动处理完再继续。
任何时候敲 /chrome 都可以查看连接状态、管理权限或者重新连接扩展。
默认开启 Chrome
如果不想每次启动都敲 --chrome，可以在会话里运行 /chrome，然后选择"Enabled by default"。这样以后每次启动都会自动加载浏览器工具。
不过有一点需要注意：默认启用 Chrome 会增加上下文的消耗，因为浏览器工具会一直占着内存。如果发现上下文用量明显变大，可以把默认关闭，只在需要的时候用 --chrome。
站点权限管理
每个网站的权限是从 Chrome 扩展的设置里继承的。用户可以去扩展的管理界面里设置哪些网站允许 Claude 浏览、点击、输入。
几个实际的工作流例子
下面这些场景展示了怎么把浏览器操作和代码任务串在一起。用户可以在会话里敲 /mcp，然后选 claude-in-chrome 查看完整的浏览器工具列表。
测试本地 Web 应用
开发一个 Web 应用的时候，让 Claude 帮忙验证改动是否生效：
我刚更新了登录表单的校验逻辑。你打开 localhost:3000，试着用无效数据提交表单，看看错误提示有没有正常显示。
Claude 会自己导航到本地服务器、跟表单交互、然后把观察到的情况报告回来。
结合控制台日志调试
Claude 能读控制台输出，但最好告诉它具体想看什么------因为日志太多了，全看一遍效率低：
打开仪表盘页面，看看页面加载的时候控制台有没有报错。
Claude 会去读控制台消息，并且可以按特定模式或错误类型过滤。
自动填表单
处理大量重复的数据录入任务时，这个功能特别省事：
我有一张客户联系人的表格，存在 contacts.csv 里。对每一行，去 CRM 系统 crm.example.com，点击"添加联系人"，然后填入姓名、邮箱和电话。
Claude 会读取本地文件，在网页界面上导航，然后把每条记录都填进去。
在 Google Docs 里起草内容
不需要配 API，Claude 可以直接打开 Google Docs 文档，点进编辑区，然后打字：
根据最近的提交记录写一份项目进度更新，贴到我的 Google Doc 里，地址是 docs.google.com/document/d/abc123
这个思路对任何登录过的 Web 应用都适用------Gmail、Notion、在线表格，都可以。
从网页提取数据
把网页上的信息整理成结构化文件：
去商品列表页，把每个商品的名称、价格和库存情况提取出来，保存成 CSV 文件。
Claude 会浏览页面、读取内容、然后把数据整理成想要的格式。
多站点工作流
有时候一个任务要串好几个网站：
查一下我明天的日历，对每一个有外部参会人的会议，去查他们公司的官网，然后加一条备注说明这家公司是做什么的。
Claude 可以在不同的标签页之间切换，收集信息，完成整个流程。
录制演示 GIF
这个功能用来做操作演示或者文档特别方便：
录一个 GIF，演示一下从加购物车到确认页面的完整下单流程。
Claude 会把整个交互序列录下来，存成一个 GIF 文件。
遇到问题了怎么办
扩展没有被检测到
如果 Claude Code 提示"Chrome extension not detected"：
- 确认扩展已经在
chrome://extensions里安装并且处于启用状态 - 确认 Claude Code 是最新版：运行
claude --version - 确认 Chrome 在运行状态
- 运行
/chrome，选"Reconnect extension"重新建立连接 - 如果还不行，把 Claude Code 和 Chrome 都重启一次
第一次启用 Chrome 集成的时候，Claude Code 会安装一个原生消息宿主（native messaging host）配置文件。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/com.anthropic.claude_code_browser_extension.json - Linux：
~/.config/microsoft-edge/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json - Windows：注册表路径
HKCU\Software\Microsoft\Edge\NativeMessagingHosts\
浏览器没反应
如果 Claude 的浏览器指令突然不工作了：
- 检查页面上是不是有模态对话框（alert、confirm、prompt）卡住了。JavaScript 对话框会阻塞浏览器事件，让 Claude 收不到指令。手动把对话框关掉，然后告诉 Claude 继续。
- 让 Claude 开一个新标签页再试一次。
- 在
chrome://extensions里把 Chrome 扩展禁用再重新启用。
长会话期间连接断开
Chrome 扩展的 service worker 在长时间空闲后可能进入休眠，导致连接中断。如果浏览器工具用不了了，运行 /chrome 然后选"Reconnect extension"重新连一下就行。
Windows 上的特定问题
Windows 用户可能会遇到两个常见问题：
- 命名管道冲突（EADDRINUSE）：另一个进程占用了同一个命名管道。重启 Claude Code，并且关掉其他可能也在用 Chrome 的 Claude Code 会话。
- 原生消息宿主崩溃：如果宿主在启动时崩溃，试着重新安装 Claude Code，让它重新生成宿主配置。
常见错误信息速查
| 错误提示 | 原因 | 解决方法 |
|---|---|---|
| "Browser extension is not connected" | 原生消息宿主连不上扩展 | 重启 Chrome 和 Claude Code，然后运行 /chrome 重连 |
| "Extension not detected" | Chrome 扩展没装或者被禁用了 | 去 chrome://extensions 安装或启用扩展 |
| "No tab available" | Claude 在标签页准备好之前就试图操作 | 让 Claude 先开一个新标签页再试 |
| "Receiving end does not exist" | 扩展的 service worker 进入空闲了 | 运行 /chrome 选"Reconnect extension" |
还可以看看这些
如果觉得这个功能有意思，官方文档里还推荐了几个相关的主题：
- Computer use：当任务不能在浏览器里完成时（比如操作 macOS 原生应用），可以用这个功能来控制整个电脑。
- 在 VS Code 里用 Claude Code：VS Code 插件里的浏览器自动化用法。
- CLI 参考 ：包括
--chrome在内的所有命令行标志。 - 常用工作流：更多 Claude Code 的使用场景。
- 数据与隐私：Claude Code 如何处理用户数据。
- Claude in Chrome 扩展入门：扩展的完整文档，包括快捷键、定时任务和权限配置。
把 Claude Code 和 Chrome 连起来，本质上是在 AI 编程助手的工具箱里加了一个"浏览器操纵器"。它不是为了取代传统的 API 集成，而是补上了那个很常见但又不太好自动化的环节------跟需要登录的 Web 应用打交道、看界面实际渲染效果、或者处理那些没有命令行入口的网页操作。对于经常在"改代码 -- 切浏览器 -- 看效果 -- 切回来"之间反复的开发者来说，这个测试版功能或许能把那些零碎的步骤串成一条更顺畅的线。