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

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

---

Dev Browserが重要なのはなぜ

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

これらの機能により、Claude Codeエージェントはテスト、データ収集、インタラクティブデモで実務的な優位性を持ちます。

---

クイックスタートガイド

1. 前提条件

   • Claude Code CLI がインストール済み
   • Node.js v18+ と npm

2. スキルのインストール

   # 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
   

3. （オプション）Chrome拡張機能

   • リリースページから最新の extension.zip をダウンロード。
   • 永続的な場所（例：~/.dev-browser-extension）に解凍。
   • Chrome の拡張機能ページで開発者モードをオンにし、フォルダをアンパックして読み込み。
   • 拡張機能を有効にし、Claudeに "connect to my Chrome" と頼む。

4. サンプルインタラクションを実行

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