Claude Code + Chrome 集成:快速设置指南

转载

这个周末我一直在使用 Claude Code + Claude Chrome 集成。它真的让我惊叹。我想在使用它的同时分享这个快速设置指南。

它实际做什么

Claude Code(终端版)连接到 Claude Chrome 浏览器扩展。所以你可以在终端中写代码,然后让 Claude 在 Chrome 中打开它,读取控制台错误,点击操作,并修复代码。所有这些都不需要复制粘贴任何东西。

现在 Claude 可以:

  • 在浏览器中打开 URL
  • 点击按钮、填写表单
  • 读取控制台错误和 DOM 状态
  • 截图和录制 GIF
  • 使用你现有的登录信息处理需要认证的网站(Gmail、Notion、Sheets)

不需要 API。不需要 token。只需要你的浏览器会话。

前置要求

在开始之前,你需要:

  • Google Chrome 浏览器
  • 付费 Claude 账户(Pro、Team 或 Enterprise)
  • Claude in Chrome 浏览器扩展(版本 1.0.36 或更高)
  • Claude Code CLI(版本 2.0.73 或更高)

⚠️ Windows 用户注意:WSL 不支持 Chrome 集成。请在常规 Windows 中运行 Claude Code。

设置步骤(5 分钟)

步骤 1:安装 Claude Code 或更新

打开终端并运行:

bash 复制代码
curl -fsSL https://claude.ai/install.sh | bash

验证安装:

bash 复制代码
claude --version

如果版本不正确或已经安装,执行更新命令:

bash 复制代码
claude --update

步骤 2:安装 Chrome 浏览器扩展

  1. 打开 Chrome 并进入 Chrome 网上应用店
  2. 搜索"Claude"或使用直接链接
  3. 点击"添加到 Chrome"
  4. 点击工具栏中的拼图图标 → 找到 Claude → 点击固定
  5. 点击 Claude 图标并使用你的 Claude 账户登录

步骤 3:连接 Claude Code 到 Chrome

在终端中,使用 chrome 标志运行 Claude Code:

bash 复制代码
claude --chrome

--chrome 标志告诉 Claude Code 连接到浏览器扩展。

步骤 4:验证连接

在 Claude Code 内部,输入:

bash 复制代码
/chrome

你应该看到:Chrome integration: Enabled(Chrome 集成:已启用)

快速测试

使用这个提示词测试:

打开 google.com,点击搜索字段,输入"Claude Code tutorial",告诉我出现什么自动补全建议。

观察 Chrome 中的 Claude:

  • 打开 Google
  • 点击搜索字段
  • 输入查询
  • 读取自动补全建议

终端和浏览器已连接。

多站点自动化

我需要你执行一个多站点工作流程:

  1. sheets.google.com 打开 Google Sheets
  2. 创建一个新的空白电子表格
  3. 将其重命名为"Latest AI News"
  4. 在第一行添加标题:Title、URL、Summary
  5. 在新标签页中打开 Hacker News(news.ycombinator.com
  6. 提取前 10 个故事的标题和 URL
  7. 将它们格式化为 markdown 列表
  8. 回到 Google Sheet
  9. 用它们的信息添加为新行
  10. 完成后告诉我并给我 Sheet URL

逐步完成这个任务。如果你遇到任何登录页面,让我知道,我会处理它们。

Claude 会做什么:创建电子表格、搜索 LinkedIn、提取数据、填充行。

关键洞察:不需要 API。Claude 使用你现有的已登录浏览器会话。

限制

当前约束:

  • 仅支持 Chrome(不支持 Arc、Firefox、Safari)
  • Windows 上不支持 WSL(参见下面的更新编辑)
  • 无 headless 模式 --- 浏览器必须可见
  • JavaScript 模态对话框(alert/confirm)可能会中断流程

不应该用于:

❌ 金融交易 ❌ 密码管理 ❌ 无人监督的生产部署

记住:Claude 使用你的已登录会话。无论你登录什么,Claude 都可以访问。请监督它。

相关推荐
与虾牵手1 天前
OpenClaw 省钱方案:2026 年我把 Claude Code 的开销砍掉 70% 的完整配置
ai编程·claude
魏嗣宗1 天前
Claude Code中长会话和 Agent 分工时提示词怎么变
claude
魏嗣宗1 天前
Claude Code 中提示词是怎么装配出来的
claude
147API1 天前
Claude 4.6 API 接入全流程避坑:OpenAI 迁移、长上下文超时、429 限流一次讲清
运维·服务器·网络·claude·api大模型
青春不败 177-3266-05201 天前
基于claude code、codex多AI协同论文写作实战营:跑通数据分析→论文初稿→AI交叉审稿全流程
人工智能·数据挖掘·数据分析·claude
斯坦SteinY1 天前
Git Worktree + Claude Code同时开发多个功能
人工智能·chatgpt·prompt·aigc·claude·并行开发
链诸葛1 天前
Claude Code 推荐指南(一):安装、CLI使用、VSCode 集成
ide·vscode·ai·编辑器·claude
有趣的老凌1 天前
一篇文章带你了解 Agent Skills —— 告别AI“失控”
前端·agent·claude
易安说AI2 天前
Claude Code 不需要单独购买:一篇讲清它是什么、和 Cursor 怎么选、国内怎么用上
claude