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

相关推荐
孟陬4 小时前
从 Claude Code 187 种说“正在处理”的方式看一流公司的用户体验
前端·claude·bun
汤姆百宝箱7 小时前
Anthropic《创始人手册:打造AI原生创业公司》Claude(中文精读版)完整38页pdf
claude·anthropic·创始人手册·打造ai原生创业公司
AndrewHZ13 小时前
【大模型通关指南】3. 全球主流大模型全栈对比(含Google I/O最新Gemini,2026.05.20)
人工智能·深度学习·大模型·openai·claude·gemini·deepseek
小云小白14 小时前
IDEA Java 开发 AI 工具对比与安装指南
ai·idea·claude
李坤1 天前
让 Codex 和 Claude 互相 Review:告别手动复制
人工智能·openai·claude
本末倒置1831 天前
别再复制粘贴了!一行命令把网页变成干净的 Markdown
claude·vibecoding
代码北人生1 天前
后端工程师开始用 Claude Code 了,Stripe 4天完成了本来要10个工程师周的迁移
后端·claude
用户223586218201 天前
如何在超大型的工程中使用 Claude Code?
前端·ios·claude
haibindev1 天前
别让AI再从零写一堆优美的屎山了
c++·ai编程·claude·流媒体·codex·代码复用
小碗细面1 天前
Agents 编排工具 - OMC 和 Ruflo,到底该怎么选?
ai编程·claude