{/* TRANSLATED — 已翻译为中文 */}

> ## 文档索引
> 在此获取完整文档索引：https://code.claude.com/docs/llms.txt
> 使用此文件发现所有可用页面，然后再进一步探索。

# 在 Chrome 中使用 Claude Code（测试版）

> 将 Claude Code 连接到你的 Chrome 浏览器，以测试 Web 应用、使用控制台日志调试、自动填充表单以及从网页中提取数据。

Claude Code 与 [Claude in Chrome 浏览器扩展](https://chromewebstore.google.com/detail/claude/fcoeoabgfenejglbffodgkkbkcdhcgfn)集成，为你提供从 CLI 或 [VS Code 扩展](/en/vs-code#automate-browser-tasks-with-chrome)进行浏览器自动化的能力。构建代码后，无需切换上下文即可在浏览器中测试和调试。

Claude 会为浏览器任务打开新标签页，并共享你浏览器的登录状态，因此它可以访问你已登录的任何网站。浏览器操作在可见的 Chrome 窗口中实时运行。当 Claude 遇到登录页面或验证码时，它会暂停并请求你手动处理。

<Note>
  Chrome 集成目前处于测试版，适用于 Google Chrome 和 Microsoft Edge。暂不支持 Brave、Arc 或其他基于 Chromium 的浏览器。WSL（Windows Subsystem for Linux）也不受支持。
</Note>

## 功能

连接 Chrome 后，你可以在单个工作流中将浏览器操作与编码任务串联：

* **实时调试**：直接读取控制台错误和 DOM 状态，然后修复导致它们的代码
* **设计验证**：从 Figma 模型构建 UI，然后在浏览器中打开以验证是否匹配
* **Web 应用测试**：测试表单验证、检查视觉回归或验证用户流程
* **已认证的 Web 应用**：与 Google Docs、Gmail、Notion 或你已登录的任何应用交互，无需 API 连接器
* **数据提取**：从网页中提取结构化信息并本地保存
* **任务自动化**：自动化重复的浏览器任务，如数据输入、表单填充或多站点工作流
* **会话录制**：将浏览器交互录制为 GIF，用于记录或分享发生的事情

## 前提条件

在使用 Claude Code 与 Chrome 之前，你需要：

* [Google Chrome](https://www.google.com/chrome/) 或 [Microsoft Edge](https://www.microsoft.com/edge) 浏览器
* [Claude in Chrome 扩展](https://chromewebstore.google.com/detail/claude/fcoeoabgfenejglbffodgkkbkcdhcgfn) 1.0.36 或更高版本，在 Chrome Web Store 中为两个浏览器提供
* [Claude Code](/en/quickstart#step-1-install-claude-code) 2.0.73 或更高版本
* 直接 Anthropic 计划（Pro、Max、Team 或 Enterprise）

<Note>
  Chrome 集成不适用于 Amazon Bedrock、Google Cloud Vertex AI 或 Microsoft Foundry 等第三方提供商。如果你仅通过第三方提供商访问 Claude，则需要单独的 claude.ai 账户才能使用此功能。
</Note>

## 在 CLI 中开始使用

<Steps>
  <Step title="启动带 Chrome 的 Claude Code">
    使用 `--chrome` 标志启动 Claude Code：

    ```bash theme={null}
    claude --chrome
    ```

    你也可以在现有会话中通过运行 `/chrome` 来启用 Chrome。
  </Step>

  <Step title="让 Claude 使用浏览器">
    此示例导航到一个页面、与其交互并报告发现的内容，全部从你的终端或编辑器中完成：

    ```text theme={null}
    Go to code.claude.com/docs, click on the search box,
    type "hooks", and tell me what results appear
    ```
  </Step>
</Steps>

随时运行 `/chrome` 来检查连接状态、管理权限或重新连接扩展。

关于 VS Code，请参阅 [VS Code 中的浏览器自动化](/en/vs-code#automate-browser-tasks-with-chrome)。

### 默认启用 Chrome

为避免每次会话都传递 `--chrome`，运行 `/chrome` 并选择 "Enabled by default"。

在 [VS Code 扩展](/en/vs-code#automate-browser-tasks-with-chrome)中，只要安装了 Chrome 扩展，Chrome 就可用。无需额外标志。

<Note>
  在 CLI 中默认启用 Chrome 会增加上下文使用量，因为浏览器工具始终被加载。如果你注意到上下文消耗增加，请禁用此设置，仅在需要时使用 `--chrome`。
</Note>

### 管理站点权限

站点级权限从 Chrome 扩展继承。在 Chrome 扩展设置中管理权限，以控制 Claude 可以在哪些站点上浏览、点击和输入。

## 示例工作流

这些示例展示了将浏览器操作与编码任务结合的常见方式。运行 `/mcp` 并选择 `claude-in-chrome` 查看可用浏览器工具的完整列表。

### 测试本地 Web 应用

开发 Web 应用时，让 Claude 验证你的更改是否正常工作：

```text theme={null}
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 要查找什么模式，而不是要求所有控制台输出，因为日志可能很冗长：

```text theme={null}
Open the dashboard page and check the console for any errors when
the page loads.
```

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

### 自动填充表单

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

```text theme={null}
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 界面，并为每条记录输入数据。

### 在 Google Docs 中起草内容

使用 Claude 直接在你的文档中编写内容，无需 API 设置：

```text theme={null}
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 等。

### 从网页中提取数据

从网站中提取结构化信息：

```text theme={null}
Go to the product listings page and extract the name, price, and
availability for each item. Save the results as a CSV file.
```

Claude 导航到页面，读取内容并将数据编译为结构化格式。

### 运行多站点工作流

跨多个网站协调任务：

```text theme={null}
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

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

```text theme={null}
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 Code 显示 "Chrome extension not detected"：

1. 在 `chrome://extensions` 中验证 Chrome 扩展已安装并启用
2. 运行 `claude --version` 验证 Claude Code 是最新的
3. 检查 Chrome 是否正在运行
4. 运行 `/chrome` 并选择 "Reconnect extension" 以重新建立连接
5. 如果问题仍然存在，请重启 Claude Code 和 Chrome

首次启用 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**：在 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**：在 Windows 注册表中检查 `HKCU\Software\Microsoft\Edge\NativeMessagingHosts\`

### 浏览器无响应

如果 Claude 的浏览器命令停止工作：

1. 检查是否有模态对话框（alert、confirm、prompt）阻止了页面。JavaScript 对话框会阻止浏览器事件并阻止 Claude 接收命令。手动关闭对话框，然后告诉 Claude 继续。
2. 让 Claude 创建新标签页并重试
3. 通过在 `chrome://extensions` 中禁用并重新启用来重启 Chrome 扩展

### 长时间会话中连接中断

Chrome 扩展的服务工作线程在长时间会话中可能会空闲，从而中断连接。如果浏览器工具在一段时间不活动后停止工作，请运行 `/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"     | 扩展服务工作线程已空闲                           | 运行 `/chrome` 并选择 "Reconnect extension"                     |

## 另请参阅

* [计算机使用](/en/computer-use)：当任务无法在浏览器中完成时控制原生 macOS 应用
* [在 VS Code 中使用 Claude Code](/en/vs-code#automate-browser-tasks-with-chrome)：VS Code 扩展中的浏览器自动化
* [CLI 参考](/en/cli-reference)：命令行标志，包括 `--chrome`
* [常见工作流](/en/common-workflows)：更多使用 Claude Code 的方式
* [数据和隐私](/en/data-usage)：Claude Code 如何处理你的数据
* [Claude in Chrome 入门](https://support.claude.com/en/articles/12012173-getting-started-with-claude-in-chrome)：Chrome 扩展的完整文档，包括快捷方式、调度和权限