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. 工作原理

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. 工作原理

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 方案对比

四、安装与使用

1. 安装步骤

A. 在 Claude Code 中添加插件

# 添加插件市场源
/plugin marketplace add sawyerhood/dev-browser

# 安装 Dev Browser Skill
/plugin install dev-browser@sawyerhood/dev-browser

B. 安装 Chrome 扩展

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 原文分享
2. Dev Browser GitHub 仓库