Claude in Chromeとは何ですか？

VS CodeやCursor上のClaude Codeから、Chromeブラウザを直接操作できるベータ機能です。コード修正とブラウザ確認を切り替えずに、一連のワークフローとして実行できます。

Claude in Chromeの導入に必要な条件は？

Google Chrome、Claude in Chrome拡張機能（v1.0.36以上）、Claude Code（v2.0.73以上）、Anthropic直接プラン（Pro/Max/Team/Enterprise）が必要です。

Playwright MCPとの違いは何ですか？

Claude in Chromeはスクリーンショットベースで普段のChromeをそのまま使えます。Playwright MCPはアクセシビリティツリーベースで要素指定が正確ですが、別ブラウザが起動しログインし直す必要があります。

サードパーティプロバイダー経由で利用できますか？

Amazon Bedrock、Google Cloud Vertex AI、Microsoft Foundry経由では利用できません。Anthropic直接のclaude.aiアカウントが必要です。

【Claude Code】Claude in Chrome - ブラウザ操作でフロントエンド開発を効率化

PUBLISHED 2026-02-05

Claude Codeにブラウザ操作機能が追加されました。Claude in Chromeを使えば、VS CodeやCursorからChromeブラウザを直接操作し、コード修正とブラウザ確認をコンテキストを切り替えずに実行できます。

ブラウザ操作は可視化されたChromeウィンドウ上でリアルタイムに実行されます。ログイン状態も共有されるため、普段使っているサイトにそのままアクセスできます。

Claude in Chrome とは

Claude in Chromeは、Claude Codeと連携するChrome拡張機能です。CLIやVS Code拡張機能からChromeブラウザを直接制御し、コーディングとブラウザ操作を1つのワークフローにまとめられます。

🔍 ライブデバッグ

コンソールエラーやDOMの状態を直接読み取り、原因コードを修正できます。

🎨 デザイン検証

FigmaモックからUIを構築し、ブラウザで表示を確認して一致するか検証できます。

🧪 Webアプリテスト

フォームバリデーション、ビジュアルリグレッション、ユーザーフローの検証ができます。

🔐 認証済みWebアプリ操作

Google Docs、Gmail、Notionなど、ログイン済みのアプリをAPI不要で操作できます。

📊 データ抽出

Webページから構造化されたデータを取得し、ローカルに保存できます。

⚡ タスク自動化

データ入力、フォーム記入、複数サイトをまたぐワークフローを自動化できます。

🎬 セッション録画

ブラウザ操作をGIFとして録画し、ドキュメント化や共有に利用できます。

🖱️ 手動介入対応

ログインページやCAPTCHAに遭遇した場合、Claudeが一時停止して手動操作を依頼します。

導入手順

前提条件

要件	バージョン
Google Chrome	最新版
Claude in Chrome 拡張機能	v1.0.36 以上
Claude Code	v2.0.73 以上
プラン	Pro / Max / Team / Enterprise

⚠️

ベータ版のため、Google Chromeのみ対応です。Brave、Arc等のChromiumベースブラウザやWSLには対応していません。

📌

Amazon Bedrock、Google Cloud Vertex AI、Microsoft Foundryなどのサードパーティプロバイダー経由では利用できません。Anthropic直接のclaude.aiアカウントが必要です。

セットアップ

Chrome拡張機能をインストール

Chromeウェブストアにアクセスして「Claude in Chrome」拡張機能を追加します。

Chromeウェブストアにアクセス
「Chromeに追加」をクリック
ツールバーのパズルピースアイコンからピン留め

Claude Codeをインストール

CLIまたはVS Code拡張機能からClaude Codeをインストールします。

VS Codeの場合：

Ctrl+Shift+X で拡張機能パネルを開く
「Claude Code」で検索（発行元: Anthropic）
インストール後、サイドバーのSparkアイコンをクリックして起動

Chrome連携を有効化

CLIの場合、--chrome フラグを付けて起動します。

claude --chrome

既存セッション内からは /chrome コマンドで有効化できます。VS Code拡張機能では、Chrome拡張機能がインストールされていれば追加フラグは不要です。

デフォルトで有効にする

毎回 --chrome を渡すのが面倒な場合、/chrome を実行して「Enabled by default」を選択します。

💡 コンテキスト消費に注意

デフォルト有効にするとブラウザツールが常時読み込まれるため、コンテキスト消費が増加します。消費が気になる場合は無効にして、必要なときだけ --chrome を使用してください。

サイト権限の管理

サイトレベルの権限はChrome拡張機能から継承されます。Chrome拡張機能の設定でClaudeがブラウズ、クリック、入力できるサイトを制御できます。

プランによる制限

プラン	利用可能なモデル
Pro	Haiku 4.5 のみ
Max / Team / Enterprise	モデル選択可

CLIとVS Codeでの使い方

Chrome連携の起動方法と操作方法は、CLIとVS Codeで異なります。

	CLI	VS Code拡張機能
起動方法	`claude --chrome` または `/chrome`	フラグ不要（Chrome拡張があれば自動）
ブラウザ指示	通常のプロンプトで指示	`@browser` メンションで指示
ツール選択	`/mcp` → `claude-in-chrome`	添付メニューからブラウザツールを選択

CLIでの使い方

--chrome フラグを付けて起動し、通常のプロンプトでブラウザ操作を指示します。

claude --chrome

code.claude.com/docs を開いて、検索ボックスをクリックし、
「hooks」と入力して、表示される結果を教えてください。

/chrome コマンドを実行すると、以下のメニューが表示されます。

接続ステータスの確認: 現在の接続状態をチェック
権限の管理: サイト固有の権限設定
拡張機能の再接続: 接続が切れた場合の再接続（Reconnect extension）
デフォルトで有効化: 毎回 --chrome を渡さずに済む設定（Enabled by default）

VS Code拡張機能での使い方

VS Codeでは、Claude Code拡張機能（発行元: Anthropic）にChrome連携が統合されています。Chrome拡張機能がインストールされていれば、--chrome フラグなしで自動的にブラウザツールが利用可能です。

ブラウザ操作を指示する場合は、@browser メンションを使用します。

@browser localhost:3000 を開いてコンソールにエラーがないか確認してください

添付メニューからは、以下のような個別のブラウザツールを選択することもできます。

新しいタブを開く
ページ内容を読み取る
スクリーンショットを取得
要素をクリック・入力

💡 CursorでもOK

VS Code互換のCursorでもClaude Code拡張機能は動作します。同様にChrome拡張機能がインストールされていれば、ブラウザ連携が利用可能です。

実践ワークフロー例

/mcp から claude-in-chrome を選択すると、利用可能なブラウザツールの一覧を確認できます。

ローカルWebアプリのテスト

開発中のアプリの動作確認をClaudeに依頼できます。

ログインフォームのバリデーションを更新しました。
localhost:3000 を開いて、不正なデータで送信してみて、
エラーメッセージが正しく表示されるか確認してください。

Claudeがローカルサーバーにアクセスし、フォーム操作を行い、結果を報告します。

コンソールログでデバッグ

Claudeがコンソール出力を読み取って問題を診断します。

ダッシュボードページを開いて、ページ読み込み時に
コンソールにエラーが出ていないか確認してください。

💡 ログ量に注意

コンソールログは膨大になることがあります。「すべてのログを表示して」ではなく、探すべきパターンやエラータイプを具体的に指示するのが効果的です。

フォーム入力の自動化

繰り返しのデータ入力作業を自動化できます。

contacts.csv に顧客の連絡先一覧があります。
各行について crm.example.com の「Add Contact」をクリックし、
名前、メール、電話番号を入力してください。

Claudeがローカルファイルを読み取り、Webインターフェースにデータを入力します。

Google Docsで下書き作成

APIセットアップ不要で、ログイン済みのドキュメントに直接書き込めます。

最近のコミットをもとにプロジェクト進捗を作成し、
docs.google.com/document/d/abc123 に追加してください。

Gmail、Notion、Sheetsなど、ログイン済みのWebアプリであれば同様に操作可能です。

Webページからデータ抽出

Webサイトから構造化データを取得してファイルに保存できます。

商品一覧ページにアクセスして、各商品の名前、価格、
在庫状況を取得してCSVファイルに保存してください。

複数サイトをまたぐワークフロー

複数のWebサイトにまたがるタスクを一連の操作で実行できます。

明日のカレンダーの会議を確認し、外部参加者がいる会議について
相手の会社サイトを調べてメモを追加してください。

Claudeが複数のタブを使い分けながら情報収集と作業を進めます。

デモGIFの録画

ブラウザ操作をGIFとして録画し、ドキュメント化に活用できます。

カートに商品を追加してから確認ページまでの
チェックアウトフローをGIFで録画してください。

Playwright MCP との違い

Claude in Chromeと同様にブラウザ操作が可能なPlaywright MCPとの違いを整理します。

項目	Claude in Chrome	Playwright MCP
仕組み	Chrome拡張で実際のブラウザを操作	Playwrightライブラリでブラウザを自動制御
操作方法	スクリーンショット + 座標クリック	アクセシビリティツリー + コード実行
セットアップ	Chrome拡張を入れるだけ	`claude mcp add` コマンドで追加
ブラウザ	普段使いのChromeをそのまま使う	Playwrightが別ブラウザを起動
ログイン状態	Chromeのセッションをそのまま使える	ログインし直す必要あり
操作精度	視覚ベースのためズレることがある	要素指定が正確
コンテキスト消費	スクリーンショットで多め	アクセシビリティツリーで比較的少なめ

使い分けの指針

👁️ Claude in Chrome が向いている場面

見た目の確認が主目的
ログイン済みのサイトを操作したい
セットアップを簡単に済ませたい

🤖 Playwright MCP が向いている場面

E2Eテストの作成・実行
要素を正確に操作したい
テストコードとして残したい

💡 両方を使い分ける

開発中のプレビュー確認にはClaude in Chrome、自動テストや正確な操作にはPlaywright MCPが適しています。両方を導入して場面に応じて使い分けるのが理想的です。

トラブルシューティング

拡張機能が検出されない

Claude Codeが「Chrome extension not detected」と表示する場合の対処法です。

chrome://extensions で拡張機能が有効か確認
claude --version でClaude Codeが最新か確認
Chromeが起動中か確認
/chrome から「Reconnect extension」で再接続
解決しない場合、Claude CodeとChromeの両方を再起動

💡 初回起動時の注意

Chrome連携を初めて有効にすると、Claude Codeがネイティブメッセージングホストの設定ファイルをインストールします。Chromeは起動時にこのファイルを読み取るため、初回は拡張機能が検出されないことがあります。Chromeを再起動してください。

ネイティブメッセージングホストの設定ファイルの場所は以下の通りです。

OS	パス
macOS	`~/Library/Application Support/Google/Chrome/NativeMessagingHosts/`
Linux	`~/.config/google-chrome/NativeMessagingHosts/`
Windows	レジストリ `HKCU\Software\Google\Chrome\NativeMessagingHosts\`

ブラウザが応答しない

Claudeのブラウザコマンドが動作しなくなった場合の対処法です。

モーダルダイアログの確認: JavaScriptの alert、confirm、prompt がページをブロックしている可能性があります。手動でダイアログを閉じてからClaudeに続行を指示してください。
新しいタブを開くようClaudeに依頼
chrome://extensions で拡張機能を無効→有効にして再起動

長時間セッション中の接続切れ

Chrome拡張機能のService Workerが長時間のセッション中にアイドル状態になり、接続が切れることがあります。/chrome から「Reconnect extension」で再接続してください。

よくあるエラーメッセージ

エラー	原因	対処
Browser extension is not connected	ネイティブメッセージングホストが拡張機能に到達できない	Chrome と Claude Code を再起動し `/chrome` で再接続
Extension not detected	拡張機能が未インストールまたは無効	`chrome://extensions` で確認・有効化
No tab available	タブの準備前にClaudeが操作を実行	新しいタブを作成して再試行を依頼
Receiving end does not exist	Service Workerがアイドル状態	`/chrome` から「Reconnect extension」

Windows固有の問題

Named pipe conflicts（EADDRINUSE）: 他のプロセスが同じnamed pipeを使用している場合、Claude Codeを再起動してください。Chromeを使用している他のClaude Codeセッションを閉じてください。
ネイティブメッセージングホストエラー: 起動時にクラッシュする場合、Claude Codeを再インストールしてホスト設定を再生成してください。

まとめ

Claude in Chrome のポイント

Chrome拡張をインストールして —chrome フラグで起動するだけ
コード修正とブラウザ確認を切り替えなしで一連のワークフローとして実行
普段のChromeセッションを共有し、ログイン済みサイトをそのまま操作可能
デバッグ、テスト、データ抽出、フォーム自動化、GIF録画まで幅広く対応
Playwright MCPとの併用で、視覚確認と正確な自動操作の両方に対応

参考文献

▸ CATEGORY

AI News

▸ TAGS

Claude