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 都可以访问。请监督它。

相关推荐
冬奇Lab14 小时前
Hook 机制实战:让 ClaudeCode 主动通知你
ai编程·claude
jackyrongvip17 小时前
一个简单的羊毛claude-4.6最新版本的方法
ai·claude
南宫乘风20 小时前
Claude Code 从 0 到 1 实战全攻略:掌握下一代编程 Agent 的核心能力
ai·claude·mcp
七牛云行业应用3 天前
3.5s降至0.4s!Claude Code生产级连接优化与Agent实战
运维·人工智能·大模型·aigc·claude
zhanglianzhao3 天前
Win 11 WSL 配置Claude code 并在VsCode中使用
ide·vscode·编辑器·claude·cladue code
北杳同学4 天前
Claude Code安装与初始化
ai·claude
Cynthia的梦7 天前
踩坑实录:在E盘部署Node.js+Claude-Code环境的完整流程(附路径冲突解决方案)
claude
roamingcode7 天前
我是如何 Vibe Coding,将 AI CLI 工具从 Node.js 迁移到 Rust 并成功发布的
人工智能·rust·node.js·github·claude·github copilot
壮Sir不壮7 天前
2026年奇点:Clawdbot引爆个人AI代理
人工智能·ai·大模型·claude·clawdbot·moltbot·openclaw
玉梅小洋7 天前
Claude Code 从入门到精通(七):Sub Agent 与 Skill 终极PK
人工智能·ai·大模型·ai编程·claude·ai工具