コンテンツにスキップ
Zenn Dev Akasara Articles 34cbb34e29475b

Claude Code × Chrome で調査書・手順書をまるごと自動生成する

  • URL: https://zenn.dev/akasara/articles/34cbb34e29475b
  • 日付: 2026-06-26
  • Tier: Tier 3
  • 要旨: 「claude –chrome」の1コマンドでClaude CodeとChromeを連携させると、ブラウザのページ遷移・クリック・フォーム入力・スクショ取得をAIに委譲でき、調査書や手順書の生成を自動化できる。既存のブラウザセッションをそのまま共用するためログイン画面をAIが突破する必要がなく、CAPTCHA等に到達した時点で人間に制御を戻す設計だ。Google フォームでのデモでは34枚のスクショを撮影しながら約12分で手順書を生成した。コンテキスト消費が重い点はサブエージェントへの分離で吸収でき、親セッションには最終テキストのみが返る構造が有効だ。ただし対応ブラウザはChrome/Edgeのみで、BraveやWSL環境では動作しない。

詳細

Claude Code × Chrome連携(claude –chrome)を使ってブラウザ操作を自動化し、調査書・手順書を生成する実践記事。Google フォーム作成の12分デモを含む。

アーキテクチャと機能:

  • Claude in Chrome拡張をMCPで接続する連携機能(2025年後半ベータ提供開始)
  • ページ遷移・クリック・フォーム入力・スクショ取得・GIF録画に対応
  • DevToolsのconsole log・ネットワークリクエスト読み取りが可能
  • ログインセッションをそのまま共用。CAPTCHA・ログイン画面で自動停止し人間に委譲
  • 対応ブラウザ: Chrome/Edgeのみ(Brave/Arc/他Chromium派生/WSL非対応)
  • 対応プラン: Pro/Max/Team/Enterprise

デモ実測値(Google フォーム5問作成→共有リンク取得→手順書化):

  • 所要時間: 12分14秒
  • スクショ: 34枚(約1.5MB)
  • runbook.md: 約90行
  • runbook.docx: 332KB(画像12枚埋め込み)
  • 成果物はそのまま社内配布ルートに乗せられる形式

コンテキスト管理の注意点:

  • スクショはbase64 JPEGとして会話履歴に累積し、コンテキスト消費が重い(Issue #27869で議論中)
  • 対策1: セッションを短く切り、runbook出力後は/exitで終了
  • 対策2: サブエージェントに分離(独立コンテキスト・親には最終テキストのみ返す)
  • サブエージェント定義はtools: [claude-in-chrome, bash, write, read]を指定

活用ユースケース:

  • SaaS新規登録・初期設定手順書の自動生成
  • クラウドコンソール(GCP/AWS等)設定手順書
  • UI変更後の既存手順書の鮮度チェック
  • 複数サイト横断の料金・機能比較調査書