Loading... # Dev Browser：基于 Claude Code Skill 的浏览器自动化插件技术分析 # 一、概述 ## 1. 简介 ### A. 是什么 Dev Browser 是一个基于 Claude Code Skill 的浏览器自动化插件，由开发者 sawyerhood 创建。它通过 Chrome 扩展程序的形式，允许 Claude Code 直接控制用户现有的 Chrome 浏览器，相比传统的 Playwright MCP 服务器方案具有显著优势。 ### B. 为什么值得关注 - 速度更快：直接控制现有浏览器实例，无需每次启动新进程 - 保持登录状态：复用用户的浏览器会话，避免重复登录 - 更好的用户体验：无需处理无痕浏览器的限制 ### C. 适用场景 - 需要频繁进行浏览器自动化任务的开发者 - 需要保持登录状态进行网页操作的场景 - 追求执行效率和用户体验的 Claude Code 用户 ## 2. 前置知识 ### A. 必备技能 - Claude Code 基本使用 - Chrome 浏览器扩展程序安装 - 基本的命令行操作 ### B. 相关概念 - MCP（Model Context Protocol）：OpenAI 提出的模型上下文协议 - Claude Code Skill：Claude Code 的技能扩展机制 - Playwright：浏览器自动化测试框架 # 二、背景与问题 ## 1. 传统方案：Playwright MCP ### A. 工作原理 ```mermaid graph LR A[Claude Code] -->|MCP 协议| B[Playwright MCP Server] B -->|启动| C[新无痕浏览器] C -->|访问| D[目标网站] C -->|执行| E[自动化操作] ```  ### B. 存在的问题 - 速度慢：每次任务都需要启动新的浏览器实例 - 无登录状态：使用无痕浏览器，需要重新登录 - 资源浪费：频繁创建和销毁浏览器进程 - 用户体验差：无法利用用户已有的浏览器配置和扩展 ## 2. 改进方案：Dev Browser Skill ### A. 设计理念 直接控制用户现有的 Chrome 浏览器，通过扩展程序接收 Claude Code 的指令。 ### B. 核心优势 - 复用现有浏览器：无需启动新进程 - 保持会话状态：登录信息、Cookie 持久化 - 执行效率高：直接操作 DOM，响应迅速 - 用户友好：可见的浏览器操作，便于调试 # 三、技术架构 ## 1. 系统组成 ### A. 核心组件 - Chrome 扩展程序：监听并执行浏览器操作指令 - Claude Code Skill：解析用户意图，生成浏览器控制命令 - 消息传递机制：扩展程序与 Skill 之间的通信桥梁 ### B. 工作原理 ```mermaid sequenceDiagram participant U as 用户 participant C as Claude Code participant S as Dev Browser Skill participant E as Chrome 扩展 participant B as Chrome 浏览器 U->>C: 输入指令：调用 Dev Browser C->>S: 传递用户意图 S->>E: 发送控制命令 E->>B: 执行浏览器操作 B-->>E: 返回执行结果 E-->>S: 返回状态信息 S-->>C: 返回操作结果 C-->>U: 显示结果 ```  ## 2. 与 MCP 方案对比 | 对比项 | Playwright MCP | Dev Browser Skill | |-------|---------------|-------------------| | 启动方式 | 每次新建浏览器实例 | 复用现有浏览器 | | 速度 | 慢（启动开销大） | 快（直接操作） | | 登录状态 | 无（无痕模式） | 有（用户会话） | | 可见性 | 后台运行 | 前台可见 | | 调试难度 | 较高 | 较低 | | 扩展支持 | 有限 | 完全支持 | # 四、安装与使用 ## 1. 安装步骤 ### A. 在 Claude Code 中添加插件 ```bash # 添加插件市场源 /plugin marketplace add sawyerhood/dev-browser # 安装 Dev Browser Skill /plugin install dev-browser@sawyerhood/dev-browser ``` ### B. 安装 Chrome 扩展 ```mermaid graph TD A[GitHub 仓库] -->|下载| B[扩展程序源码] B -->|加载| C[chrome://extensions] C -->|开发者模式| D[Dev Browser 扩展] D -->|就绪| E[接收 Claude Code 指令] ```  **详细步骤**： 1. 访问 GitHub 仓库：github.com/sawyerhood/dev 2. 下载扩展程序源码 3. 打开 Chrome 浏览器，访问 chrome://extensions 4. 启用"开发者模式" 5. 点击"加载已解压的扩展程序" 6. 选择下载的扩展程序文件夹 ## 2. 使用方法 ### A. 基本调用 通过自然语言指令调用 Dev Browser： ``` 调用 Dev Browser，帮我打开 Google 并搜索 "Claude Code" ``` ### B. 支持的操作 - 页面导航：打开 URL、前进、后退 - 元素交互：点击、输入、滚动 - 信息提取：获取页面文本、截图 - 表单操作：填写表单、提交数据 # 五、技术细节 ## 1. 通信机制 ### A. Skill 到扩展 Claude Code Skill 通过某种通信机制（可能是 WebSocket 或 HTTP）与 Chrome 扩展建立连接，传递操作指令。 ### B. 扩展到浏览器 Chrome 扩展使用 Chrome Extension API（如 chrome.tabs、chrome.scripting）执行实际的浏览器操作。 ## 2. 安全考虑 ### A. 权限控制 扩展程序需要申请以下权限： - activeTab：访问当前活动标签页 - scripting：执行脚本 - tabs：管理标签页 ### B. 本地通信 Skill 与扩展之间的通信可能在本地进行，减少安全风险。 # 六、应用场景 ## 1. 自动化测试 - 网页功能测试 - 兼容性测试 - 回归测试 ## 2. 数据采集 - 网页内容抓取 - 数据监控 - 竞品分析 ## 3. 日常操作 - 批量表单填写 - 自动化工作流 - 网页截图 # 七、限制与注意事项 ## 1. 技术限制 - 仅支持 Chrome 浏览器 - 需要保持浏览器运行状态 - 扩展程序更新可能影响功能 ## 2. 使用建议 - 仅在可信环境使用 - 定期检查扩展程序权限 - 注意保护敏感信息 # 八、未来展望 ## 1. 可能的改进方向 - 支持更多浏览器（Firefox、Edge） - 增强的录制与回放功能 - 更丰富的操作指令集 ## 2. 生态影响 - 降低浏览器自动化门槛 - 推动 Claude Code 生态发展 - 促进 AI 辅助开发工具创新 # 九、总结 Dev Browser 通过创新的设计，解决了传统 Playwright MCP 方案在速度和用户体验方面的痛点。它充分利用 Chrome 扩展程序的能力，实现了对现有浏览器的直接控制，为 Claude Code 用户提供了一种更高效的浏览器自动化解决方案。 这种基于 Skill 的插件化架构，也为 Claude Code 生态系统的扩展提供了良好的示范。随着更多开发者参与，我们有望看到更多类似的创新插件涌现。 *** ## 参考资料 1. [Twitter 原文分享](https://x.com/Pluvio9yte/status/2013628522032411063?s=19) 2. [Dev Browser GitHub 仓库](https://github.com/sawyerhood/dev) 最后修改：2026 年 01 月 21 日 © 允许规范转载 赞 如果觉得我的文章对你有用，请随意赞赏