dev-browserでChromeを操る Claude Codeブラウザ自動化入門

AIエージェントにブラウザを持たせる方法が、大きく変わりつつあります。

スクリーンショットを撮って、座標を指定して、ページが変わるたびに再認識させる――これまでのブラウザ自動化はこの繰り返しでした。処理が遅く、コストも高い。dev-browserは、その問題をまるごと解決するCLIツールです。

この記事でわかること：

dev-browserの仕組みと従来ツールとの違い
インストール方法と基本的な使い方
Claude Codeへの統合手順
Playwright MCP・Claude Chrome拡張との速度・コスト比較

ブラウザ自動化の何が問題だったか

従来のAIエージェントがブラウザを操作する方法は、大きく2つありました。スクリーンショットを撮って画像として渡す方法と、MCPサーバー経由でPlaywrightを操作する方法です。

前者はトークン消費が膨大で処理が重く、後者はMCPの往復通信がボトルネックになります。Claude Chrome拡張は使い勝手がよい一方、1タスクあたり平均12分54秒・$2.81かかるという計測結果が出ています（参考）。

dev-browserはこれらの課題を、「Playwright操作をスクリプトとして直接渡す」という方法で解決します。

dev-browserとは

https://github.com/SawyerHood/dev-browser

Do Browserが提供するオープンソースのCLIツールです。AIエージェントやデベロッパーが、JavaScriptスクリプトを使ってブラウザをサンドボックス環境から制御します。

スクリプトはQuickJS WASMのサンドボックス内で実行されるため、ホストのファイルシステムやネットワークへのアクセスはありません。エージェントに渡す操作ロジックをスクリプトとして一括実行できるため、MCPのような往復通信が不要です。

主な機能

サンドボックス実行
スクリプトはQuickJS WASMサンドボックスで動作します。ホスト環境に直接アクセスできない設計なので、エージェントに実行させても安全です。

ページの永続化
browser.getPage("main") のように名前付きページを管理すると、一度ナビゲートしたページに対して複数のスクリプトから連続して操作できます。毎回ページを再読み込みする必要がなくなります。

自動接続
既存のChromeインスタンスに接続する（--connect）か、新規Chromiumを起動する（--headless）かを選べます。ログイン済みのセッションをそのまま使いたい場合は --connect が便利です。

Playwright API フル対応
ページオブジェクトは完全なPlaywright Pageです。goto、click、fill、locator、evaluate、screenshotといった操作が全て使えます。AIエージェント向けにpage.snapshotForAI()も用意されており、ページの構造をAIが読みやすい形式で取得できます。

インストールと基本的な使い方

npmでグローバルインストールします。

npm install -g dev-browser
dev-browser install   # Playwright + Chromium をインストール

ヘッドレスモードでスクリプトを実行する例：

dev-browser --headless <<'EOF'
const page = await browser.getPage("main");
await page.goto("https://example.com", { waitUntil: "domcontentloaded" });
console.log(await page.title());
EOF

起動中のChromeに接続する場合は、まずChromeをリモートデバッグポートつきで起動し（chrome://inspect/#remote-debugging で有効化）、--connect オプションを指定します。

dev-browser --connect <<'EOF'
const tabs = await browser.listPages();
console.log(JSON.stringify(tabs, null, 2));
EOF

料金

dev-browserはMITライセンスで公開されているオープンソースツールです。ライブラリ自体は無料で利用できます。スクリプトを実行するためにClaudeなどのLLM APIを呼び出す場合は、そのAPI利用料が別途かかります。

他ツールとのベンチマーク比較

同一タスクで4つのブラウザ自動化ツールを比較した結果が公開されています（dev-browser-eval）。

ツール	時間	コスト	ターン数	成功率
dev-browser	3分53秒	$0.88	29	100%
Playwright MCP	4分31秒	$1.45	51	100%
Playwright Skill	8分07秒	$1.45	38	67%
Claude Chrome拡張	12分54秒	$2.81	80	100%

dev-browserはPlaywright MCPと比べてコストが約40%低く、ターン数も29対51と大幅に少ない結果です。Claude Chrome拡張との比較では時間が約3分の1、コストは約3分の1になっています。

ターン数が少ない理由は、操作をスクリプトにまとめてエージェントに渡すため、LLMとの往復回数が減るからです。1ターンで複数のブラウザ操作を実行できる構造が、速度とコストの両方に効いています。

Claude Codeへの組み込み方

インストール後にエージェントへ dev-browser --help を実行するよう伝えるだけで動作します。ヘルプ出力にLLM向けの使い方ガイドとAPIリファレンスが含まれているため、追加のプラグインやスキル設定は不要です。

Claude Codeで毎回許可プロンプトが出るのが気になる場合は、.claude/settings.json に以下を追加して事前承認できます。

{
  "permissions": {
    "allow": [
      "Bash(dev-browser *)"
    ]
  }
}

dev-browserのスクリプトはQuickJS WASMサンドボックスで動くためホスト環境へのアクセスはなく、この設定を有効にしても安全です。

まとめ

dev-browserはAIエージェントのブラウザ自動化を、シンプルなCLIスクリプトで完結させるツールです。スクリーンショット方式のトークン消費と、MCP往復通信のレイテンシを同時に避けられる設計になっています。

ベンチマークでは既存ツールを上回る速度とコスト効率を示しており、Claude Codeとの組み合わせで実用的なブラウザ操作エージェントをすぐに構築できます。