2026年10月7日に、公式ドキュメントと v2.1.292 までの CHANGELOG を確かめてまとめた（確認日：2026年10月7日・Claude Code CHANGELOG）。Claude Code の Chrome 連携は、ブラウザ拡張「Claude in Chrome」を通して、端末や VS Code 拡張から Chrome を操作させる機能だ。Claude は作業用に新しいタブを開き、ブラウザのログイン状態を共有するので、すでにサインインしているサイトにも入れる。操作は目に見える Chrome のウィンドウでその場で進み、ログイン画面や CAPTCHA に当たると止まって、人に対応を頼む（Claude Code公式ドキュメント「Use Claude Code with Chrome」）。
この機能は v2.0.72 でベータとして入り、v2.1.198 で一般提供になった（Claude Code CHANGELOG）。公式の週ごとの更新まとめでも、2026年6月29日〜7月3日の週に「Claude in Chrome is generally available」と載っている（What’s new「Week 27」）。この記事では、使う前の条件、起動と毎回オンにする設定、確認ダイアログ、つながらない時の確認、Chrome DevTools MCP などとの違いを順に書く。
この記事の要点
- 何ができる：作った Web アプリの確認、コンソールのエラーの読み取り、フォーム入力、データの抽出、GIF の録画。
- 必要なもの：Chrome か Edge などのブラウザ、Claude in Chrome 拡張、Pro・Max・Team・Enterprise のいずれか、
/loginでのサインイン。 - 起動：
claude --chrome。毎回オンにするなら/chromeで Enabled by default を選ぶ。 - 効かない時：
chrome://extensionsで拡張を確かめ、/chromeの Reconnect extension を試す。 - 使えない環境：WSL、Amazon Bedrock などの他社経由、API キーでの認証。
- 対象読者：作った画面の確認まで Claude Code に任せたい開発者、社内の利用ルールを決めるテックリード。
Chrome連携とは｜Claude CodeからChromeを操作する仕組み
Chrome 連携では、Claude Code が「Claude in Chrome」拡張（Chrome ウェブストアでの名前は「Claude」）とつながり、ブラウザの操作を道具として使えるようになる（Chrome ウェブストア「Claude」）。Claude は新しいタブを開いて作業し、ブラウザのログイン状態をそのまま使う。コードを書いた後、端末から離れずにブラウザで試し、直すところまでを1つの流れで頼める。端末の CLI と VS Code 拡張の両方で使える（Use Claude Code with Chrome）。
開いたタブはタブグループにまとまる
拡張は、Claude が開いたタブを、セッションに結び付いた Chrome のタブグループにまとめる。/clear を打つと、そのグループは開いているページごと閉じる。/resume で別のセッションに移った時や、Claude Code を終了した時は、グループに空の新しいタブしか残っていない場合だけ閉じる。読んでいる途中のページは残る（Use Claude Code with Chrome）。
できること
公式ドキュメントが挙げている使い道は次の8つだ（Use Claude Code with Chrome）。
| 使い道 | 中身 |
|---|---|
| その場のデバッグ | コンソールのエラーと DOM の状態を読み、原因のコードを直す |
| デザインの確認 | Figma のモックから作った UI をブラウザで開き、合っているか確かめる |
| Web アプリのテスト | フォームの入力チェック、見た目の崩れ、画面の流れを確かめる |
| ログインが要るアプリ | Google ドキュメント、Gmail、Notion などを、API のコネクタなしで操作する |
| データの抽出 | Web ページから情報を取り出し、手元に保存する |
| 定型作業の自動化 | データ入力、フォーム入力、複数のサイトにまたがる作業 |
| ファイルのアップロード | 手元のファイルを Web ページのアップロード欄に添付する |
| 操作の録画 | ブラウザの操作を GIF に記録する |
使えるブラウザの道具の一覧は、/mcp で claude-in-chrome を選び、View tools を開くと見られる。
対応するブラウザ
Google Chrome と Microsoft Edge で動く。Brave、Arc、Vivaldi、Opera などの Chromium 系のブラウザでも、Claude Code が拡張を見つけて接続を設定する。WSL（Windows Subsystem for Linux）では使えない（Use Claude Code with Chrome）。
使う前に確かめる4つの条件
Chrome 連携は、次の4つがそろって初めて動く（Use Claude Code with Chrome）。
| 条件 | 中身 | 満たさない時 |
|---|---|---|
| ブラウザ | Chrome、Edge、または Brave・Arc・Vivaldi・Opera などの Chromium 系 | 拡張を入れられない |
| 拡張 | Claude in Chrome の 1.0.36 以上 | /chrome で拡張が Not detected になる |
| プラン | Anthropic と直接契約する Pro・Max・Team・Enterprise | 機能を使えない |
| サインイン | /login で claude.ai のアカウントにサインインしている |
--chrome を付けてもオフのまま |
APIキーやsetup-tokenで認証していると動かない
API キー、または claude setup-token で作った長期トークンで認証していると、--chrome を付けても Claude Code は Chrome 連携をオフのままにする。拡張がその認証情報では認証できないからだ。v2.1.216 より前は、こうしたセッションでも連携をオンにできたが、拡張への接続が毎回 403 エラーで失敗していた。Amazon Bedrock、Google Cloud の Agent Platform、Microsoft Foundry など他社経由で Claude を使っている場合も使えず、別に claude.ai のアカウントが要る（Use Claude Code with Chrome）。
組織の設定で止まっていることがある
HIPAA を有効にした Enterprise の組織では、Claude in Chrome は初期状態でオフになっていて、Owner が管理画面の Organization settings > Claude in Chrome でオンにできる。管理者が deniedMcpServers で claude-in-chrome を止めている場合や、Claude in Chrome を許可せずに managed-mcp.json を配っている場合は、拡張を入れるよう促す画面も出ない（Use Claude Code with Chrome）。
v2.1.260 からは組織の管理者の設定に従い、管理者がオフにすると --chrome、/chrome、ブラウザの道具が使えなくなる（Claude Code CHANGELOG）。managed-mcp.json と併用させたい時のために、v2.1.282 で allowClaudeInChromeWithManagedMcp という管理用の設定が入った（All settings）。管理用の MCP 設定の配り方はClaude Code管理MCP配布｜7手順で扱っている。
設定の手順｜–chromeで起動して/chromeで確かめる
手順1｜拡張を入れる
Chrome ウェブストアから Claude in Chrome 拡張を入れる（Chrome ウェブストア「Claude」）。拡張そのものの使い方は、Anthropic のヘルプセンターにまとまっている（Claude Help Center「Get started with Claude in Chrome」）。
先に入れておかなくてもよい。対話の途中で Claude がブラウザを使おうとして拡張が見つからないと、「Claude wants to use your browser」という画面が出る。1つのセッションで出るのは多くて1回で、選べるのは次の3つだ（Use Claude Code with Chrome）。
- Install extension：拡張の入手ページを開き、入れ終わるのを待って接続する。準備ができたら「Continue with browser tools」を選ぶと、Claude が同じセッションで作業を続ける
- Not now：ブラウザの道具なしで続ける。後のセッションでまた聞かれることがある
- Don’t ask again：今後のセッションで聞かれなくなる。設定は
/chromeからいつでもできる
手順2｜claude –chromeで起動する
claude --chrome
初めて Chrome 付きで起動すると、連携の説明とサイトの許可の仕組みを書いた画面が1回だけ出る。Enter で進む（Use Claude Code with Chrome）。
手順3｜ブラウザでの作業を頼む
公式ドキュメントの例を日本語にすると、次のような頼み方になる。
code.claude.com/docs を開いて検索欄をクリックし、
「hooks」と入力して、どんな結果が出たか教えて
ブラウザを操作する前に許可を求められたら承認する。ダイアログは「Claude in Chrome wants to」で始まり、そのセッションの間はそのサイトでの操作をすべて許可する選択肢もある。承認すると Claude が新しいタブを開いて作業を始める（Use Claude Code with Chrome）。
手順4｜/chromeで状態を見る
/chrome を打つと、接続の状態の確認、許可の管理、拡張の再接続、使うブラウザの選択ができる。状態の画面に「Status: Enabled」と「Extension: Installed」が出ていれば動いている。複数のブラウザがつながっている時は、/chrome の「Select browser…」で使う方を選ぶ。選ぶ前にブラウザの操作が始まった場合は、その場でどれを使うか聞かれる（Use Claude Code with Chrome）。
毎回オンにする設定と、その場で切る方法
--chrome を毎回付けたくない時は、/chrome で「Enabled by default」を選ぶ。これで ~/.claude.json の claudeInChromeDefaultEnabled が true になる。この設定は settings.json に書いても無視される。/config では「Claude in Chrome enabled by default」として出る（All settings）。
起動のたびに切り替える
既定の設定とは別に、起動のコマンドでその回だけオンやオフにできる。
| 方法 | 効く範囲 | 書く場所・打つ場所 |
|---|---|---|
claude --chrome |
その1回のセッション | 起動のコマンド |
claude --no-chrome |
その1回のセッション（オフにする） | 起動のコマンド |
| Enabled by default | 以降の対話セッションすべて | /chrome（~/.claude.json の claudeInChromeDefaultEnabled） |
--chrome と --no-chrome は、1回のセッションに限って claudeInChromeDefaultEnabled より優先される（All settings・CLI reference）。
既定でオンにするとコンテキストを使う
既定でオンにすると、ブラウザの道具とその説明が常に読み込まれるので、コンテキストの消費が増える。気になる時は既定の設定を切り、要る時だけ --chrome で接続する。Chrome を起動していなくても Claude Code は普通に立ち上がる。v2.1.211 より前は、連携をオンにしたまま Chrome を起動していないと、起動が止まることがあった（Use Claude Code with Chrome）。
プロジェクトの設定ファイルではオンにできない
v2.1.290 から、プロジェクトの設定ファイルで Chrome 連携をオンにすることはできなくなった。オンにするのは --chrome、/chrome、ユーザーの設定のどれかだ。v2.1.285 からは、/config chrome=true と打つと設定の画面に案内されるようになり、/config chrome=false はこれまでどおりオフにできる（Claude Code CHANGELOG）。
確認ダイアログとサイトの許可
どのサイトで閲覧・クリック・入力を許すかは、拡張の設定から引き継がれる。サイトごとの許可は Chrome の拡張の設定で管理する（Use Claude Code with Chrome）。v2.1.251 からは、ブラウザの操作は必ず Claude Code の権限の確認を通る（Claude Code CHANGELOG）。
auto modeとplan modeでの扱い
auto mode では、auto mode の判定がそのサイトへのブラウザ操作を承認すると、拡張はその操作についてサイトごとの確認を省く。ただし、権限のルールでいずれかのサイトを Claude in Chrome に対して拒否している場合は省かない。plan mode では、GIF の録画、新しいタブを開く操作、ショートカットの実行の前に確認が出る。VS Code で @browser と打ったセッションは除く（Use Claude Code with Chrome）。
auto mode の考え方はClaude Code自動許可モード実践｜チーム導入と安全設計、plan mode はClaude Code Plan Mode実践ガイドで扱っている。
VS Code拡張で使う｜@browserと既定の接続
VS Code 拡張では、入力欄に @browser と打ち、続けてやってほしいことを書く（Use Claude Code in VS Code）。
@browser localhost:3000 を開いて、コンソールのエラーを確かめて
VS Code でも /chrome で Claude in Chrome の画面を開き、Enabled by default のスイッチを切り替えられる。この画面は v2.1.280 以降で使える。設定は CLI と共有なので、どちらかでオンにすると両方でオンになる。v2.1.287 以降で既定をオンにしていると、VS Code のセッションは始まった時点でブラウザにつながる（Use Claude Code in VS Code・Use Claude Code with Chrome）。
VS Codeで確認が出る条件
@browser と打って接続したセッションでは、Claude Code が本来なら確認するブラウザ操作を、拡張が承認する。既定の設定で始めから接続したセッションでは、そのセッションで @browser と打つまで、まだ許可していないサイトでの操作の前に確認が出る（Use Claude Code with Chrome）。VS Code 拡張の入れ方はClaude Code IDE統合｜VSCode・JetBrainsにある。
使いどころ｜開発の確認から定型作業まで
ローカルのWebアプリを確かめる
ログインフォームの入力チェックを直した後なら、「localhost:3000 を開いて、間違ったデータで送信し、エラーメッセージが正しく出るか確かめて」のように頼む。Claude はローカルのサーバーを開いてフォームを操作し、見えたことを報告する（Use Claude Code with Chrome）。
コンソールのエラーを読む
コンソールの出力は量が多いので、全部ではなく、探してほしい種類を伝える。「ダッシュボードを開いて、読み込み時のエラーをコンソールで確かめて」のように頼むと、Claude はメッセージを読み、特定のパターンやエラーの種類に絞り込める（Use Claude Code with Chrome）。
ファイルをアップロードする
v2.1.211 以降は、手元のファイルを Web ページのアップロード欄に添付できる。Claude Code がファイルを読んでブラウザに送るので、ローカルとリモートのどちらのセッションでも動く。制限は3つある（Use Claude Code with Chrome）。
- 権限のルールで
Readを拒否しているファイルは、アップロードもできない - 1回のアップロードは合計 10 MB まで（Use Claude Code with Chrome）
- ハードリンクが複数あるファイル（
node_modulesなどパッケージ管理の置き場に多い）は断られるので、コピーしてから渡す
GIFとスクリーンショットを残す
「カートに入れてから確認画面までを GIF に録って」と頼むと、操作を GIF に保存する。録画にはログイン中のページのアカウント情報も映るので、チームの外に出す前に中身を見る。スクリーンショットを「ディスクに保存して」と頼むと、画像を保存してファイルのパスを返す。v2.1.211 より前は、この保存が動いていなかった（Use Claude Code with Chrome）。
効かない・つながらない時の確認
拡張が検出されない
公式ドキュメントの手順は次の5つで、上から順に試す（Use Claude Code with Chrome）。
chrome://extensionsで拡張が入っていて、有効になっているか確かめるclaude --versionで Claude Code が最新か確かめる- Chrome が起動しているか確かめる
/chromeで「Reconnect extension」を選び、つなぎ直す- まだ直らなければ、Claude Code と Chrome の両方を再起動する
初めて連携をオンにすると、Claude Code はネイティブメッセージングホストの設定ファイルを置く。Chrome はこのファイルを起動時に読むので、最初の1回で拡張が見つからない時は Chrome を再起動する。Claude Code そのものの入れ直しや更新でつまずいた時はClaude Codeがインストールできない原因と対処も参考になる。
設定ファイルの置き場所
それでもつながらない時は、設定ファイルがあるかを見る。Chrome の場合の置き場所は次のとおり（Use Claude Code with Chrome）。
| OS | Chrome の置き場所 |
|---|---|
| macOS | ~/Library/Application Support/Google/Chrome/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json |
| Linux | ~/.config/google-chrome/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json |
| Windows | レジストリの HKCU\Software\Google\Chrome\NativeMessagingHosts\ |
Edge は Microsoft Edge の設定フォルダ（Windows ではレジストリの HKCU\Software\Microsoft\Edge\NativeMessagingHosts\）から、ほかの Chromium 系はそれぞれのブラウザ名のフォルダから、同じファイルを読む。
途中で反応しなくなった
ページに alert や confirm などのダイアログが出ていると、ブラウザのイベントが止まり、Claude は操作できない。ダイアログを手で閉じてから続きを頼む。それでもだめなら、新しいタブを作ってやり直すよう頼み、最後は chrome://extensions で拡張を一度無効にしてから有効に戻す。長いセッションで、しばらく使わなかった後に道具が動かなくなった時は、拡張のサービスワーカーが休止して接続が切れている。/chrome で「Reconnect extension」を選ぶ（Use Claude Code with Chrome）。
Windowsで起きること
Windows では次の3つが起きることがある（Use Claude Code with Chrome）。
- 名前付きパイプの衝突（EADDRINUSE）：ほかのプロセスが同じパイプを使っている。Chrome を使っているほかの Claude Code のセッションを閉じ、Claude Code を再起動する
- ネイティブメッセージングホストが起動時に落ちる：Claude Code を入れ直して、設定を作り直す
- 準備のページが開かない：Claude Code を更新する。v2.1.211 より前は、Windows で拡張の接続を促すタブが開かないことがあった（Claude Code CHANGELOG）
よく出るエラーメッセージ
| エラー | 原因 | 対処 |
|---|---|---|
| Browser extension is not connected | ネイティブメッセージングホストが拡張に届かない。または組織の IP 許可リストが bridge.claudeusercontent.com への接続を拒んでいる |
Chrome と Claude Code を再起動し、/chrome でつなぎ直す。IP 許可リストを使う組織ならネットワークの設定を見直す |
/chrome で Not detected |
拡張が入っていない、または無効 | chrome://extensions で入れるか、有効にする |
| No tab available | タブの準備ができる前に操作しようとした | 新しいタブを作ってやり直すよう頼む |
| Receiving end does not exist | 拡張のサービスワーカーが休止した | /chrome で Reconnect extension を選ぶ |
表は公式ドキュメントのトラブルシューティングを日本語にしたものだ（Use Claude Code with Chrome）。
Chrome DevTools MCP・Playwright MCPとの違い
Claude Code にブラウザを触らせる方法は、Chrome 連携だけではない。MCP サーバーを足す方法もある。違いを整理すると次のようになる。
| 方法 | 動かすもの | 向いている作業 |
|---|---|---|
| Chrome連携（Claude in Chrome） | ふだん使っている Chrome。ログイン状態を共有し、見えるウィンドウで動く | ログインが要る Web アプリの操作、作った画面の確認、定型の入力 |
| Chrome DevTools MCP | MCP サーバーが Chrome を操作し、Chrome DevTools の機能を使う | 性能の計測、ネットワークの調査、ソースマップ付きのコンソールの確認 |
| Playwright MCP | MCP サーバーがブラウザを操作する | E2E テストの手順づくり |
| Computer use | macOS のアプリそのもの | ブラウザではできない作業 |
Chrome DevTools MCPの入れ方
Chrome DevTools MCP（chrome-devtools-mcp）は、GitHub の ChromeDevTools が公開している MCP サーバーで、コーディングエージェントに動いている Chrome を操作・調査させる。操作には puppeteer を使い、性能のトレースの記録、ネットワークのリクエストの分析、スクリーンショット、ソースマップ付きのコンソールのメッセージを扱える。正式に対応しているのは Google Chrome と Chrome for Testing で、Node.js の LTS 版と npm が要る（GitHub「ChromeDevTools/chrome-devtools-mcp」）。Claude Code には、リポジトリの設定ガイドにある次のコマンドで足せる。
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
README は、ブラウザの中身が MCP のクライアントに見えるので、見せたくない個人情報を開かないよう注意している。性能の道具はトレースの URL を Google の CrUX API に送ることがあり、--no-performance-crux で止められる（GitHub「ChromeDevTools/chrome-devtools-mcp」）。
選び方の目安
ログインした状態の自分のブラウザで作業させたいなら Chrome 連携、性能やネットワークを掘りたいなら Chrome DevTools MCP、決まった手順のテストを組むなら Playwright MCP、と分けると迷いにくい。Playwright MCP の登録と権限の切り方はClaude Code×Playwright MCP連携｜E2Eテスト7手順、MCP の基本はClaude Code MCP実践ガイドで扱っている。ブラウザでは済まない macOS のアプリの操作は、Computer use の役目になる（Let Claude use your computer from the CLI）。
想定シナリオ｜管理画面の改修を、ブラウザでの確認まで任せる
ここからは構成例で、実在の企業や個人（チーム）の事例ではない。社内向けの受注管理画面を開発している小さなチームが、フォームを直すたびに手で画面を確かめていた、という想定で手順を組む。
手順1｜必要な日だけ接続する
既定ではオンにせず、ブラウザで確かめる日だけ claude --chrome で起動する。ブラウザの道具の説明が常に読み込まれて、コンテキストを使うのを避けるためだ。
手順2｜直してから確かめるまでを1つの依頼にする
受注フォームの数量欄の入力チェックを直したい。
直したら localhost:3000/orders/new を開いて、0 と文字列を入れて送信し、
エラーメッセージが出るかと、コンソールにエラーが出ていないかを確かめて
手順3｜許可はサイト単位で絞る
確認のダイアログでは、ローカルの開発サーバーだけをそのセッションで許可し、本番の管理画面は許可しない。サイトごとの許可は、拡張の設定で管理する。
手順4｜レビュー用のGIFは中身を見てから渡す
変更の前後を GIF に録って、プルリクエストに添える。ログイン中の画面が映るので、顧客の名前などが写っていないかを確かめてから貼る。
よくある質問
Claude CodeでChromeを操作するには？
Claude in Chrome 拡張（1.0.36 以上）を入れ、/login で claude.ai のアカウントにサインインし、claude --chrome で起動する。/chrome で「Status: Enabled」と「Extension: Installed」が出れば準備ができている（Use Claude Code with Chrome）。
無料プランでも使える？
公式ドキュメントが前提に挙げているのは、Anthropic と直接契約する Pro・Max・Team・Enterprise のいずれかで、Free は挙がっていない。API キーや claude setup-token の長期トークンで認証していると、--chrome を付けてもオフのままになる。
Chrome以外のブラウザでも使える？
Microsoft Edge で使える。Brave、Arc、Vivaldi、Opera などの Chromium 系のブラウザでも、Claude Code が拡張を見つけて接続を設定する。複数つながっている時は、/chrome の「Select browser…」で選ぶ。
WSLで使える？
公式ドキュメントは、Chrome 連携は WSL では使えないとしている。Windows で Claude Code を使う準備はClaude Code Windows導入7手順で扱っている。
「Browser extension is not connected」と出る時は？
Chrome と Claude Code を再起動し、/chrome でつなぎ直す。組織で IP の許可リストを使っている場合は、bridge.claudeusercontent.com への接続が止められていないかを確かめる。
Chrome拡張機能を作りたい時もこの機能を使う？
Chrome 連携は、できあがった拡張「Claude in Chrome」を通してブラウザを操作する機能で、拡張を作る機能ではない。Claude Code で Chrome 拡張を開発する手順はClaude Code × Chrome拡張MV3開発ガイドで扱っている。
あわせて読みたい
- Claude Code×Playwright MCP連携｜E2Eテスト7手順
- Claude Code MCP実践ガイド｜設定から自作まで
- Claude Code IDE統合｜VSCode・JetBrains
運営元 Uravation よりこの事例を自社の業務で試す場合のテーマ選定・評価・本番移行の確認項目を、無料のチェックリストにまとめています。 Claude Code業務自動化PoCチェックリストを受け取る（無料）
参考・出典
- Use Claude Code with Chrome（Claude Code 公式ドキュメント）（2026年10月7日参照・前提条件、起動、既定でオンにする設定、許可、使い道、トラブルシューティング）
- All settings（Claude Code 公式ドキュメント）（2026年10月7日参照・claudeInChromeDefaultEnabled、allowClaudeInChromeWithManagedMcp）
- CLI reference（Claude Code 公式ドキュメント）（2026年10月7日参照・–chrome、–no-chrome）
- Use Claude Code in VS Code（Claude Code 公式ドキュメント）（2026年10月7日参照・@browser、VS Code の Claude in Chrome の画面）
- What’s new「Week 27 · June 29 – July 3, 2026」（Claude Code 公式ドキュメント）（2026年10月7日参照・一般提供）
- Let Claude use your computer from the CLI（Claude Code 公式ドキュメント）（2026年10月7日参照・Computer use）
- Claude Code CHANGELOG（GitHub・anthropics/claude-code）（2026年10月7日参照・v2.0.72 から v2.1.290 までの Claude in Chrome の変更、最新版 v2.1.292）
- Claude（Chrome ウェブストア）（2026年10月7日参照・拡張の入手ページ）
- Get started with Claude in Chrome（Claude Help Center）（2026年10月7日参照・拡張そのものの使い方）
- ChromeDevTools/chrome-devtools-mcp（GitHub）（2026年10月7日参照・機能、要件、注意事項、Claude Code への追加コマンド）
