Claude CodeのChrome連携｜設定手順とつながらない時の切り分け

Claude CodeのChrome連携は、ターミナルやVS CodeのClaude Codeから、自分のChromeを操作させる機能です。使うには「Claude in Chrome」拡張機能（1.0.36以降）を入れ、Pro・Max・Team・Enterpriseのいずれかのプランで /login してから claude --chrome で起動します。つながったかどうかは /chrome を実行し、「Status: Enabled」と「Extension: Installed」が出ていれば確認完了です。

以下は、動作中のWebアプリを画面とコンソールで確かめながら直したい人向けに、公式ドキュメント（Use Claude Code with Chrome）の記述を2026年10月19日に照合し、作業の順に並べ直したものです。

Claude CodeのChrome連携で何ができる？

公式は、Chromeをつないだ状態ではブラウザ操作とコーディングを1つの流れでつなげられると説明しています。開発者に関係が深いのは次の3つです。

ライブデバッグ: コンソールのエラーとDOMの状態を直接読み、原因になったコードを直す
Webアプリのテスト: フォームの入力チェック、見た目の崩れ、画面遷移の流れを確かめる
デザインの照合: 作ったUIをブラウザで開き、デザイン案と合っているかを見る

動き方にも特徴があります。Claudeは作業用に新しいタブを開き、ブラウザのログイン状態を共有します。操作は見えるChromeウィンドウでリアルタイムに進むので、何をしているかを横で見られます。ログイン画面やCAPTCHAに当たると、Claudeは止まって人に操作を頼みます。

Googleドキュメントへの書き込み、データ抽出、GIF記録なども公式の機能一覧にありますが、この記事ではデバッグに絞ります。ブラウザの外にあるmacOSアプリを操作したい場合は、computer useをCLIで使う記事の領域です。

自分の環境で使える？前提条件を確かめるには

公式の前提条件は次の4つです。

項目	公式の条件
ブラウザ	Google Chrome、Microsoft Edge、またはBrave・Arc・Vivaldi・OperaなどのChromium系
拡張機能	Claude in Chrome 1.0.36以降（Chrome ウェブストアで配布）
本体	Claude Code
プラン	Anthropicの直接プラン（Pro、Max、Team、Enterprise）

ここで引っかかりやすいのは、表の外にある3つの条件です。

1つ目は認証方法です。Chrome連携には /login でのサインインが必要です。APIキーや claude setup-token で作る長期トークンで認証している場合、--chrome を付けてもChrome連携はオフのままです。拡張機能がその認証情報で認証できないためです。v2.1.216より前の版では有効にはなるものの、接続のたびに403エラーで失敗していました。APIキーを使っている人は、APIキーの記事で自分の認証方法を確かめてください。

2つ目は提供経路です。Amazon Bedrock、Google CloudのAgent Platform、Microsoft Foundry経由では使えません。そうした経路だけでClaudeを使っている場合は、別にclaude.aiのアカウントが必要です。

3つ目は実行環境です。WSL（Windows Subsystem for Linux）ではサポートされていません。WindowsでWSL上のClaude Codeを使っている人は、この時点で対象外になります。

このほか、HIPAAを有効にしているEnterprise組織では、Claude in Chromeは既定でオフです。組織のOwnerが「Organization settings > Claude in Chrome」でオンにできます。

Chromeとつなぐ手順は？

CLIでの手順は2段階です。まず拡張機能を入れたうえで、--chrome フラグを付けて起動します。

claude --chrome

初回だけ、連携の紹介とサイト権限の仕組みを説明するダイアログが出ます。Enterで先に進みます。

次に、ブラウザを使う依頼を出します。最初の依頼の例として、手元で動かしている開発サーバーのページのタイトルとコンソールのエラーを確認させます。

localhost:3000 を開いて、ページのタイトルとコンソールに出ているエラーを教えてください。クリックや入力はしないでください。

ブラウザ操作の前にサイト許可を求められたら承認します。ダイアログは「Claude in Chrome wants to」で始まり、そのサイトでの操作をセッション中すべて許可する選択肢もあります。Claudeはブラウザのログイン状態を共有するので、まとめて許可したサイトでは、ログイン中の自分のアカウントのまま操作が進みます。まとめて許可するのは、手元の開発サーバーのように操作されても困らないサイトにとどめ、ほかのサイトは操作ごとに確かめると安全です。

対話セッションでClaudeがブラウザを必要としたのに拡張機能が検出されないと、「Claude wants to use your browser」という導入プロンプトが出ます。出るのは1セッションに最大1回で、選択肢は「Install extension」「Not now」「Don’t ask again」の3つです。「Install extension」を選ぶと拡張機能のインストールページが開き、入れ終わると同じセッションのまま接続されます。組織が管理設定の deniedMcpServers で claude-in-chrome を止めている場合、このプロンプトは出ません。

つながったことを確かめる

接続の状態は /chrome で見ます。このコマンドでは接続状況を確認する操作、権限の管理、拡張機能の再接続、使うブラウザの選択ができます。公式は、状態パネルに「Status: Enabled」と「Extension: Installed」が表示されていれば動作していると説明しています。

ChromeとEdgeなど複数のブラウザがつながっている場合は、どれを使うか選びます。あとから切り替えるときは /chrome の「Select browser…」を選びます。

使えるブラウザ操作ツールの一覧は、/mcp から claude-in-chrome を選び、「View tools」で確認できます。

VS Codeから使う場合

VS Code拡張では、入力欄に @browser と打ち、続けてやってほしいことを書きます。公式の例は「@browser go to localhost:3000 and check the console for errors」です。VS Code拡張そのものの導入はVS Code拡張機能の記事にまとめています。

毎回 –chrome を付けずに使うには？

/chrome を実行して「Enabled by default」を選ぶと、フラグなしでも毎回つながります。VS Codeでは入力欄で /chrome を打ち、「Enabled by default」のスイッチをオンにします。この設定はCLIとVS Codeで共通なので、片方でオンにすれば両方に効きます。

ただし公式は、既定で有効にするとブラウザツールとその説明が常に読み込まれるため、コンテキストの消費が増えると注意しています。消費が気になる場合は設定をオフに戻し、必要なときだけCLIなら --chrome、VS Codeなら @browser でつなぐ方法が案内されています。判断の目安は、ほぼ毎回の作業でブラウザ確認が入るかどうかです。コンテキストの考え方はコンテキストウィンドウの記事で扱っています。

既定で有効にしたうえで、特定のセッションだけ外したいときはCLIリファレンスにある次のフラグを使います。

claude --no-chrome

Chromeを起動していない状態でも、Claude Codeは通常どおり起動します。v2.1.211より前の版では、Chrome連携を有効にしたままChromeが起動していないと、起動が止まることがありました。

なお、プロジェクトの .claude/settings.json で CLAUDE_CODE_ENABLE_CFC を設定してもChrome連携はオンにならず、警告が出ます。チェックアウトしたリポジトリが自分のブラウザにClaudeをつなげないようにするためで、有効にするなら自分で /chrome か --chrome を使います。

動作中のWebアプリの不具合は、どう頼む？

公式の使用例で押さえておきたいのは、コンソールの読ませ方です。ログは量が多くなりやすいので、全部を出させるのではなく、探すパターンを伝えるよう書かれています。

依頼には、再現の操作、見るログの条件、修正後の再確認を1回で入れておくと結果を判断しやすくなります。次は形を示すための例です。

localhost:3000 の問い合わせフォームで、送信ボタンを押しても何も起きません。ダミー値を入れて送信し、コンソールのエラーのうち「TypeError」を含むものだけを確認してください。原因のコードを説明してから最小限の修正をし、ページを再読み込みして同じ操作でエラーが消えたかを報告してください。

公式の例にも、ログインフォームの入力チェックを直したあとに localhost:3000 を開き、不正な値で送信してエラーメッセージが正しく出るかを確かめさせるものがあります。直した箇所を、実際の画面で確かめさせる使い方です。

修正の差分を確認する、見た目や文言が要件どおりかを判断する、といった部分は人が受け持ちます。どこまで自動で進めさせるかは、次の節の権限設定で決まります。

ログイン中のブラウザを操作させて大丈夫？

Claudeはブラウザのログイン状態を共有するので、自分がログインしているサイトにはClaudeも入れます。便利な反面、操作できる範囲は自分で絞る必要があります。公式の仕組みとして使えるのは次の3つです。

1つ目はサイト単位の権限です。サイトごとの権限はChrome拡張機能から引き継がれます。どのサイトで閲覧・クリック・入力を許すかは、拡張機能の設定で管理します。

2つ目は権限モードです。auto modeでは、auto modeの分類器がブラウザ操作を承認すると、拡張機能側のサイト単位の確認はその呼び出しについて省かれます。権限ルールでClaude in Chromeに対してサイトを拒否している場合は例外です。プランモードでは、GIF記録、新しいタブを開く操作、ショートカットの実行の前に許可を求められます。ただし対話のCLIセッションで、bypass permissionsモードが使える状態かつフィーチャーフラグの取得がオフのときは、これらは確認なしで実行されます。各モードの違いは権限モードの記事を参照してください。

3つ目は記録物の扱いです。GIF記録にはログイン中のページのアカウント情報も含めて画面のすべてが写るため、チーム外に共有する前に中身を確かめるよう公式は注意しています。

開いたページの文面に紛れた指示など、AIにブラウザを任せること自体のリスクは個人利用のセキュリティリスクの記事で扱っています。

つながらないときは何から確かめる？

まず /chrome を実行し、表示とエラー文言から当てはまる行を探します。

症状・表示	公式が示す原因	対処
`/chrome` で拡張機能が「Not detected」	拡張機能が未インストールか無効	`chrome://extensions` でインストールまたは有効化する
「Browser extension is not connected」	拡張機能が動いていない、拡張機能とClaude Codeのアカウントや組織が違う、組織のIP許可リストが `bridge.claudeusercontent.com` への接続を拒否している	同じアカウント・組織でサインインしているか確かめ、ChromeとClaude Codeを再起動し、`/chrome` で再接続する
「No tab available」	タブの準備前に操作しようとした	新しいタブを作って再試行するよう頼む
「Receiving end does not exist」	拡張機能のservice workerがアイドルになった	`/chrome` で「Reconnect extension」を選ぶ
`/chrome` の Status が「Not connected」	実行中のセッションの接続が失敗している	「Reconnect extension」で接続を再始動する

インストールの問題で拡張機能が検出されない場合、公式の確認順は次のとおりです。

chrome://extensions で拡張機能が入っていて有効か確かめる
Claude Codeが最新か確かめる
Chromeが起動しているか確かめる
/chrome で「Reconnect extension」を選ぶ
それでも直らなければ、Claude CodeとChromeの両方を再起動する

手順2の版の確認は次のコマンドです。

claude --version

初めて有効にしたときにつながらない場合は、Chromeの再起動が効くことがあります。初回の有効化でClaude Codeがネイティブメッセージングホストの設定ファイルを置き、Chromeはそれを起動時に読むためです。それでもつながらなければ、設定ファイルがあるか確かめます。macOSのChromeなら ~/Library/Application Support/Google/Chrome/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.jsonです。LinuxやWindows、Edgeでの場所は公式ページのTroubleshootingに一覧があります。

ほかに、公式が個別に挙げている接続の問題は次のとおりです。

長く使っていると切れる: 拡張機能のservice workerがアイドルになると接続が切れます。/chrome から「Reconnect extension」を選びます。v2.1.290より前の版では、この操作が失敗した接続を再始動しなかったので、戻らなければClaude Codeを更新します。
ブラウザが反応しない: alert・confirm・promptのダイアログがページを止めていないか見ます。JavaScriptのダイアログはブラウザのイベントを止めるので、手で閉じてからClaudeに続けるよう伝えます。直らなければ新しいタブで再試行させ、それでもだめなら chrome://extensions で拡張機能を無効にしてから有効に戻します。
複数の組織に入っている: 拡張機能とClaude Codeは同じ組織でサインインしている必要があります。Claude Code側の組織は /status の「Organization」行で確認できます。拡張機能の組織を変えるにはログアウトが必要ですが、ログアウトすると拡張機能に保存したショートカットと予約タスクが消えるため、先にほかの対処を試すよう公式は勧めています。
Windowsで名前付きパイプの競合（EADDRINUSE）が出る: Claude Codeを再起動し、Chromeを使っているほかのClaude Codeセッションを閉じます。

症状がChrome連携に限らず、ログインそのものができない場合はログインできないときの記事のほうが近道です。

仕様が変わりやすいのはどこ？

拡張機能の最低版（1.0.36）や、v2.1.216・v2.1.290前後の挙動の違いのように、公式ドキュメントには版の条件が付いた記述があります。うまくいかないときは、公式のChromeページのTroubleshootingと、自分の claude --version の結果を突き合わせてください。拡張機能そのもののショートカットや予約機能は、公式ヘルプセンターの「Getting started with Claude in Chrome」に案内があります。

最初の一歩は、claude --chrome で起動し、/chrome で「Status: Enabled」と「Extension: Installed」を確かめることです。そこまで通れば、あとは手元の開発サーバーのページを読ませるところから始められます。