agent-browserの評価とセットアップ

Vercel製のagent-browserをインストールして、Claude Codeからブラウザ操作する環境を整えた。基本機能はすんなり動いたが、Chrome拡張機能を絡めた検証で壁にぶつかり、3時間ほどターミナルとにらめっこすることになった。

操作	結果
Chromeプロファイル一覧取得	18件検出
headed モードで起動	ブラウザ画面が表示される
`snapshot -i`	インタラクティブ要素を@refつきで取得
`screenshot`	PNGファイルとして保存
`eval`	ページコンテキストでJS実行

会計ソフトAのChrome拡張機能を動かす検証

会計ソフトAにはChrome拡張機能があり、これをagent-browser上で動作させられるか試した。

chrome.storage.local が空になる問題

--extension オプションで拡張を読み込み、--profile Default でChromeのcookieもコピーした状態で起動する。拡張のアイコンは表示されている。しかし、拡張のポップアップを開くと初期状態に戻っていた。

原因を調べると、--profile Default がコピーするのはcookieだけで、拡張機能の chrome.storage.local はセッションごとにリセットされることがわかった。会計ソフトAの拡張はログイン情報をchrome.storage.localに保持しているため、毎回未ログイン状態で起動する。

defaults.jsonフォールバックの試み

chrome.storage.localが空なら、拡張ディレクトリに defaults.json を置いて、storage.localが空のときにフォールバックで読み込む仕組みを考えた。

// background.js に追記するイメージ
chrome.storage.local.get(null, (data) => {
  if (Object.keys(data).length === 0) {
    fetch(chrome.runtime.getURL('defaults.json'))
      .then(r => r.json())
      .then(defaults => chrome.storage.local.set(defaults));
  }
});

しかしここで次の壁が立った。chrome.runtime.getURL() で拡張内のファイルにアクセスするには、manifest.json の web_accessible_resources にそのファイルを宣言する必要がある。

{
  "web_accessible_resources": [{
    "resources": ["defaults.json"],
    "matches": ["<all_urls>"]
  }]
}

会計ソフトAの拡張はサードパーティ製で、manifest.jsonを書き換えると署名が壊れる可能性がある。そもそも、defaults.jsonにログイン情報を平文で置くこと自体がセキュリティ上の問題だ。

断念と結論

ここで一歩引いて考え直した。やりたいことは「ログイン済みの会計ソフトAをClaude Codeから操作する」こと。それなら、普段使っているChromeにそのまま接続できるChrome DevTools MCPのほうが筋がいい。

agent-browserは毎回クリーンなセッションを立てる設計で、それ自体はCI/CDやE2Eテストには正しい判断だ。ただ、ログイン済みサービスを操作する用途には合わない。

Chrome DevTools MCPとの比較

観点	agent-browser	Chrome DevTools MCP
Chrome管理	専用Chromeを自動起動	既存Chromeに接続
cookie	プロファイルからコピー（リセットあり）	そのまま利用
拡張ストレージ	空で起動	そのまま利用
拡張機能	`--extension`で明示指定	インストール済みがそのまま動く
並行セッション	`--session`で複数管理	単一Chrome接続
CI適性	headlessで動作、CI向き	headed前提、ローカル向き

使い分けの基準

agent-browserが向いている場面:

未ログインサイトのスクレイピング・テスト
CI/CDパイプラインでのE2Eテスト
クリーンな環境での再現テスト

Chrome DevTools MCPが向いている場面:

ログイン済みのSaaS操作（会計ソフト、管理画面など）
Chrome拡張機能が必要な操作
普段のブラウジング環境をそのまま使いたいとき

agent-browserの --profile Default の仕組みを追いかけたことで、「cookieのコピー」と「拡張ストレージの引き継ぎ」がまったく別のレイヤーだと体感した。Chromeのプロファイルデータは一枚岩ではなく、cookie、拡張ストレージ、ブックマーク、履歴がそれぞれ別のファイルに分かれている。agent-browserはそのうちcookieだけをコピーする設計を選んでいる。

defaults.jsonフォールバックの実装を書きかけてから断念するまで1時間ほど使ったが、「このツールの設計思想と自分の用途が合っていない」と気づけたのは収穫だった。道具の得手不得手を見極めてから手を動かすべきだった。

agent-browserの評価とセットアップ

基本動作の確認

インストール

動作テスト