跳到正文
FunCoding

搜索

搜索文档、智能体、博客、Skill 和 MCP

配合 Chrome 使用

把 Claude Code 连到 Chrome 浏览器，测试 Web 应用、用控制台日志调试、自动填表、上传文件和提取数据：能力、前置条件、CLI 启动、站点权限、示例工作流和排障。

Claude Code 与 Claude in Chrome 浏览器扩展集成，让你从 CLI 或 VS Code 扩展里获得浏览器自动化能力：用同一个工作流构建代码，再在浏览器里测试和调试，不用切换上下文。

Claude 为浏览器任务打开新标签页，并共享浏览器的登录状态，所以能访问你已登录的任何站点。浏览器操作在可见的 Chrome 窗口里实时进行；遇到登录页或 CAPTCHA 时，Claude 会暂停并请你手动处理。

扩展把 Claude 打开的标签页收进一个绑定到你会话的 Chrome 标签组。在本地会话里，会话结束时 Claude Code 是否关闭该标签组取决于会话怎么结束：

  • 输入 /clear 时，Claude Code 关闭该组（包括已打开的页面），除非还有能跨越 clear 存活的工作在运行。
  • 用 /resume 这类命令切换会话、退出 Claude Code，或在仍有跨 clear 存活的工作时运行 /clear，只有当该组里只有空的新标签页时，Claude Code 才关闭它，所以你可能还在读的页面保持打开。

Chrome 集成适用于 Google Chrome 和 Microsoft Edge；Claude Code 还会在其他基于 Chromium 的浏览器（包括 Brave、Arc、Vivaldi 和 Opera）里检测扩展并建立连接。Windows Subsystem for Linux（WSL）里不支持 Chrome 集成。

能力

连上 Chrome 后，你可以在一个工作流里把浏览器操作和编码任务串起来：

  • 实时调试：直接读取控制台错误和 DOM 状态，再修复引起它们的代码。
  • 设计验证：根据 Figma 稿构建 UI，然后在浏览器里打开，验证是否一致。
  • Web 应用测试：测试表单验证、检查视觉回归或验证用户流程。
  • 已认证的 Web 应用：无需 API 连接器，就能与 Google Docs、Gmail、Notion 或你登录的任何应用交互。
  • 数据提取：从网页提取结构化信息并保存到本地。
  • 任务自动化：自动化重复的浏览器任务，如数据录入、填表或多站点工作流。
  • 文件上传：把本机文件附加到网页的上传字段。
  • 会话录制：把浏览器交互录成 GIF，用于记录或分享发生了什么。

前提条件

  • Google Chrome、Microsoft Edge，或 Brave、Arc、Vivaldi、Opera 这类基于 Chromium 的浏览器。
  • Chrome Web Store 里的 Claude in Chrome 扩展，版本 1.0.36 或更高。
  • Claude Code。
  • 直接的 Anthropic 套餐（Pro、Max、Team 或 Enterprise）。

Chrome 集成还要求用 /login 登录。如果你用 API key 或 claude setup-token 生成的长期令牌认证，即使传了 --chrome，Claude Code 也会让 Chrome 集成保持关闭，因为浏览器扩展无法用这些凭据认证（v2.1.216 之前，这类会话可以启用 Chrome 集成，但每次连接浏览器扩展的尝试都以 403 错误失败）。

Chrome 集成不适用于 Amazon Bedrock、Google Cloud 的 Agent Platform 或 Microsoft Foundry 这类第三方提供商。如果你只通过第三方提供商访问 Claude，需要另有一个 claude.ai 账号才能使用这个功能。

在 CLI 里开始

1. 用 Chrome 启动 Claude Code。 带 --chrome 标志启动：

claude --chrome

第一次带 Chrome 启动时，Claude Code 会显示一次性对话框，介绍这个集成并说明站点权限如何运作，按 Enter 继续。要在以后的会话里无需标志就启用 Chrome，见「默认启用 Chrome」。

2. 让 Claude 使用浏览器。 这个例子导航到页面、与之交互并报告发现，全部在终端或编辑器里完成：

Go to code.claude.com/docs, click on the search box,
type "hooks", and tell me what results appear

如果 Claude Code 在浏览器操作前请求权限，就批准它；对话框以 Claude in Chrome wants to 开头，并提供「本会话允许该站点上的所有操作」的选项。Claude 随后打开新标签页并开始任务。

随时运行 /chrome 检查连接状态、管理权限、重连扩展，或选择使用哪个已连接的浏览器。状态面板显示「Status: Enabled」和「Extension: Installed」时，集成就在正常工作。

如果连接了多个浏览器，由你选择 Claude 使用哪个：浏览器操作在你选择之前开始时，Claude 会提示你挑一个；之后要切换，运行 /chrome 并选择 Select browser…，即使别的浏览器后来连接，Claude 也会继续使用你的选择。VS Code 的用法见 VS Code 页的浏览器自动化一节。

Claude 询问时安装扩展

在交互会话里 Claude 需要你的浏览器而 Claude Code 没有检测到扩展时，会显示标题为「Claude wants to use your browser」的安装提示，每个会话最多问一次。提示有三个选项：

  • Install extension：在浏览器里打开扩展安装页并开始引导式设置。Claude Code 等待安装、连接扩展，并在同一会话里启用浏览器工具；连接就绪时选「Continue with browser tools」，Claude 在浏览器里继续任务。你可以选「Continue without browser tools」离开设置，稍后用 /chrome 完成。
  • Not now：不带浏览器工具继续任务，Claude Code 在之后的会话里可能再次询问。
  • Don't ask again：在以后的会话里不再提示，你仍然可以随时用 /chrome 设置集成。

两种托管 MCP 策略会关闭这个提示：组织用 deniedMcpServers 托管设置阻止了 claude-in-chrome MCP 服务器；或组织部署了 managed-mcp.json 文件，却没有在托管集合之外允许 Claude in Chrome。

默认启用 Chrome

要避免每个会话都传 --chrome，运行 /chrome 并选「Enabled by default」。Chrome 没运行时 Claude Code 也正常启动（v2.1.211 之前，启用了 Chrome 集成但 Chrome 没运行时，启动可能挂起）。在 VS Code 扩展里，只要安装了 Chrome 扩展，Chrome 就可用，无需额外标志。

注意：在 CLI 里默认启用 Chrome 会增加上下文用量，因为浏览器工具始终被加载。如果发现上下文消耗增加，就关掉这个设置，只在需要时用 --chrome。

管理站点权限

站点级权限继承自 Chrome 扩展：在 Chrome 扩展设置里管理权限，控制 Claude 能浏览、点击和输入的站点。在 auto 模式下，当 auto 模式分类器自己批准了对某站点的浏览器调用时，扩展对该调用跳过自己的逐站点检查，除非你的权限规则对 Claude in Chrome 拒绝了任何站点。

plan 模式下的浏览器工具

在 plan 模式下，Claude 录制 GIF、打开新标签页或运行快捷方式之前会出现权限提示。如果你的会话里 bypass permissions 模式可用且功能标志获取被关闭，这些调用无需提示就运行。设置了 createIfEmpty 的 tabs_context_mcp 调用也会提示，包含这些操作之一的 browser_batch 调用同样如此。

示例工作流

这些例子展示把浏览器操作与编码任务结合的常见方式。运行 /mcp，选 claude-in-chrome，再选 View tools 可以看到全部可用的浏览器工具。

测试本地 Web 应用

开发 Web 应用时，让 Claude 验证你的改动是否正确：

I just updated the login form validation. Can you open localhost:3000,
try submitting the form with invalid data, and check if the error
messages appear correctly?

Claude 导航到你的本地服务器，与表单交互，并报告观察到的情况。

用控制台日志调试

Claude 可以读取控制台输出来帮助诊断问题。告诉 Claude 要找哪些模式，而不是要全部控制台输出，因为日志可能很冗长：

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

Claude 读取控制台消息，并能按特定模式或错误类型过滤。

自动填表

加速重复的数据录入任务：

I have a spreadsheet of customer contacts in contacts.csv. For each row,
go to the CRM at crm.example.com, click "Add Contact", and fill in the
name, email, and phone fields.

Claude 读取你的本地文件，导航 Web 界面，并为每条记录录入数据。

向网页上传文件

Claude 可以把你机器上的文件附加到页面的上传字段。Claude Code 读取文件并把内容发给浏览器，所以本地和远程会话都能上传（需要 Claude Code v2.1.211 或更高）。这个例子把日志文件附加到表单：

Open the bug tracker at bugs.example.com, create a new issue,
and attach logs/session.log to it

上传有三条限制：

  • 权限：只有会话被允许读取某文件时 Claude 才能上传它，所以拒绝对该文件 Read 访问的权限规则也会阻止上传。
  • 大小：单次上传的文件总共最多 10 MB。
  • 硬链接：Claude 拒绝有多个硬链接的文件，这在 node_modules 这类包管理器存储里很常见；复制该文件并上传副本。

在 Google Docs 里起草内容

用 Claude 直接在你的文档里写作，无需 API 设置：

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

Claude 打开文档、点进编辑器并输入内容。这适用于你登录的任何 Web 应用：Gmail、Notion、Sheets 等。

从网页提取数据

从网站提取结构化信息：

Go to the product listings page and extract the name, price, and
availability for each item. Save the results as a CSV file.

Claude 导航到页面、读取内容，并把数据整理成结构化格式。

运行多站点工作流

协调跨多个网站的任务：

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

Claude 跨标签页收集信息并完成工作流。

录制演示 GIF

创建可分享的浏览器交互录制：

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

Claude 录制交互序列并保存为 GIF 文件。录制会捕获浏览器里所有可见内容，包括已登录页面上的账号信息，所以在团队之外分享前要先检查。

把截图保存到磁盘

让 Claude 把截图保存为文件：

Take a screenshot of the checkout page and save it to disk

Claude 把图像存到磁盘并报告文件路径（v2.1.211 之前，截图工具的 save_to_disk 选项不会写文件）。

排障

检测不到扩展

如果 Claude Code 检测不到 Chrome 扩展：

  1. 确认扩展已在 chrome://extensions 里安装并启用。
  2. 运行 claude --version 确认 Claude Code 是最新的。
  3. 检查 Chrome 在运行。
  4. 运行 /chrome 并选「Reconnect extension」重建连接。
  5. 问题仍在时，重启 Claude Code 和 Chrome。

第一次启用 Chrome 集成时，Claude Code 会安装一个 native messaging host 配置文件。Chrome 在启动时读取该文件，所以首次尝试没检测到扩展的话，重启 Chrome 以加载新配置。Claude Code 只在首次安装时打开浏览器标签页提示你连接扩展；之后的会话重写配置文件（例如切换构建或配置目录）时不会再次打开。

如果连接仍然失败，确认主机配置文件存在于：

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：查看 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\

其他基于 Chromium 的浏览器从各自以浏览器命名的配置目录读取同一个文件：例如 macOS 上的 Brave 用 ~/Library/Application Support/BraveSoftware/Brave-Browser/NativeMessagingHosts/，Windows 上每个浏览器有自己的注册表键，如 HKCU\Software\BraveSoftware\Brave-Browser\NativeMessagingHosts\。

浏览器没有响应

如果 Claude 的浏览器命令不再起作用：

  1. 检查是否有模态对话框（alert、confirm、prompt）挡住了页面。JavaScript 对话框会阻塞浏览器事件，使 Claude 收不到命令；手动关掉对话框，再告诉 Claude 继续。
  2. 让 Claude 新建标签页再试。
  3. 在 chrome://extensions 里禁用再重新启用 Chrome 扩展来重启它。

长会话中连接断开

在长时间会话里，Chrome 扩展的 service worker 可能进入空闲，从而断开连接。如果闲置一段时间后浏览器工具不再工作，运行 /chrome 并选「Reconnect extension」。

Windows 特有问题

在 Windows 上可能遇到：

  • 命名管道冲突（EADDRINUSE）：另一个进程正在使用同一个命名管道时，重启 Claude Code，并关闭可能在使用 Chrome 的其他 Claude Code 会话。
  • Native messaging host 错误：host 在启动时崩溃的话，尝试重装 Claude Code 以重新生成 host 配置。
  • 设置页打不开：更新 Claude Code（v2.1.211 之前，提示你连接扩展的浏览器标签页在 Windows 上可能打不开）。

常见错误信息

错误原因修复
"Browser extension is not connected"Native messaging host 到不了扩展，或你组织的 IP 允许列表拒绝了到 bridge.claudeusercontent.com 的连接重启 Chrome 和 Claude Code，再运行 /chrome 重连；如果你的组织用 IP 允许列表且错误仍在，见网络配置里「组织 IP 允许列表和代理出口」
/chrome 里扩展显示 "Not detected"Chrome 扩展没有安装或被禁用在 chrome://extensions 里安装或启用扩展
"No tab available"Claude 在标签页就绪前就尝试操作让 Claude 新建标签页并重试
"Receiving end does not exist"扩展 service worker 进入了空闲运行 /chrome 并选「Reconnect extension」

另见

  • 计算机使用：任务无法在浏览器里完成时，控制原生 macOS 应用。
  • 在 VS Code 里使用 Claude Code：VS Code 扩展里的浏览器自动化。
  • CLI 参考：包括 --chrome 在内的命令行标志。
  • 数据与隐私：Claude Code 如何处理你的数据。
  • Claude in Chrome 入门（官方支持文档）：Chrome 扩展的完整文档，包括快捷方式、定时和权限。