Dev Browser: 状態保持型ブラウザ自動化 for Claude Code

AIエージェントがコードを書けるようになってきた今、その次に取るべき論理的なステップは、実際のウェブページと対話できるようにすることです。Dev Browser はClaude Code用のオープンソーススキルで、まさにそれを実現し、呼び出し間でブラウザの状態を保持します。

Dev Browserが重要なのはなぜ

• 永続的なページ – ページを一度開いてメモリに保持します。実行するスクリプトごとにDOMを再読み込みする必要がありません。
• 柔軟な実行 – 一度に完全なスクリプトを実行するか、探索中にアクションをステップごとに進めるか選べます。
• LLM向けDOMスナップショット – Claudeが高速に解析できる、構造化で軽量なページ表現です。
• Chrome拡張機能 – 既存のChromeプロファイルを制御し、ログイン済みセッション、クッキー、拡張機能を活用できます。

これらの機能により、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 の拡張機能ページで開発者モードをオンにし、フォルダをアンパックして読み込み。
9. 拡張機能を有効にし、Claudeに "connect to my Chrome" と頼む。
10. サンプルインタラクションを実行

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