背景

この連載では、Claude Codeの公式ドキュメントを1ページずつ読み解いていきます。公式ドキュメントは情報が網羅されている分、「結局どの機能を、どんな場面で使えばいいのか」は自分で考える必要があり、読むのに意外と時間がかかります。そこで、私が実務で使うために読み込んだ内容を「使う場面→実例コード」の順に整理して残していくことにしました。専門家の解説というより、一次情報を読んだ記録です。推測や動作を確認していない部分には、その都度そう書きます。

一言でいうと何か

Claude Code を「Claude in Chrome」ブラウザ拡張機能につなぎ、CLI や VS Code 拡張からブラウザ自動化を使う機能です。コードをビルドしてから、コンテキストを切り替えずにそのままブラウザでテスト・デバッグできます。Claude はブラウザタスク用に新しいタブを開き、ブラウザのログイン状態を共有するので、すでにサインイン済みのサイトにもアクセスできます。アクションはリアルタイムで見える Chrome ウィンドウで実行され、ログインページや CAPTCHA に当たると一時停止して手動対応を求めます。

どういう場面で役立つか

作ったコードをその場でブラウザ検証・デバッグしたいとき。コンソールエラーや DOM 状態を直接読み取って原因のコードを直したり、Figma モックから作った UI をブラウザで開いて一致を確認したり、フォーム検証やユーザーフローをテストしたりできます。

API コネクタなしで、ログイン済みの Web アプリを操作したいとき。Google Docs・Gmail・Notion などにサインイン状態のまま書き込みや操作ができます。

反復的なブラウザ作業やデータ収集を自動化したいとき。CSV を読んで CRM に1行ずつ入力する、商品一覧から名前・価格・在庫を抽出して CSV 保存する、複数サイトをまたぐワークフローを回す、操作を GIF として記録する、といったことができます。

不要・向かないケース：対応ブラウザは Google Chrome と Microsoft Edge のみで、Brave・Arc など他の Chromium 系や WSL では未対応です。利用には直接 Anthropic プラン(Pro/Max/Team/Enterprise)が必要で、Amazon Bedrock・GCP・Microsoft Foundry などサードパーティプロバイダー経由では使えません(その場合は別の claude.ai アカウントが要ります)。ブラウザで実行できないネイティブ macOS アプリの操作が必要なら、コンピュータ使用のほうが向きます。

開始と利用の実例

前提

必要なのは、Chrome または Edge、「Claude in Chrome」拡張機能バージョン 1.0.36 以上、Claude Code、そして直接 Anthropic プランです。前述のとおりサードパーティプロバイダー経由では利用できません。サイトレベルの権限は Chrome 拡張機能から継承されるため、Claude がブラウズ・クリック・入力できるサイトは拡張機能側の設定で制御します。

CLI で開始する

--chrome フラグを付けて起動します。

claude --chrome

既存セッション内なら /chrome を実行して有効化することもできます。あとは自然文でブラウザ操作を頼みます。

Go to code.claude.com/docs, click on the search box,
type "hooks", and tell me what results appear

最初のブラウザアクションで claude-in-chrome スキルの使用許可を求められ、承認すると Claude が新しいタブを開いてタスクを始めます。/chrome はいつでも実行でき、接続ステータスの確認・権限管理・拡張機能の再接続・使用するブラウザの選択に使えます(複数ブラウザが接続されているとどれを使うか尋ねられます)。毎回 --chrome を渡すのを避けたいなら、/chrome で「デフォルトで有効」を選びます(ただし CLI では常時有効にするとブラウザツールが常にロードされコンテキスト使用量が増えるため、消費が気になれば無効化して必要時のみ --chrome を使います)。VS Code 拡張では、Chrome 拡張が入っていれば追加フラグなしでいつでも使えます。

プランモードでのブラウザツール

プランモードでは、ページやブラウザの状態を「読み取るだけ」の呼び出しは権限プロンプトなしで実行され、状態を「変更する」呼び出しは承認を求められます。読み取り専用は read_page・get_page_text・find・コンソール/ネットワークの読み取り・スクリーンショット撮影など、状態変更はクリック・入力・ナビゲーション・タブ/ウィンドウ管理・GIF 記録などです。なお v2.1.199 以降は、tabs_context_mcp の createIfEmpty、コンソール/ネットワークリーダーの clear、スクリーンショットの save_to_disk のように状態変更フラグを立てる読み取り呼び出しも承認を求められ、browser_batch は内部の全アクションが読み取り専用のときのみプロンプトなしで実行されます。

ワークフロー例

ブラウザ操作とコーディングを1つのフローで鎖のようにつなげます。利用可能なツールの一覧は /mcp で claude-in-chrome を選び View tools で確認できます。たとえばローカル Web アプリのテストは次のように頼めます。

I just updated the login form validation. Can you open localhost:3000,
try submitting the form with invalid data, and check if the error
messages appear correctly?

コンソールでのデバッグは、出力が冗長になりうるため「探すパターン」を伝えます。

Open the dashboard page and check the console for any errors when
the page loads.

このほか、CSV を読んで CRM にフォーム入力する自動化、ログイン済みの Google Docs への直接書き込み、商品一覧からのデータ抽出と CSV 保存、カレンダーと外部サイトをまたぐマルチサイトワークフロー、チェックアウト操作の GIF 記録など、いずれも自然文の指示で実行できます。

Go to the product listings page and extract the name, price, and
availability for each item. Save the results as a CSV file.

トラブルシューティングの要点

拡張機能が検出されないときは、chrome://extensions でインストール・有効化を確認し、Claude Code を最新にし、Chrome が起動しているか確認し、/chrome の「Reconnect extension」で再接続、それでも駄目なら両方を再起動します。Chrome 統合を初めて有効にするとネイティブメッセージングホストの設定ファイルが書かれ、Chrome は起動時にこれを読むため、初回で検出されない場合は Chrome を再起動します(設定ファイルの場所は OS・ブラウザごとに決まっており、詳細は公式参照)。ブラウザが応答しないときは、モーダルダイアログ(alert/confirm/prompt)がイベントをブロックしていないかを確認して手動で閉じる、新しいタブで再試行、拡張機能の無効化→有効化、を試します。長時間セッションで拡張のサービスワーカーがアイドルになって接続が切れた場合は /chrome の「Reconnect extension」で再接続します。Windows では名前付きパイプ競合(EADDRINUSE)やネイティブメッセージングホストのエラーが起こりえます。代表的なエラー(「Browser extension is not connected」「Extension not detected」「No tab available」「Receiving end does not exist」)と対処は公式の一覧を参照してください。

まとめ

Chrome 統合は、Claude Code を「Claude in Chrome」拡張につないで、ビルドからブラウザでのテスト・デバッグ・自動化までを1つのフローで回せる機能です。ログイン状態を共有するため認証済みアプリも API なしで操作でき、ライブデバッグ・デザイン検証・フォーム自動化・データ抽出・GIF 記録などに使えます。起動は claude --chrome(または /chrome)で、/chrome は接続管理にも使い、プランモードでは読み取りは自動・状態変更は承認、という区別があります。対応は Chrome/Edge のみ、直接 Anthropic プランが前提で、サードパーティプロバイダー経由では使えない、という制約を押さえておくとよいでしょう。

次回は、残る連携・自動化系の未執筆ページ(Channels、/goal、コンピュータ使用、Agent SDK など)、あるいは長く保留している引き継ぎ課題(第5回欠番の補完・第1/2回の照合)に着手する予定です。

---

この記事は執筆時点の公式ドキュメントに基づいています。最新の情報は必ず公式ドキュメントをご確認ください。