Claude Codeからブラウザを開いて操作できたら、Webアプリの動作確認やデータ取得がスムーズになる。実は「Claude in Chrome」という拡張機能を入れると、Claude CodeからChromeを直接操作できる（ベータ版）。拡張機能のインストールから接続確認、最初のブラウザ操作までを一通り試したので、その手順をまとめる。
この記事でやること
Claude CodeとChrome拡張（Claude in Chrome）を連携させ、Claude Codeからブラウザを操作できるようにする。拡張機能のインストールから接続確認、基本的なブラウザ操作の例までを一通りカバーする。
まず知っておきたいこと（Chrome連携とは）
Chrome連携は、Claude Codeと「Claude in Chrome」拡張機能をつなぐ機能だ（現在ベータ版）。連携すると、Claude CodeからChromeを操作できるようになる。
具体的には、ページを開いてリンクをクリックする、フォームに入力して送信する、ページ上の情報を取得する、スクリーンショットを撮る――こうした操作がClaude Code経由でできる。
ここで押さえておきたい点が2つある。
ブラウザのログイン状態をそのまま使える。 Claude Code側でAPI接続を別途設定する必要はない。Chromeにログイン済みのサイト（Google DocsやNotionなど）もそのまま操作できる。
できないこともある。 ログイン画面やCAPTCHAが出た場合は、Claude Codeが一時停止して手動対応を求めてくる。また、Amazon BedrockやVertex AIなど第三者プロバイダー経由ではこの機能は使えない。
先に確認すること（前提条件）
設定を始める前に、次の条件を満たしているか確認しておく。ここで漏れがあると後でつまずく原因になる。
- ブラウザ: Google Chromeに対応（Microsoft Edge、Brave、Arcなど他のChromium系ブラウザは未対応）
- Claude Code: v2.0.73以降
- Claude in Chrome拡張機能: v1.0.36以降
- プラン: Anthropic直結プランが必要
- 環境: ネイティブWindows（WSLでは未対応）
プランについて補足しておく。Bedrock、Vertex、Foundry経由のプランではChrome連携を使えない。対応しているのはPro、Max、Team、Enterpriseの各プランだ。
バージョンの確認はターミナルで次のコマンドを実行する。
claude --version
出力されたバージョン番号が 2.0.73 以上なら問題ない。
手順: Chrome拡張をインストールして連携する
設定は5つのステップで進める。
Step 1: Chrome拡張機能をインストールする
Chrome Web Storeで「Claude in Chrome」を検索し、「Chromeに追加」をクリックする。インストールが完了すると、ブラウザの拡張機能アイコンにClaudeのアイコンが表示される。
Step 2: 拡張機能をピン留めする
拡張機能アイコン（パズルピースの形）をクリックし、「Claude」の横にあるピンアイコンをクリックする。ツールバーに常時表示しておくと、後でステータスを確認しやすくなる。
Step 3: Claude CodeをChrome連携モードで起動する
ターミナルで次のコマンドを実行する。
claude --chrome
通常の claude コマンドに --chrome フラグを付けると、起動時にChrome拡張機能との接続を試みる。既にセッションを開いている場合は、セッション内で /chrome と入力しても接続できる。
Step 4: 接続を確認する
Claude Codeのプロンプトで /chrome と入力する。接続されていれば、ステータス情報が表示される。ここで「connected」のような表示が出れば連携は成功だ。
Step 5: サイト権限を設定する
Chrome拡張機能の設定画面から、Claudeが操作できるサイトの範囲を決める。初期設定では制限がある場合があるので、必要に応じて許可範囲を広げる。
「Enabled by default」について
/chrome の設定画面で「Enabled by default」を選択すると、以降のセッションで自動的にChrome連携が有効になる。ただし、毎回ブラウザのコンテキスト情報が送信されるため、コンテキスト使用量が増える点に注意したい。必要な時だけ --chrome を付けて起動する運用でも問題ない。
使ってみる: 基本的なブラウザ操作の例
連携ができたら、実際にブラウザを操作してみる。Claude Codeに対して自然言語で指示するだけで、ブラウザが動く。
例1: ローカルWebアプリを開いて確認する
localhost:3000 を開いて、ページがどう表示されているか教えて
Claude CodeがChromeで指定したURLを開き、ページの内容を報告してくれる。「ヘッダーのメニューが折りたたまれている」「ボタンが2つ見える」のような具体的な結果が返ってくる。
例2: コンソールログを確認する
いま開いているページのコンソールログを確認して、エラーがあれば教えて
ブラウザの開発者ツールに出力されているコンソールログを読み取って、エラーメッセージがあれば報告してくれる。Webアプリのデバッグで特に役立つ。
例3: フォームに入力する
開いているページの検索フォームに「Claude Code」と入力して検索ボタンを押して
フォームへの入力と送信を自動で実行する。
いずれの例でも、ログイン画面やCAPTCHAに遭遇するとClaude Codeが「手動で対応してください」と一時停止する。AIが勝手に進めることはない。
どんな時に便利か（ユースケースの整理）
Chrome連携が特に役立つ場面をいくつか挙げる。
- Webアプリの動作確認 — コードを書いた直後に、ブラウザで正しく表示されているか確認させる。ターミナルとブラウザを行き来する手間が減る
- ブラウザ上のデータ活用 — Webページから特定の情報を抽出して、ローカルファイルに保存するといった作業を依頼できる
- ログイン済みサイトの操作 — Google DocsやNotionなど、ブラウザでログイン済みのサイトをそのまま操作できる。APIキーの設定が不要
- 繰り返し作業の自動化 — 定型的なフォーム入力やデータ収集などを依頼しておくと、毎回同じ作業をしなくて済む
ただし、大量のページを高速で巡回するような用途には向かない。あくまで「Claude Codeの作業と連動してブラウザを操作する」という使い方が中心だ。
うまくいかない時だけ確認ポイント
設定や操作でうまくいかない場合、次のポイントを確認する。
拡張機能が検出されない
拡張機能が有効になっているかChromeの拡張機能設定画面で確認する。インストール直後はChromeの再起動が必要な場合がある。
ブラウザが応答しない
Chromeが起動しているか確認する。バックグラウンドで動いているだけだと操作を受け付けないことがある。
通信が切れる
長時間セッションを続けていると接続が切れる場合がある。その時は /chrome を再度実行して再接続する。
Windows固有の注意点
ブラウザがバックグラウンドにあると動作が不安定になる場合がある。作業中はChromeを前面に出しておくと安定しやすい。
JavaScriptのダイアログに注意
alert、confirm、prompt のダイアログが表示されていると、ブラウザの操作が止まる。ダイアログを手動で閉じてから再開する。
コンテキスト使用量が増える
「Enabled by default」にしていると、ブラウザの情報が毎回送信される。使用量が気になる場合は、必要な時だけ --chrome を付ける運用を検討する。
最後に確認すること
設定が終わったら、次の2点を確認しておく。
まず、/chrome を実行して接続ステータスが「connected」になっているか確かめる。次に、「localhost を開いてページの内容を教えて」と頼んでみて、実際にブラウザが開いて結果が返ってくるか試す。
この2つが確認できれば、Chrome連携の設定は完了だ。以降は claude --chrome で起動するか、セッション内で /chrome を実行すれば、いつでもブラウザ操作を依頼できる。
対応プラン — Chrome連携はPro、Max、Team、Enterpriseの各プランで利用できる（ベータ版機能）。Bedrock、Vertex、Foundry経由では利用不可。
まとめ
Chrome連携を設定しておくと、Claude Codeに「ブラウザで確認して」と自然に頼めるようになる。ターミナルとブラウザを行き来する場面が多い人にとっては、特に体感できる変化があるはずだ。
設定自体は拡張機能を入れて claude --chrome で起動するだけ。接続確認から最初の操作まで、10分もかからず完了する。まずはローカルのWebアプリを開かせてみるあたりから試してみると良い。
Computer Use機能やフルスクリーン表示、ステータスラインのカスタマイズなどにも触れていくと、Claude Codeでできることの幅がさらに広がる。