claude-chrome

Claude in Chrome 技能

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

集成选项

有两种控制 Chrome 的方式：

1. Claude Code + Chrome 扩展程序 - 通过 claude --chrome 进行基于终端的浏览器控制
2. Chrome DevTools MCP - 提供 26 种浏览器自动化工具的 MCP 服务

两种方式都使用你已登录账号的真实 Chrome，无需重新进行身份验证。

---

选项 1：Claude Code + Chrome 扩展程序

前提条件

• Google Chrome 浏览器
• Chrome Web Store 中的 Claude in Chrome 扩展程序（v1.0.36+）
• Claude Code CLI（v2.0.73+）
• 付费 Claude 计划（Pro、Team、Enterprise 或 Max）

设置

更新 Claude Code：

claude update

启用 Chrome 并启动：

claude --chrome

检查连接状态：

/chrome

默认启用 Chrome：

/chrome
# Select "Enabled by default"

浏览器功能

导航与交互：

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

信息检索：

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

高级功能：

• 自动填写表单
• 将浏览器操作录制为 GIF
• 串联浏览器和终端命令
• 跨多个标签页操作

示例提示词

基本导航

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

表单测试

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

控制台调试

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

数据提取

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

已验证身份的工作流

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

表单自动化

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.

录制演示 GIF

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

工作原理

1. 扩展程序使用 Chrome 的 Native Messaging API 接收命令
2. Claude 会为任务打开新标签页（不会接管现有标签页）
3. 使用浏览器的登录状态，无需重新进行身份验证
4. 遇到 CAPTCHA、登录提示或模态对话框时会暂停（由你处理后再继续）

故障排除

未检测到扩展程序：

claude --version  # Should be 2.0.73+

然后运行 /chrome 并选择“重新连接扩展程序”

浏览器无响应：

• 检查是否有阻止操作的模态对话框（alert、confirm、prompt）
• 让 Claude 创建新标签页并重试
• 重启 Chrome 扩展程序（在 chrome://extensions 中停用后重新启用）

---

选项 2：Chrome DevTools MCP

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

安装

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

或添加到 MCP 配置中：

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

可用工具（共 26 种）

输入自动化（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 - 调整视口大小

配置选项

# Connect to running 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
npx chrome-devtools-mcp@latest --channel canary

---

Claude in Chrome 扩展程序功能

工作流快捷方式

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

记录工作流：

1. 点击光标图标或输入“/” → “记录工作流”
2. 在 Claude 观察时执行操作
3. Claude 会生成包含名称、描述和 URL 的快捷方式

从对话中保存：

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

定时任务

设置定期浏览器自动化：

1. 创建快捷方式时，启用“定时”
2. 设置频率：每天、每周、每月、每年
3. 选择日期/时间和模型
4. Claude 会自动运行并发送通知

定时任务示例：

• 每天上午 9 点清理收件箱
• 每周一扫描竞争对手
• 每月归档费用报告

多标签页工作流

Claude 可以查看并跨同一标签页组中的多个标签页进行操作：

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

工作流示例

电子邮件管理：

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

研究：

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

填写表单：

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

会议准备：

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

---

最佳实践

何时使用浏览器自动化

适用于：

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

手动操作更好：

• 只需一次点击的任务（手动更快）
• 主观判断
• 探索性研究（改用 Claude.ai 聊天）

提示

1. 明确具体——含糊的指令会导致结果不一致
2. 添加验证步骤——处理较长的列表时，添加“确认已完成所有项目”
3. 处理模态框——手动关闭警报，然后告诉 Claude 继续
4. 使用新的标签页——如果标签页无响应，请让 Claude 新开一个
5. 筛选控制台输出——指定匹配模式，而不是要求输出所有日志

安全

• 网站级权限控制 Claude 可以访问哪些网站
• 高风险操作（发布、购买、共享数据）需要确认
• 某些网站类别会被屏蔽（金融服务、成人内容）
• 在扩展设置中管理权限

---

Clawdbot 的常见工作流

测试本地开发

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

提取已通过身份验证的数据

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

内容管理

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

电子邮件草稿

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

多网站研究

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

---

要求

组件	最低版本
Google Chrome	最新稳定版
Claude in Chrome Extension	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（适用于 Linux 的 Windows 子系统）
• 无头模式（扩展不支持；DevTools MCP 支持无头模式）
• 移动设备