Claude in Chrome 是如何工作的？
Claude in Chrome 有两种工作模式, 一种是独立的 AI 对话模式, 用户可以在插件里直接下发任务。 另一种是与 Claude Code 配合, 用户在 Claude Code 可以使用插件暴露的浏览器能力，使用用户的浏览器完成额外任务。
我们先从第一种模式开始介绍其原理
独立对话模式
逆向插件的工作方式很简单。打开 Claude Chrome 插件，右击 inspect 监控插件的网络请求，如图。
我们发现，任务执行过程中会通过不断请求 Claude 的/v1/messages 接口，这是 Claude 的官方大模型接口(类比 ChatGPT 的/chat/completions 接口)， 从请求体中我们可以拿到 system prompt 、tools 定义。 我已经开源整理在 https://github.com/AIPexStudio/system-prompts-of-claude-chrome
具体的 system prompt 比较多(40+kb)，我在这里不多做介绍，主要包含：
(1)安全防护
- 防止提示注入攻击（ prompt injection ）
- 隔离网页内容中的指令，要求用户明确确认
- 防止社会工程学攻击（冒充管理员、紧急请求等）
- 保护用户隐私和数据安全
(2) 行为规范
- 拒绝处理有害内容（暴力、色情、恶意代码等）
- 对话风格和格式要求
- 用户健康关怀（心理健康支持）
(3) 操作分类
- 禁止操作：处理银行信息、下载不可信文件、永久删除、修改安全权限等
- 需要明确许可的操作：下载文件、购买、输入财务数据、接受协议等
- 常规操作：可自动执行的操作
(4) 版权保护
- 不复制受版权保护的内容
- 引用限制（每次最多 15 个词）
- 不提供歌词等受版权保护的材料
(5) 工具使用要求
- 使用 read_page 获取页面元素引用
- 优先使用 DOM 元素引用而非坐标
- 高效读取长页面内容
(6) 运行环境相关
- 系统信息
- 键盘快捷键
(7) 多标签页管理
- 如何获取标签页信息（ tabs_context ）
- 如何在多个标签页间工作
- 创建和管理新标签页
- 标签页状态管理
(8) 响应流程控制
- 在输出响应前调用 turn_answer_start
- 确保响应流程的正确性
其中 tools 包含以下工具，按功能分类如下：
1. 页面读取与导航（ Page Reading & Navigation ）
| 工具名称 | 功能描述 |
|---|---|
read_page | 获取页面元素的无障碍树（ Accessibility Tree ）表示 |
find | 使用自然语言查询查找页面元素 |
get_page_text | 从页面提取原始文本内容 |
navigate | 导航到指定 URL 或浏览器历史记录 |
2. 交互与自动化（ Interaction & Automation ）
| 工具名称 | 功能描述 |
|---|---|
computer | 鼠标和键盘交互，以及截图功能 |
form_input | 在表单元素中设置值 |
Javascript_tool | 在页面上下文中执行 Javascript 代码 |
3. 标签页管理（ Tab Management ）
| 工具名称 | 功能描述 |
|---|---|
tabs_create | 创建新的浏览器标签页 |
tabs_context | 获取标签页的上下文信息 |
4. 媒体与文件（ Media & Files ）
| 工具名称 | 功能描述 |
|---|---|
upload_image | 上传图片到文件输入框或拖放目标 |
gif_creator | 录制并导出浏览器操作为动画 GIF |
5. 调试与监控（ Debugging & Monitoring ）
| 工具名称 | 功能描述 |
|---|---|
read_console_messages | 读取浏览器控制台消息 |
read_network_requests | 读取 HTTP 网络请求信息 |
6. 实用工具（ Utilities ）
| 工具名称 | 功能描述 |
|---|---|
resize_window | 调整浏览器窗口尺寸 |
7. 自定义工具（ Custom Tools ）
| 工具名称 | 功能描述 |
|---|---|
update_plan | 更新并向用户展示计划以获取批准 |
turn_answer_start | 标记一轮响应的开始 |
claude chrome 插件组合这些负责页面的理解、点击、填写表单、截图、调试的工具，就能完成复杂的人物。 其中 update_plan 和 turn_answer_start 是自定义工具，会在插件里有独特的 UI 展示。update_plan 会请求用户 Approve Plan 或者 Make Changes, turn_answer_start 会请求用户二次确认任务开始。图为 update_plan 的 UI 展示。
与 Claude Code 配合模式
Claude Chrome 请求了 nativeMessaging 的权限，这个权限允许扩展与本地应用程序进行双向通信。通过这个权限，Claude Chrome 可以与安装在用户电脑上的 Claude Code （或其他支持 Native Messaging 的应用程序）建立连接。
Native Messaging 的工作原理
- 权限申请：扩展在
manifest.json中声明nativeMessaging权限 - 本地应用注册：Claude Code 在系统中注册为 Native Messaging Host
- 建立连接：扩展通过标准输入输出（ stdin/stdout ）与本地应用通信
- 消息传递：使用 JSON 格式的消息进行双向数据交换
与 Claude Code 的协作流程
┌─────────────────┐ ┌──────────────────┐ ┌──────────────┐ │ Claude Code │ ───── │ Native Messaging │ ───── │ Claude Chrome│ │ (本地应用) │ JSON │ Host (桥接层) │ JSON │ (浏览器扩展) │ └─────────────────┘ └──────────────────┘ └──────────────┘ 
工作流程：
- Claude Code 发起请求：用户在 Claude Code 中请求执行浏览器操作
- 消息传递：Claude Code 通过 Native Messaging 将请求发送给 Claude Chrome 扩展
- 扩展执行：Claude Chrome 扩展在浏览器中执行相应的操作（如点击、填写表单等）
- 结果返回：操作结果通过 Native Messaging 返回给 Claude Code
- 展示结果：Claude Code 将结果展示给用户
此时，Claude Chrome 扩展就不再是个 Agent ，而只是作为 MCP server 将浏览器工具暴露给 Claude Code ， 由 Claude Code 去进行使用。
上下文效率
我尝试使用 Claude in Chrome 跑了官方给的样例
Navigate to Zillow and find me a 2-bedroom apartment in San Francisco under $4000/month. Filter for places available within the next 30 days and show me the top 3 options with photos. 我发现他运行了 10 分钟才执行完成，于是我就看了下这个过程中哪里出了问题。发现 claude chrome 插件主要用两种模式去理解页面， 一种是使用页面的无障碍树，在无障碍达成不了目标时会使用截图。
很多人可能对无障碍树没有概念，我稍微介绍一下。
无障碍树（ Accessibility Tree ）是浏览器为了支持辅助技术（如屏幕阅读器）而构建的页面结构表示。它包含了页面上所有可交互元素的语义信息，比如：
- 元素角色：按钮、链接、输入框、标题等
- 元素属性：名称、描述、状态（是否禁用、是否选中等）
- 层级关系：元素之间的父子关系和顺序
- 文本内容：元素的可读文本
相比直接解析 DOM 树，无障碍树提供了更简洁、更语义化的页面表示。对于 AI 来说，无障碍树比原始 HTML 更容易理解，因为它已经过滤掉了大量样式和布局相关的信息，只保留了功能性的语义信息。 但无障碍树是有局限性的，依赖于网站的无障碍树构建是否完善，如果网站的无障碍树构建不完善，可能会导致无障碍树的表示不准确，从而影响 AI 的理解。
这里我发现 claude chrome 的一个问题是对于同一个页面的多次快照，都保存在了上下文中，但其实过去的快照是无意义的，可以丢弃的。并且，claude in chrome 会将整个页面的无障碍树 放进上下文，在对长页面进行任务时，上下文会迅速爆炸。
另一个问题是 claude in chrome 在无障碍树失败时会使用截图，然而一次截图多大呢，100kb-500kb 不等，我这次任务截图是 335kb 。 这样的一张截图信息会一直存在于后续的上下文中，上下文的爆炸从而引起任务的慢、无效以及贵。 其实大可不必把截图信息原封不动放进上下文，为了理解页面其实可以先降低清晰度，处理之后放进上下文。AIPex 的经验是可以压缩 10-20 倍。
当然了，claude 是首个提出上下文工程的，我相信不久之后插件的上下文优化算法也会上线，敬请期待。
交互体验
claude in chrome 的 UI 让人非常舒服，用户可以记录 workflow 并进行编辑，下一次直接用命令唤起。Claude in Chrome 的一个卖点是说自己支持后台运行， 但其实 claude in chrome 的操作都依赖于 debugger 权限，而 debugger 权限在被使用时，浏览器一定会获取用户焦点，强制展示在最前端，这就使得“后台运行”成为无稽之谈。 有个做法是不使用 debugger ，但这样的话需要自己抛弃无障碍树、以及用其他方式完成点击、输入等操作。
为什么我推荐你尝试 AIPex ？
本来是抱着学习的心态使用并逆向了 Claude in Chrome 插件，但在跑完第一个用例之后，我就明白这个插件目前的上下文效率是存在很大问题的，那会导致任务的慢和低效。 AIPex 已经走过这些坑，并在上下文工程上做了很多工作，同一个任务 AIPex 能比 claude in chrome 至少快 2 倍以上，任务越复杂越明显。AIPex 的上下文核心实践已整理在了 https://www.claudechrome.com/zh/blog/ai-browser-automation-challenges. 同时 AIPex 支持 BYOK ，你可以用自己的大模型密钥免费尝试。
References
9 条回复 2026-01-13 04:07:43 +08:00
 | 1 lovestudykid 2025 年 12 月 31 日 弄个虚拟机平台托管下，然后再给一堆大 V 发邀请码试用，再安排点人上闲鱼炒作邀请码 |
 | 2 ropzislaw OP @lovestudykid 不错 可以用 AIPex 搭配 deepseek key 试一下 |
 | 3 haoxuexiaoyao 2025 年 12 月 31 日 不能使用第三方中转的 API 啊 Claude 的 |
| 4 ropzislaw OP @haoxuexiaoyao 是哪个中转方，麻烦你告诉我一下，然后中转方应该用 custom provider 尝试下 |
| 5 haoxuexiaoyao 2025 年 12 月 31 日 闲鱼买的 别人搭建的中转 API 试了不行 本地 Claude code 里面正常使用 |
| 6 ropzislaw OP @haoxuexiaoyao got ，如果你想用 claude chrome 插件的话，如果后面的 path 都是/v1/messages 。你可以通过写 etc/host 将 claude.ai 指向你的中转站试试 |
 | 7 bolasblack 5 天前 @ropzislaw 请问一下，AIPex 可以作为 mcp 服务器，或者一个 API 服务器（这样就可以包装成 Skill ）给本地的 AI 使用吗？ |
| 8 ropzislaw OP @bolasblack 目前还不支持，这方面已经在开发计划了，等好了通知你哈 |
| 9 bolasblack 3 天前 @ropzislaw 好的，期待一下，谢谢 |
Select Language