Claude CodeとChromeの連携手順4ステップ！接続エラー対策も解説

Claude CodeからChromeを操作したいものの、どの拡張機能を入れるべきか迷っていませんか。

Claude CodeとChromeは、Anthropic公式のClaude in Chrome拡張機能で連携できます。Chrome DevTools MCPやPlaywright MCPとは別の仕組みです。

方式や権限を確認せずに使うと、接続エラーを解消できないだけでなく、ログイン済みサイトへ必要以上の権限を与えるおそれがあります。

本記事では公式Chrome連携の導入手順や6つの接続エラー対策、Claude in ChromeとMCPの違い、Chrome連携を安全に使う注意点を解説します。

読み取り中心の小さな操作から、安全にChrome連携を始めたい方は、ぜひ最後までご覧ください。

SHIFT AIでは、生成AIやAIエージェントを日々の業務に活かしたい方に向けて、実務ですぐに使える資料を無料でプレゼントしています。どなたでも受け取れます。

たとえば『Claude Codeで始める業務自動化の教科書』『Claude Code コマンド大全』『AIエージェント用語集』など、明日からの業務にそのまま役立つ資料をご用意しています。

「AIエージェントを使って業務を効率化したい」「まず何から始めればいいか知りたい」という方は、ぜひ以下のボタンから受け取ってください。

Claude CodeとChromeを連携する4ステップ

Claude CodeとChromeは、以下の4ステップで連携できます。

1.png ／ 内容: 図解。対応環境の確認、公式拡張機能の導入、コマンドで接続、安全な読み取り操作で確認の4ステップを順番に示す

最初から入力や送信を任せず、読み取り操作で接続を確かめることが重要です。

ステップ1 対応ブラウザ・プラン・認証方式を確認する

最初に、ブラウザ、契約プラン、Claude Codeの認証方式を確認します。条件を満たさない環境では、拡張機能を入れても接続できません。

導入前に確認する条件は、以下のとおりです。

• 対応ブラウザ：Chrome、Edge、Brave、Arc、Vivaldi、Opera
• 拡張機能：Claude in Chromeの1.0.36以上
• 契約：Anthropic直接契約のPro、Max、Team、Enterprise
• 認証：Claude Codeの/loginによるサインイン
• 非対応：APIキー、claude setup-tokenで発行した長期トークン、第三者プロバイダー認証、WSL

条件を先に照合すると、インストール後の認証エラーを防げます。Claude Code自体の料金や基本操作は、以下の記事で詳しく解説しています。
出典：Use Claude Code with Chrome（Anthropic）

ステップ2 Claude in Chrome拡張機能をインストールする

Chromeウェブストアから、Anthropic提供の「Claude」を追加します。似た名前の非公式拡張機能を入れないよう、提供元と拡張機能IDを確認してください。

公式拡張機能のIDはfcoeoabgfenejglbffodgkkbkcdhcgfnです。追加後は拡張機能を有効にし、Claude Codeと同じClaudeアカウントへサインインします。

ウェブストア上の名称やバージョンは更新されます。導入時点の表示を確認すると、古い非公式手順との混同を防げます。
出典：Claude（Chromeウェブストア）

2.png ／ 内容: 【人間が作成】ChromeウェブストアでClaude公式拡張機能を開き、名称、提供元Anthropic、拡張機能ID、表示中のバージョンが確認できる画面

3.png ／ 内容: 【人間が作成】Chromeウェブストアの詳細欄でバージョン1.0.81、更新日、デベロッパーAnthropicを確認できる画面

ステップ3 ターミナルでclaude –chromeを実行する

claude --chromeは、Claude Code内ではなく、終了後のターミナルで実行します。Claude Codeの入力欄へ貼り付けるコマンドではありません。

現在のClaude Codeを終了し、ターミナルの通常の入力欄で以下を実行します。

claude --chrome

初回は連携とサイト権限に関する案内が表示されます。公式Docsでは、起動後の管理コマンドとして/chromeも案内されています。

一方、未ログインの環境ではUnknown command: /chromeと表示される場合があります。/loginでログインし、Chrome連携付きで起動し直してください。

claude --chromeで起動しても、通常のClaude Codeと同じ画面が表示されます。連携の有無は、次のステップで実際にブラウザ操作を依頼して確認します。
出典：Use Claude Code with Chrome（Anthropic）

4.png ／ 内容: 【人間が作成】ログイン後のChrome連携管理画面。Status、Extension、Manage permissions、Reconnect extensionを確認できる

ステップ4 読み取り操作で安全に接続を確認する

最初の動作確認では、信頼できる公式ページのタイトルを読み取らせます。外部へ影響する操作がないため、接続だけを安全に確認できます。

たとえば、Claude Codeへ次のように依頼します。

新しいタブでhttps://code.claude.com/docsを開き、
ページタイトルと上部にある見出しを読み取ってください。
クリックや入力は行わないでください。

初回の権限確認後、新しいタブと回答内容を人が照合します。ページと一致すれば、安全に次の操作へ進めます。
出典：Use Claude Code with Chrome（Anthropic）

5.png ／ 内容: 【人間が作成】Claude Codeがclaude-in-chromeスキルを読み込み、接続中のブラウザから操作対象を選択する画面

6.png ／ 内容: 【人間が作成】Claude CodeがChromeで公式ドキュメントを開き、ブラウザ上部にデバッグ中の案内が表示された画面

7.png ／ 内容: 【人間が作成】Claude Codeが公式ドキュメントのページタイトルと最初の見出しを回答した画面

Claude CodeがChromeに接続できないときの対処法6つ

Chromeへ接続できないときは、以下の6症状から原因を切り分けます。

8.png ／ 内容: 図解。拡張未検出、未接続、タブなし、モーダル停止、長時間後の切断、Windows固有エラーから各対処へ進むフロー

まず拡張機能とバージョンを確認し、Chrome連携付きで再起動します。

拡張機能が検出されない

拡張機能が検出されない場合は、インストール状態から順に確認します。最初から再インストールすると、接続設定の問題を見落とす場合があります。

chrome://extensionsを開き、Claude拡張機能が存在し、有効になっているかを確認します。次にChromeが起動しているか、Claude Codeが最新版かを確かめます。

最後にChromeとClaude Codeを終了します。Chromeを先に起動し、ターミナルからclaude --chromeを実行してください。順に確認すれば、再インストールを避けられます。
出典：Use Claude Code with Chrome（Anthropic）

Browser extension is not connectedと表示される

このエラーは、Native Messaging Hostから拡張機能へ到達できない状態を示します。拡張機能が存在していても、Claude Codeとの通信が確立していません。
※Native Messaging Host＝Claude Codeとブラウザ拡張機能のあいだで通信を仲介するプログラム。

ChromeとClaude Codeを一度終了します。Chromeを先に起動した後、ターミナルからclaude --chromeでClaude Codeを起動し直してください。

再接続で直らない場合は、chrome://extensionsで拡張機能を無効にし、再度有効にします。Native Messaging Hostの設定まで確認すれば、切り分けられます。
出典：Use Claude Code with Chrome（Anthropic）

No tab availableと表示される

No tab availableは、操作できるタブの準備前にClaudeが動作しようとした状態です。接続全体の故障とは限りません。

Claudeへ新しいタブを作成してから再試行するよう依頼します。自分でタブを開く場合は、Chrome連携に使っているブラウザ側に対象ページがあるか確認してください。

複数ブラウザを接続している場合は、操作対象を選びます。対象を揃えると、別の画面を見て待ち続ける事態を防げます。
出典：Use Claude Code with Chrome（Anthropic）

モーダル表示中に操作が止まる

alert、confirm、promptなどのダイアログは、人が閉じる必要があります。JavaScriptのモーダルはブラウザイベントを止めるため、Claudeへ次の操作が届きません。

画面上のダイアログを確認し、内容に問題がなければ手動で閉じます。その後、Claude Codeへ「モーダルを閉じたので続きを実行してください」と伝えます。

モーダルが繰り返し出る場合は、新しいタブで再試行します。内容を確かめてから閉じると、意図しない承認を防げます。
出典：Use Claude Code with Chrome（Anthropic）

長時間後に接続が切れる

長いセッションで接続が切れた場合は、拡張機能のService Worker休止を疑います。一定時間操作がないと、拡張機能側の処理がアイドル状態になる場合があります。
※Service Worker＝拡張機能を画面の裏側で動かす常駐処理。

/chromeを利用できる場合は、Reconnect extensionを選びます。利用できない場合は、ターミナルからclaude --chrome --continueを実行してください。

直近の会話を再開しながら、Chrome連携付きで起動できます。作業の文脈を維持したまま接続を戻せます。
出典：Use Claude Code with Chrome（Anthropic）

【Windows】Native Messaging Hostエラーが出る

Windowsでは、名前付きパイプの競合やHost設定の破損を切り分けます。EADDRINUSEは、ほかのClaude Codeセッションが同じ接続を使っている場合に発生します。

ほかのChrome連携セッションを閉じ、Claude Codeを再起動します。Hostが停止する場合は、Claude Codeの再インストールで設定を再生成します。

Chromeの登録先は、Windowsレジストリ内のHKCU\Software\Google\Chrome\NativeMessagingHosts\です。段階的に確認すると原因を絞れます。
出典：Use Claude Code with Chrome（Anthropic）

Claude CodeのChrome連携でできること5つ

Claude CodeのChrome連携でできる主なことは、以下の5つです。

9.png ／ 内容: 図解。画面テスト、DOM・コンソール・通信調査、定型作業、複数サイト横断、GIF記録の5項目を並べる

画面操作だけでなく、調査、修正、記録まで一つのセッションでつなげられます。

Webアプリの画面を操作して動作確認できる

ローカル環境やステージング環境を開き、画面の動作を確認できます。ブラウザで見える結果とコードを同じセッションで扱えるためです。

確認できる主な項目は、以下のとおりです。

• ボタンのクリック
• フォームへの入力
• エラーメッセージ
• 画面遷移と表示崩れ

自動テストの結果だけを信じず、期待する表示と実際の画面を人が照合します。成功条件を先に示すと、修正結果まで判断しやすくなります。修正前後の比較記録も後から確認できます。
出典：Use Claude Code with Chrome（Anthropic）

DOM・コンソール・ネットワークから原因を調べられる

画面だけではわからない不具合を、DOM、コンソール、通信内容から調査できます。開発者ツールへ表示される情報を、Claude Codeのコード文脈と結び付けられます。

ログは量が多いため、調べる対象を絞ります。確認する情報は、以下のとおりです。

• 送信操作の直後に出たコンソールエラー
• 失敗したネットワークリクエスト
• エラー時のDOM状態

認証情報が含まれる場合は、共有前に除外します。対象を絞ると、不具合の原因を早く特定できます。
出典：Use Claude Code with Chrome（Anthropic）

ブラウザ上の定型作業を自動化できる

フォーム入力やWebページからの情報収集など、繰り返し作業を自動化できます。ローカルのCSVを読み、行ごとにWebフォームへ入力する処理も可能です。

必要な項目をWebページから抽出し、CSVへ保存する使い方もできます。ログイン済み状態を共有できるため、APIがない社内ツールでも操作できます。

フォームの送信は状態を変える操作です。入力まで自動化し、送信直前で止めて件数と内容を人が確認する手順にしてください。
出典：Use Claude Code with Chrome（Anthropic）

複数サイトにまたがる作業を実行できる

複数のタブやサイトを横断し、情報収集から入力までを一つの依頼でつなげられます。同じブラウザの認証状態を利用できるためです。

たとえば、予定表と参加企業の公式サイトを確認し、準備メモを作成できます。

横断作業を依頼するときは、以下の条件を明示します。

• 対象サイト
• 取得する項目
• 保存先
• 送信の可否

条件を先に固定すると、手作業のコピーを減らしながら一連の作業を安全にまとめられます。依頼条件の記録も残します。
出典：Use Claude Code with Chrome（Anthropic）

操作手順をGIFで記録できる

Chrome上の操作をGIFへ記録し、デモや確認手順として共有できます。画面遷移を短い記録にすると、操作の順番が伝わりやすくなります。

GIF記録は状態を変える操作であり、プランモードでは許可が必要です。実行前に、以下の条件を指定します。

• 記録を始める画面
• 記録を終える条件
• 記録する操作

記録には画面の個人情報も映ります。全フレームを確認すると、安全で伝わりやすい手順を共有できます。
出典：Use Claude Code with Chrome（Anthropic）

Chrome以外を含むClaude Codeの活用例は、以下の記事で詳しく解説しています。

Claude in ChromeとChrome DevTools MCP・Playwright MCPの違い

Claude Code標準の連携を使うなら、Claude in Chromeが第一候補です。

Chrome DevTools MCPは、DevToolsのデバッグ機能や性能トレースに強みがあります。

Playwright MCPは、アクセシビリティスナップショットを使います。目的が異なるため、以下の表で選び分けます。
※アクセシビリティスナップショット＝画面の構造を文字情報として取り出したもの。画像ではなくテキストで画面を把握します。

比較項目	Claude in Chrome	Chrome DevTools MCP	Playwright MCP
主な提供元	Anthropic	Google Chromeチーム	Microsoft
導入方法	公式拡張機能と--chrome	MCPサーバーまたはプラグイン	MCPサーバー
得意分野	ログイン済みサイトの操作とClaude Code連携	DevToolsを使うデバッグと性能分析	アクセシビリティ情報を使う反復操作
ブラウザ状態	普段のログイン状態を共有	専用Chromeまたは実行中Chromeへ接続	永続、分離、既存ブラウザ接続を選択
コンソール・通信	確認可能	詳細な調査や性能分析が得意	コンソールとネットワーク要求を確認可能
ヘッドレス	公式連携は可視ウィンドウ	対応	対応
向く人	導入を簡単に済ませたい人	Web性能や障害を深く調べたい人	再利用しやすい操作環境を作りたい人

3方式は排他的ではなく、目的で使い分けられます。普段の操作と性能調査を分けると、導入の手軽さと調査の深さを両立できます。
出典：Use Claude Code with Chrome（Anthropic）、Chrome DevTools for agents（Google）、Playwright MCP（Microsoft）

SHIFT AIでは、生成AIやAIエージェントを日々の業務に活かしたい方に向けて、実務ですぐに使える資料を無料でプレゼントしています。どなたでも受け取れます。

たとえば『Claude Codeで始める業務自動化の教科書』『Claude Code コマンド大全』『AIエージェント用語集』など、明日からの業務にそのまま役立つ資料をご用意しています。

「AIエージェントを使って業務を効率化したい」「まず何から始めればいいか知りたい」という方は、ぜひ以下のボタンから受け取ってください。

Claude CodeとChromeを安全に連携する5つの注意点

Chrome連携を安全に使うための注意点は、以下の5つです。

10.png ／ 内容: 図解。専用プロファイル、最小権限、機密ページ回避、人による最終確認、不審なページ内指示への警戒の5項目

拡張機能の保護機能だけに任せず、人が操作範囲を限定してください。

作業専用のブラウザプロファイルを使う

普段使いとは別に、Chrome連携専用のブラウザプロファイルを作ります。銀行、医療、行政などのアカウントへログインした状態を分離できます。

Anthropicも、機密アカウントへアクセスできない別プロファイルを推奨しています。普段の閲覧環境と分けると、Claudeが見られる範囲を狭められます。

専用プロファイルには、必要なサービスだけを追加します。テスト用アカウントを使うと、誤操作時の影響を小さくできます。
出典：Use Claude in Chrome safely（Anthropic）

サイト権限と操作範囲を最小限にする

拡張機能のサイト権限は、作業に必要な信頼できるドメインへ限定します。すべてのサイトへ常時許可を与える必要はありません。

Claude in Chromeの設定では、サイトごとに操作の許可を管理できます。タスクごとに対象サイトを確認し、作業後は不要な許可を外します。

組織では管理者が許可リストを設定できます。個人でも、想定外のドメインへ移動したら停止する運用が有効です。権限は忘れず定期的に見直してください。
出典：Use Claude Code with Chrome（Anthropic）

機密情報を含むページを開かない

機密情報が見えるページでは、Claude in Chromeの使用を避けます。Claudeは作業中のタブを理解するため、画面のスクリーンショットを取得します。

画面に映った情報は、スクリーンショットの一部として会話へ入ります。表示中の機密情報だけを自動的には除外できません。

公開情報やダミーデータから試し、必要な場合も表示項目を減らします。対象ページを選ぶと、会話へ入る情報を抑えられます。利用前に不要なタブも閉じます。
出典：Use Claude in Chrome safely（Anthropic）

購入・送信・削除は実行前に人が確認する

外部へ影響する操作は、実行直前で止めるよう指示します。取り消しにくい操作の最終判断を人へ残すためです。

依頼時に「入力と下書きまで進め、送信前に停止してください」と明記します。停止後は、以下を確認してください。

• 操作する対象
• 入力した内容
• 金額や件数
• 送信先

Claudeが実行した操作の責任は利用者にあります。最後の操作を人が行うと、誤送信や誤操作を抑えられます。
出典：Use Claude in Chrome safely（Anthropic）

Webページ内の不審な指示を疑う

Webページに埋め込まれた指示をClaudeが誤認する、プロンプトインジェクションに注意します。メールや文書の隠れた文章が、意図しない操作を促す場合があります。

Anthropicは入力内容と実行前の操作を検査しています。危険をゼロにはできないため、信頼できるサイトから始めます。

以下の動作があれば、タスクを停止してください。

• 想定外のタブへ移動する
• 指示していない情報を外部へ送る
• 機密情報の入力を求める

操作目的と履歴を人が確認します。不審な動作で止めると、意図しない外部送信を防げます。
出典：Use Claude in Chrome safely（Anthropic）

Claude CodeとChrome連携に関するよくある質問

Claude CodeとChromeの連携に関する質問は以下の5つです。

• Chrome連携をデフォルトで有効にすると何が変わるか
• プランモードではどの操作に許可が必要か
• Chromeを表示せず操作できるか
• ログイン画面やCAPTCHAも自動操作できるか
• Claude in Chromeはベータ版か

質問に対する回答を確認して、Chrome連携の運用方法を決める参考にしてみてください。

Chrome連携をデフォルトで有効にすると何が変わる？

デフォルトで有効にすると、毎回--chromeを付けずに利用できます。ただし、ブラウザツールが常に読み込まれます。

CLIでコンテキスト使用量が増えるのは、Chromeを使わない作業でも、利用可能なツールとして文脈へ追加されるためです。

/chromeが使える環境ではEnabled by defaultを選択できます。Unknown commandになる場合は、都度claude --chromeで起動します。
出典：Use Claude Code with Chrome（Anthropic）

プランモードではどのブラウザ操作に許可が必要？

ページの状態を変える操作には許可が必要です。読み取りだけの操作は、原則として確認なしで実行されます。

許可の有無は、以下のように分かれます。

• 原則許可が不要：ページ、コンソール、ネットワークの読み取り
• 許可が必要：クリック、入力、ページ移動、タブ管理、GIF記録
• 読み取りでも許可が必要：スクリーンショットの保存やログの消去

複数操作では、すべてが読み取り専用のときだけ確認なしで動作します。読み取りに限定すれば、操作範囲を把握しやすくなります。
出典：Use Claude Code with Chrome（Anthropic）

Chromeを表示せずヘッドレスで操作できる？

Claude in Chromeによる公式連携は、表示中のブラウザウィンドウで動作します。操作はリアルタイムで画面に表示されます。

そのため、公式連携はヘッドレスの定期テストへ置き換える用途には向きません。人が画面を見ながら確認する方式です。

ヘッドレス実行が必要なら、MCP方式を検討します。実行環境を分ければ、画面確認と自動実行を使い分けられます。
出典：Use Claude Code with Chrome（Anthropic）

ログイン画面やCAPTCHAも自動操作できる？

ログインページやCAPTCHAに到達すると、Claudeは停止して手動対応を求めます。認証情報やCAPTCHAの入力を無理に自動化する仕組みではありません。

ログインは人が行い、完了後にClaudeへ続きを依頼します。既にログインしているサイトでは、その認証状態を共有できます。

AnthropicはCAPTCHAの回避を禁止しています。認証情報を貼らずに手動対応すれば、安全な認証手順を維持できます。
出典：Use Claude Code with Chrome（Anthropic）、Use Claude in Chrome safely（Anthropic）

Claude in Chromeはベータ版？

2026年7月28日時点では、Claude CodeとのChrome連携は一般提供されています。バージョン2.1.198でプレビュー段階を終えました。

一方、Chromeブラウザ内のサイドパネルから使うClaude in Chromeは、公式サイトでベータと案内されています。更新により表示や挙動が変わる可能性があります。

Chromeブラウザ内での利用とClaude Code連携の提供段階を分けると、表記の違いを理解できます。
出典：Week 27 · June 29–July 3, 2026（Anthropic）、Claude for Chrome（Anthropic）

Claude CodeとChromeを連携して安全にブラウザ操作を始めよう

Claude CodeとChromeは、公式拡張機能を入れ、ターミナルからclaude --chromeで起動すると連携できます。最初は公式ページの読み取りだけで接続を確認してください。

本記事の要点は、以下のとおりです。

• 接続エラーは、再接続、再起動、環境固有設定の順に確認する
• 普段の操作、性能調査、反復操作で接続方式を選び分ける
• 専用プロファイル、最小権限、人による確認を組み合わせる

まずは公開情報の読み取りから始め、結果を確認しながら用途を広げましょう。

個別操作を試せても、業務全体へ広げるには、対象業務と確認工程の設計が必要です。

SHIFT AIでは、生成AIやAIエージェントを活用して業務を効率化したい方に向けて、実務ですぐに使える資料を無料でプレゼントしています。

受け取れる資料には、たとえば以下のようなものがあります。

• 『Claude Codeで始める業務自動化の教科書』：定型業務を自動化する実践パターン
• 『Claude Code コマンド大全』：現場でよく使うコマンドを場面別に解説
• 『AIエージェント用語集』：つまずきやすい重要用語をやさしく整理
• 『Claude Code インストール＆環境構築ガイド』：ゼロから始める初期設定の手順
• 『AI社員の作り方（スキル集）』：AIに仕事を任せるためのスキルづくり
• 『Claude Code × Codex 使い分けガイド』：目的に合わせた賢い使い分け

いずれも、生成AI・AIエージェントをこれから業務に取り入れたい初心者〜中級者の方に向けた内容です。

「AIを使ってみたいけれど何から始めればいいか分からない」「独学で進めるのに限界を感じてきた」という方にとくにおすすめです。

すべて無料で受け取れますので、気になる資料があれば、ぜひ以下のボタンから受け取ってみてください。