Dev Browser：Claude Code 的有状态浏览器自动化

随着 AI 代理在编写代码方面变得越来越出色，下一步的自然进阶是赋予它们与真实网页交互的能力。Dev Browser 是一款开源的 Claude Code 技能，正是执行此功能——并在调用之间保持浏览器状态。

为什么 Dev Browser 重要

• 持久页面 — 只需导航一次页面并将其保存在内存中。无需为每个脚本重新加载 DOM。
• 灵活执行 — 既可一次性运行完整脚本，也可逐步执行操作，方便探索。
• LLM 友好的 DOM 快照 — 结构化、轻量化的页面表示，Claude 能快速解析。
• Chrome 扩展 — 控制现有 Chrome 配置文件，利用已登录会话、Cookie 以及扩展。

这些功能为 Claude Code 代理在测试、数据提取和互动演示上提供了实用优势。

快速开始指南

1. 先决条件
2. 已安装 Claude Code CLI

3. Node.js v18+ 及 npm

4. 安装技能

   # 使用 Claude Code 市场
   /plugin marketplace add sawyerhood/dev-browser
   /plugin install dev-browser@sawyerhood/dev-browser
   
   # 或者克隆仓库进行本地开发
   SKILLS_DIR=~/.claude/skills   # Amp
   # SKILLS_DIR=~/.codex/skills # Codex
   mkdir -p $SKILLS_DIR
   git clone https://github.com/sawyerhood/dev-browser /tmp/dev-browser-skill
   cp -r /tmp/dev-browser-skill/skills/dev-browser $SKILLS_DIR/dev-browser
   rm -rf /tmp/dev-browser-skill
   

5. （可选）Chrome 扩展
6. 从发布页下载最新的 extension.zip。
7. 在永久位置解压，例如 ~/.dev-browser-extension。
8. 在 Chrome 的扩展页面开启开发者模式，加载 unpacked 文件夹。
9. 启用扩展并让 Claude 说“连接到我的 Chrome”。
10. 执行示例交互

    Claude: Open https://example.com and take a screenshot.