claude-chrome

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Claude in Chrome Skill

Claude in Chrome 技能

Control your real Chrome browser with Claude. The extension runs in your authenticated browser session, so Claude can interact with sites you're already logged into - Gmail, Google Docs, Notion, CRMs, and more.

使用Claude控制真实的Chrome浏览器。该扩展在您已验证的浏览器会话中运行，因此Claude可以与您已登录的网站交互——Gmail、Google Docs、Notion、CRM等。

Integration Options

集成方式

There are two ways to control Chrome:

Claude Code + Chrome Extension - Terminal-based browser control via
```
claude --chrome
```
Chrome DevTools MCP - MCP server providing 26 browser automation tools

Both use your real Chrome with existing logins - no re-authentication needed.

有两种控制Chrome的方式：

Claude Code + Chrome扩展 - 通过
```
claude --chrome
```
实现基于终端的浏览器控制
Chrome DevTools MCP - 提供26种浏览器自动化工具的MCP服务器

两种方式均使用您已登录的Chrome浏览器，无需重新验证身份。

Option 1: Claude Code + Chrome Extension

方式1：Claude Code + Chrome扩展

Prerequisites

前提条件

Google Chrome browser
Claude in Chrome extension (v1.0.36+) from Chrome Web Store
Claude Code CLI (v2.0.73+)
Paid Claude plan (Pro, Team, Enterprise, or Max)

Google Chrome浏览器
Chrome应用商店中的Claude in Chrome扩展（v1.0.36及以上版本）
Claude Code CLI（v2.0.73及以上版本）
付费Claude计划（Pro、Team、Enterprise或Max）

Setup

设置步骤

Update Claude Code:

bash

claude update

Start with Chrome enabled:

bash

claude --chrome

Check connection status:

/chrome

Enable Chrome by default:

/chrome

更新Claude Code：

bash

claude update

启用Chrome功能后启动：

bash

claude --chrome

检查连接状态：

/chrome

设置Chrome为默认启用：

/chrome

Select "Enabled by default"

选择“默认启用”

undefined

undefined

Browser Capabilities

浏览器功能

Navigation & Interaction:

Navigate to URLs
Click elements (buttons, links, form fields)
Type text into inputs
Scroll pages
Create and manage tabs
Resize windows

Information Retrieval:

Read page content and DOM state
Access console logs and errors
Monitor network requests
Extract structured data from pages

Advanced:

Fill forms automatically
Record browser actions as GIFs
Chain browser + terminal commands
Work across multiple tabs

导航与交互：

导航至指定URL
点击元素（按钮、链接、表单字段）
在输入框中输入文本
滚动页面
创建和管理标签页
调整窗口大小

信息获取：

读取页面内容和DOM状态
访问控制台日志和错误信息
监控网络请求
从页面提取结构化数据

高级功能：

自动填写表单
将浏览器操作录制为GIF
串联浏览器与终端命令
在多个标签页间协同工作

Example Prompts

示例提示词

Basic Navigation

基础导航

Go to github.com/anthropics and click on the "Code" tab

前往github.com/anthropics并点击“Code”标签页

Form Testing

表单测试

Open localhost:3000, try submitting the login form with invalid data,
and check if error messages appear correctly

打开localhost:3000，尝试使用无效数据提交登录表单，检查错误信息是否正确显示

Console Debugging

控制台调试

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

打开仪表板页面，检查页面加载时控制台是否有错误

Data Extraction

数据提取

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

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

Authenticated Workflows

已验证会话工作流

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

基于最近的提交记录起草项目更新，并添加到我的Google文档：docs.google.com/document/d/abc123

Form Automation

表单自动化

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

我有一个contacts.csv文件，针对每一行数据，前往crm.example.com，点击“添加联系人”，并填写姓名、邮箱和电话字段。

Record Demo GIF

录制演示GIF

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

录制一个展示从添加商品到购物车到确认页面的结账流程的GIF

How It Works

工作原理

Extension uses Chrome's Native Messaging API to receive commands
Claude opens new tabs for tasks (doesn't take over existing tabs)
Uses your browser's login state - no re-authentication needed
Pauses for CAPTCHAs, login prompts, or modal dialogs (you handle, then continue)

扩展使用Chrome的Native Messaging API接收命令
Claude会为任务打开新标签页（不会占用现有标签页）
利用浏览器的登录状态，无需重新验证身份
遇到验证码、登录提示或模态对话框时会暂停（您手动处理后，Claude会继续执行）

Troubleshooting

故障排除

Extension not detected:

bash

claude --version  # Should be 2.0.73+

Then run

/chrome

and select "Reconnect extension"

Browser not responding:

Check for blocking modal dialogs (alert, confirm, prompt)
Ask Claude to create a new tab and retry
Restart Chrome extension (disable/re-enable in chrome://extensions)

扩展未被检测到：

bash

claude --version  # 版本需为2.0.73+

然后运行

/chrome

并选择“重新连接扩展”

浏览器无响应：

检查是否有阻塞的模态对话框（警告、确认、提示）
让Claude创建新标签页并重试
重启Chrome扩展（在chrome://extensions中禁用后重新启用）

Option 2: Chrome DevTools MCP

方式2：Chrome DevTools MCP

An alternative/complementary approach using Model Context Protocol.

一种使用Model Context Protocol的替代/补充方案。

Installation

安装

bash

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

Or add to MCP config:

json

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

bash

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

或添加到MCP配置文件：

json

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

Available Tools (26 total)

可用工具（共26种）

Input Automation (8 tools):

```
click
```
- Click elements
```
drag
```
- Drag and drop
```
fill
```
- Fill input fields
```
fill_form
```
- Fill entire forms
```
handle_dialog
```
- Handle alerts/confirms/prompts
```
hover
```
- Hover over elements
```
press_key
```
- Keyboard input
```
upload_file
```
- Upload files

Navigation (6 tools):

```
navigate_page
```
- Go to URL
```
new_page
```
- Create new tab
```
close_page
```
- Close tab
```
list_pages
```
- List open pages
```
select_page
```
- Switch to page
```
wait_for
```
- Wait for element/condition

Debugging (5 tools):

```
take_screenshot
```
- Capture page
```
take_snapshot
```
- Capture DOM
```
evaluate_script
```
- Run JavaScript
```
get_console_message
```
- Get console log
```
list_console_messages
```
- Get all logs

Network (2 tools):

```
list_network_requests
```
- List requests
```
get_network_request
```
- Get request details

Performance (3 tools):

```
performance_start_trace
```
- Start tracing
```
performance_stop_trace
```
- Stop tracing
```
performance_analyze_insight
```
- Analyze results

Emulation (2 tools):

```
emulate
```
- Emulate device
```
resize_page
```
- Resize viewport

输入自动化（8种工具）：

```
click
```
- 点击元素
```
drag
```
- 拖放操作
```
fill
```
- 填充输入字段
```
fill_form
```
- 填充整个表单
```
handle_dialog
```
- 处理警告/确认/提示对话框
```
hover
```
- 悬停在元素上
```
press_key
```
- 键盘输入
```
upload_file
```
- 文件上传

导航（6种工具）：

```
navigate_page
```
- 前往指定URL
```
new_page
```
- 创建新标签页
```
close_page
```
- 关闭标签页
```
list_pages
```
- 列出所有打开的页面
```
select_page
```
- 切换到指定页面
```
wait_for
```
- 等待元素/条件

调试（5种工具）：

```
take_screenshot
```
- 捕获页面截图
```
take_snapshot
```
- 捕获DOM快照
```
evaluate_script
```
- 运行JavaScript代码
```
get_console_message
```
- 获取控制台消息
```
list_console_messages
```
- 获取所有控制台日志

网络（2种工具）：

```
list_network_requests
```
- 列出网络请求
```
get_network_request
```
- 获取请求详情

性能（3种工具）：

```
performance_start_trace
```
- 开始性能追踪
```
performance_stop_trace
```
- 停止性能追踪
```
performance_analyze_insight
```
- 分析追踪结果

模拟（2种工具）：

```
emulate
```
- 模拟设备
```
resize_page
```
- 调整视口大小

Configuration Options

配置选项

bash

undefined

bash

undefined

Connect to running Chrome

连接到已运行的Chrome

npx chrome-devtools-mcp@latest --browser-url http://localhost:9222

Headless mode

无头模式

npx chrome-devtools-mcp@latest --headless

Custom viewport

自定义视口

npx chrome-devtools-mcp@latest --viewport 1920x1080

Use Chrome Canary

使用Chrome Canary版本

npx chrome-devtools-mcp@latest --channel canary

---

npx chrome-devtools-mcp@latest --channel canary

---

Claude in Chrome Extension Features

Claude in Chrome扩展功能

Workflow Shortcuts

工作流快捷方式

Create reusable shortcuts (type "/" in extension):

Record a workflow:

Click cursor icon or type "/" → "Record workflow"
Perform actions while Claude watches
Claude generates shortcut with name, description, URL

Save from conversation:

Click "Convert to task" on conversation header
Or hover over a sent prompt and save it

创建可复用的快捷方式（在扩展中输入"/"）：

录制工作流：

点击光标图标或输入"/" → "录制工作流"
执行操作，Claude会全程记录
Claude会生成包含名称、描述和URL的快捷方式

从对话中保存：

点击对话标题上的“转换为任务”
或悬停在已发送的提示词上并保存

Scheduled Tasks

定时任务

Set recurring browser automation:

When creating shortcut, toggle "Schedule"
Set frequency: daily, weekly, monthly, annually
Choose date/time and model
Claude runs automatically with notifications

Example scheduled tasks:

Daily inbox cleanup at 9am
Weekly competitor scan every Monday
Monthly expense report filing

设置重复执行的浏览器自动化任务：

创建快捷方式时，开启“定时”开关
设置执行频率：每天、每周、每月、每年
选择日期/时间和模型
Claude会自动执行任务并发送通知

示例定时任务：

每天上午9点清理收件箱
每周一扫描竞争对手信息
每月提交费用报告

Multi-Tab Workflows

多标签页工作流

Claude can see and work across tabs in the same tab group:

Reference information from multiple tabs
Copy data between tabs
Coordinate actions across sites

Claude可以查看并在同一标签页组的多个标签页间协同工作：

参考多个标签页中的信息
在标签页间复制数据
跨网站协调操作

Workflow Examples

工作流示例

Email Management:

/inbox-cleanup
Archive emails from newsletters, star emails mentioning deadlines,
delete obvious spam

Research:

/competitor-scan
Check competitor blogs, pricing pages, and careers pages.
Summarize any changes since last week.

Form Filling:

/vendor-application
Fill vendor application form using our company documents.
Pause before final submission for review.

Meeting Prep:

/stakeholder-map
Research LinkedIn profiles of meeting attendees.
Summarize their backgrounds and priorities.

邮件管理：

/inbox-cleanup
归档新闻通讯邮件，标注重提及截止日期的邮件，删除明显的垃圾邮件

调研：

/competitor-scan
查看竞争对手的博客、定价页面和招聘页面。总结自上周以来的任何变化。

表单填写：

/vendor-application
使用公司文档填写供应商申请表。提交前暂停等待审核。

会议准备：

/stakeholder-map
调研会议参与者的LinkedIn资料。总结他们的背景和优先事项。

Best Practices

最佳实践

When to Use Browser Automation

何时使用浏览器自动化

Good for:

Form filling and data entry
Button clicking and navigation
Extracting data from authenticated pages
Testing web applications
Executing predefined workflows
Tasks behind logins

Better manually:

One-click tasks (faster by hand)
Subjective decisions
Exploratory research (use Claude.ai chat instead)

适用场景：

表单填写和数据录入
按钮点击和导航
从已验证页面提取数据
测试Web应用
执行预定义工作流
需要登录的任务

更适合手动操作：

一键式任务（手动操作更快）
需要主观判断的决策
探索性调研（建议使用Claude.ai聊天）

Tips

技巧

Be specific - Ambiguous instructions produce inconsistent results
Add verification - For long lists, add "verify you completed all items"
Handle modals - Dismiss alerts manually, then tell Claude to continue
Use fresh tabs - If a tab becomes unresponsive, ask for a new one
Filter console output - Specify patterns vs. requesting all logs

明确指令 - 模糊的指令会导致结果不一致
添加验证步骤 - 对于长列表，添加“验证所有任务已完成”
处理模态框 - 手动关闭警告框后，告知Claude继续执行
使用新标签页 - 如果标签页无响应，让Claude创建新标签页
过滤控制台输出 - 指定模式，而非请求所有日志

Security

安全性

Site-level permissions control which sites Claude can access
High-risk actions (publish, purchase, share data) require confirmation
Some site categories blocked (financial services, adult content)
Manage permissions in extension settings

网站级权限控制Claude可访问的网站
高风险操作（发布、购买、共享数据）需要确认
部分网站类别被阻止（金融服务、成人内容）
在扩展设置中管理权限

Common Workflows for Clawdbot

Clawdbot常用工作流

Testing Local Development

本地开发测试

"Open localhost:3000, test the new form validation, check console for errors,
and screenshot any issues you find"

"打开localhost:3000，测试新的表单验证功能，检查控制台是否有错误，并截图所有问题"

Authenticated Data Extraction

已验证数据提取

"Go to my Google Analytics, get this week's traffic summary,
and save it to a file"

"前往我的Google Analytics，获取本周的流量摘要，并保存到文件"

Content Management

内容管理

"Open my Notion workspace, find the Q4 planning doc,
and add a new section with today's meeting notes"

"打开我的Notion工作区，找到Q4规划文档，并添加一个包含今日会议记录的新章节"

Email Drafts

邮件草稿

"Open Gmail, find unread emails from the engineering team,
and draft replies for each one without sending"

"打开Gmail，找到来自工程团队的未读邮件，并为每封邮件起草回复但不发送"

Multi-Site Research

跨网站调研

"Compare pricing on our product page vs the top 3 competitors.
Create a markdown table with the differences."

"对比我们产品页面与前三名竞争对手的定价。创建一个包含差异的Markdown表格。"

Requirements

系统要求

Component	Minimum Version
Google Chrome	Latest stable
Claude in Chrome Extension	1.0.36+
Claude Code CLI	2.0.73+
Claude Plan	Pro, Team, Enterprise, or Max
Node.js (for DevTools MCP)	20.19+

Not supported:

Other Chromium browsers (Brave, Arc, Edge)
WSL (Windows Subsystem for Linux)
Headless mode (for extension; DevTools MCP supports headless)
Mobile devices

组件	最低版本
Google Chrome	最新稳定版
Claude in Chrome扩展	1.0.36+
Claude Code CLI	2.0.73+
Claude计划	Pro、Team、Enterprise或Max
Node.js（用于DevTools MCP）	20.19+

不支持的环境：

其他Chromium浏览器（Brave、Arc、Edge）
WSL（Windows Subsystem for Linux）
无头模式（扩展不支持；DevTools MCP支持无头模式）
移动设备