开源ClaudeChrome：在浏览器侧边栏实现Agent智能交互

背景

尽管 Anthropic 已经推出了官方的 Claude for Chrome 插件，但该插件并未开源，且早期仅对 MAX 订阅用户开放（近期因开源风波政策有所调整）。此外，开发者在实际工作中经常需要结合使用 OpenAI 的 Codex 等模型，而现有的官方工具链缺乏统一的、开源的浏览器集成方案。

在此背景下，开发者构建了一个名为 ClaudeChrome 的开源项目。其核心初衷是提供一个基础实现，将 Claude 和 Codex 的能力深度集成到浏览器环境中，不仅支持定制化开发，也为未来支持更多浏览器或 Agent CLI 预留了扩展空间。该项目旨在解决 Agent 仅能获取用户手动粘贴的有限信息的问题，转而让 Agent 能够直接访问当前浏览器标签页的完整上下文。

核心内容

ClaudeChrome 是一个基于 Chrome 侧边栏（Side Panel）运行的浏览器扩展，它允许用户在浏览器内直接运行 Claude、Codex 或 Shell 命令。该项目的核心设计理念是将每个 Agent 会话（Session）绑定到一个真实的浏览器标签页，并支持在过程中重新绑定（Rebind）。

技术架构与工作流

• 上下文感知：Agent 不再依赖用户手动输入，而是直接读取当前标签页的页面文本、HTML 结构、网络请求、控制台日志等浏览器上下文。
• 交互能力：支持执行 JavaScript 代码，以及模拟 click、scroll 等页面交互操作。
• 本地优先与安全：除了 LLM API 调用和必要的浏览器访问外，整个链路（包括 Agent Session、交互记录、本地文件保存）均在本地运行。这种架构确保了数据的安全性，并允许 Agent 直接操作本地环境。
• MCP Server 集成：项目自行实现了 MCP（Model Context Protocol）Server，用于自动页面交互。虽然目前 Shell 功能尚不完善，但为未来插件脚本手动调用浏览器接口留出了空间。
• 多工作区管理：支持多 Workspace 和多 Pane 视图组织，方便用户同时管理不同的任务上下文。

演示场景与应用 项目作者通过多个演示展示了 ClaudeChrome 的持续交互和自动化能力：

1. 2048 游戏操作：展示 Agent 在视觉元素环境中进行长链路、持续交互的能力，而非一次性读取。
2. Amazon 商品详情收集：展示网页爬取能力，包括处理页面跳转、滚动交互，并保持会话与标签页绑定。
3. LINUX DO 论坛话题总结：展示爬取论坛内容并结合用户要求执行 JavaScript 命令的能力。
4. OpenClaw 展示页风格拟合：展示浏览器扩展能力，通过模仿现有网站原生设计相似风格，比手动拷贝样式表更准确。
5. 知识摄取与文本选中：展示与 Tapestry 项目的集成。无需调用 Tapestry 自带的爬虫，即可将页面内容直接写入本地知识库，并支持基于页面选中文本触发动作。

后续规划

• 体验优化：针对 Agent 对 MCP Tools 调用的体验进行优化，特别是通过 System Prompt 预设，让 Agent 更主动地意识到其处于浏览器领域内，从而更自然地执行页面操作。
• 跨平台测试：目前主要在 Chrome、MacOS 和 Linux 上测试，未来将加强跨平台兼容性。
• 社区维护：鼓励用户提交 Issue 和 PR，项目将长期维护。

关键要点

• 开源与本地化：项目完全开源，核心链路在本地运行，保障了数据隐私和安全。
• 深度浏览器集成：通过 Chrome Side Panel 实现，Agent 可直接访问 HTML、Console、Network 等深层浏览器上下文，支持 JS 执行和模拟交互。
• 模型中立性：不仅支持 Anthropic 的 Claude，也兼容 OpenAI 的 Codex，解决了单一模型绑定的痛点。
• 会话绑定机制：每个 Session 绑定到真实标签页，支持动态切换和重新绑定，确保 Agent 操作的上下文一致性。
• 与 Tapestry 的生态联动：ClaudeChrome 可作为数据摄取前端，将浏览内容直接写入 Tapestry 个人知识库，形成“浏览-摄取-管理”的闭环，绕过传统爬虫需求。
• 当前局限性：Shell 功能目前较弱，主要依赖 MCP Server；Agent 有时需显式提示（如提及“标签页”）才能正确触发浏览器操作，后续将通过 System Prompt 优化。

意义与影响

ClaudeChrome 的出现填补了开源社区在“通用智能浏览器交互”领域的空白。它不仅仅是一个简单的聊天插件，而是一个将 LLM Agent 深度嵌入浏览器工作流的工具。

1. 提升 Agent 的感知与行动能力：通过提供完整的浏览器上下文（HTML、DOM、网络状态），Agent 能够从“被动接收信息”转变为“主动感知和操作”，极大地扩展了 LLM 在 Web 自动化、数据提取和界面测试等场景的应用边界。
2. 推动 MCP 协议的落地实践：项目通过自研 MCP Server 实现页面交互，为 MCP 协议在浏览器自动化场景下的具体实现提供了参考案例，有助于推动 Agent 标准化接口的普及。
3. 强化个人知识管理（PKM）工作流：通过与 Tapestry 的集成，展示了从“被动阅读”到“主动知识摄取”的新范式。用户无需复杂的爬虫配置，即可利用 AI 将浏览内容结构化地存入本地知识库，契合了 Karpathy 等人倡导的 LLM-powered 个人知识库理念。
4. 促进开源 AI 工具链的发展：在官方插件不开源或受限的背景下，ClaudeChrome 提供了一个自由、可定制的替代方案，鼓励开发者基于此构建更多浏览器端的 AI 应用，推动了 AI Agent 生态的多样化。