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 天前
『AI辅助Skill』掌握三大AI设计Skill:前端独立完成产品设计全流程
前端·人工智能·claude·skill
有梦想的攻城狮1 天前
claude code中的skills如何使用
claude·编程工具
gdutxiaoxu2 天前
一个 skill ,增加大模型前端的审美能力
claude·claude code·skills
学统计的程序员3 天前
一篇文章简述如何安装claude code并接入国产智谱AI大模型
人工智能·ai编程·claude
打小就很皮...3 天前
Claude + Skills 快速生成PPT
人工智能·claude·skills
无双@4 天前
保姆级 安装+使用上 Claude Code
ai·大模型·agent·claude·配置·claude code·skills
敲代码的小霖4 天前
Claude Skill for kingbase 人大金仓
claude·skills
小仓桑5 天前
OpenCode 入门教程:介绍 · 安装 · 配置第三方 API (如 Claude)
ai编程·claude·opencode
sg_knight5 天前
Claude Code 与 ChatGPT、Copilot 有什么区别?
人工智能·chatgpt·llm·copilot·claude·ai大模型·claude-code
win4r6 天前
🚀2026年Skills元年正式开启!谷歌Antigravity支持Agent Skills,彻底改写传统AI编程!保姆级教程从安装到创建到调用!UI UX Pro Max Skills实测效果超预期
agent·claude·vibecoding