【2026年最新】Claude Code×Chrome連携でブラウザ自動化5選

「ローカルで直したUIの見た目確認、毎回ターミナルとブラウザを行き来するの地味に面倒だな……」

Claude Codeでコードを書いていて、こう感じたことがある方は多いはずです。修正したら手動でブラウザを開き直し、コンソールのエラーを目で追い、フォームを手入力でテストする。この往復作業自体は単純ですが、積み重なると開発のリズムを崩します。

2026年に入り、Anthropicは「Claude in Chrome」というブラウザ拡張機能と、Claude CodeからそのままChromeを操作できる--chrome連携を提供しています。ターミナルで指示を出すだけで、Claudeがブラウザを開いてクリックし、コンソールログを読み、フォームに入力してくれる仕組みです。この記事では、公式ドキュメントに基づいてセットアップ手順と実践的な活用法5選、そして権限モデル・セキュリティ運用の注意点までをまとめます。

そもそもClaude in ChromeとClaude Code×Chrome連携は何が違うのか

まず整理しておきたいのは、Anthropicが提供しているブラウザ関連の機能は1つではないという点です。「Claude in Chrome」はChrome/Edgeの拡張機能単体でも使える一般ユーザー向け機能で、「Claude Code×Chrome連携」はその拡張機能を土台に、Claude CodeのCLIやVS Code拡張から呼び出す開発者向けの使い方です。

項目	Claude in Chrome（拡張単体）	Claude Code×Chrome連携
主な対象	一般ユーザー・非エンジニア業務	開発者・エンジニアリングチーム
操作の起点	ブラウザのサイドパネル	ターミナル / VS Code / エディタ
典型的な用途	フォーム入力代行、定期巡回タスク、データ抽出	ローカルWebアプリのテスト、UI検証、データ収集の自動化
必要なプラン	Pro / Max / Team / Enterprise（有料プラン）	同左＋Claude Codeのセットアップ
対応ブラウザ	Google Chrome、Microsoft Edge（他のChromium系ブラウザは非対応）	同左

つまり「Claude in Chrome」という同じ拡張機能を、ブラウザ単体で使うか、Claude Codeの開発ワークフローに組み込むかの違いです。本記事は主にエンジニア向けの後者を軸に解説しますが、前提となる拡張機能の仕組みは共通しています。

セットアップ手順（5分で始める）

Claude Code側でChrome連携を使うための前提条件は、Anthropicの公式ドキュメントで以下のように明記されています。

• Google ChromeまたはMicrosoft Edge（Brave・Arc・その他Chromium系ブラウザは非対応。WSL上でも非対応）
• Claude in Chrome拡張機能 バージョン1.0.36以上（Chromeウェブストアから入手）
• Claude Code バージョン2.0.73以上
• Pro / Max / Team / Enterpriseのいずれかの直契約プラン（Amazon Bedrock・Google Cloud・Microsoft Foundry経由の場合は別途claude.aiアカウントが必要）

準備ができたら、ターミナルで--chromeフラグを付けてClaude Codeを起動します。

# 動作環境: Claude Code v2.0.73以上、Claude in Chrome拡張 v1.0.36以上
# 注意: 本番環境で使用する前に、必ずテスト環境で動作確認してください。

claude --chrome

すでに起動しているセッション内であれば、/chromeコマンドでも同じことができます。接続状態の確認、権限管理、拡張機能の再接続、複数ブラウザが繋がっている場合の選択もこのコマンドから行います。

> /chrome
# 接続状態の確認・権限管理・拡張の再接続・使用ブラウザの選択ができる

毎回--chromeを打つのが面倒な場合は、/chromeを実行して「Enabled by default」を選べば常時有効化できます。ただし公式ドキュメントは「CLIでデフォルト有効にするとブラウザツールが常にロードされるためコンテキスト使用量が増える」と注意しています。普段は使わず、必要なときだけ--chromeを付ける運用の方が無駄がありません。

ブラウザ操作の基本を押さえたら、次はAIエージェントを本番の開発フローに組み込む考え方も合わせて押さえておくと、Chrome連携の位置付けが理解しやすくなります。全体像はAIエージェント実装ロードマップ｜RAG・実行・運用の必須技術【2026】で整理しています。

まず試したい実践活用5選

1. ローカルWebアプリのライブデバッグ

フォームのバリデーションを修正したときなど、実際にブラウザで動かして確認する作業をそのままClaudeに任せられます。

I just updated the login form validation. Can you open localhost:3000,
try submitting the form with invalid data, and check if the error
messages appear correctly?

Claudeはローカルサーバーにアクセスし、フォームを実際に操作し、表示されたエラーメッセージを報告します。コンソールログも読めるので「ダッシュボードページを開いてページ読み込み時のコンソールエラーを確認して」という指示も可能です。ログは冗長になりがちなので、「特定のエラーパターンだけ教えて」のように絞り込みを指示するのがコツです。

2. Figmaモックとの見た目突き合わせ

デザインカンプ通りに実装できているかの確認も、UIを作った後にブラウザで開いて見比べる作業をClaudeに任せられます。ログイン状態を引き継いでいるため、社内の認証が必要なステージング環境でもそのまま検証できます。

3. Webページからのデータ抽出

商品一覧ページから名前・価格・在庫状況を抜き出してCSVに保存する、といった定型作業も自然文の指示だけで実行できます。

Go to the product listings page and extract the name, price, and
availability for each item. Save the results as a CSV file.

4. 定期実行タスクの自動化

Claude in Chromeの拡張機能には、日次・週次・月次・年次でブラウザタスクを自動実行するスケジュール機能があります。「毎朝、特定のダッシュボードの数値をチェックする」といった巡回作業を仕込んでおけば、手動で開く手間がなくなります。

5. 複数サイトを横断するワークフロー

「明日の会議予定を確認し、社外の参加者がいれば会社サイトを調べてメモを追加する」のような、複数のタブ・サイトをまたぐ調査作業もタブを行き来しながら実行してくれます。Googleドキュメントやスプレッドシート、Notionなど、ログイン済みのWebアプリであればAPI連携なしにそのまま操作対象にできるのが特徴です。

権限モデルとセキュリティ運用ルール

Claude in Chromeは、ブラウザを実際に操作するために合計15種類のChrome拡張機能権限を要求します。公式の権限一覧から、業務利用で特に意識すべきものを抜粋します。

権限	用途
debugger	ボタンクリック・文字入力・スクリーンショット取得など、ブラウザを実際に制御する中核権限
webNavigation	高リスクなサイトと判定した場合に介入するための権限
alarms	指定した時刻にスケジュールタスクを実行するための権限
declarativeNetRequestWithHostAccess	拡張機能をAnthropicのサーバーに識別させ、利用状況の把握・トラブル対応に使う権限
nativeMessaging	Claude DesktopやClaude Codeなど、PC上の他のAnthropic製品とシームレスに連携するための権限

Anthropicは「Use Claude in Chrome safely」という専用ドキュメントで、次のような運用上の注意を明示しています。

• 金融・医療・行政サービスなど、機密性の高いアカウントにはアクセスできない専用のブラウザプロファイルを分けて使う
• まずは信頼できるサイトから試し、素性の分からないサイトやユーザー生成コンテンツを含むサイトは避ける
• 新しいサイトでは特に、Claudeが提案したアクションを実行前に確認する
• 複雑な多段階ワークフローよりも、リサーチやフォーム入力のような単純なタスクから始める

Team/Enterpriseプランには組織向けの管理機能もあります。管理者はアクセスを許可するサイトの「allowlist」、絶対にアクセスさせない「blocklist」を設定でき、Enterpriseのカスタムロールでは拡張機能自体の利用可否をロール単位で制御できます。導入形態も、ユーザーによるセルフサービスインストールに加えて、Google Workspace管理コンソールなどの既存のChrome管理ツール経由での一括配布（managed deployment）が選べます。組織を横断した悪用を防ぐforceLoginOrgUUIDというChrome enterprise policyも用意されており、拡張機能の利用を特定の組織に限定できます。

いずれの機能も、AIエージェントを業務システムに組み込む際の権限管理・監査ログ設計の考え方と地続きです。エージェント全般のガードレール設計はAIエージェントガードレール比較2026｜選び方完全ガイドも参考にしてください。

【要注意】よくある失敗パターンと回避策

失敗1：拡張機能が検出されない

❌ そのまま放置して再試行を繰り返す
⭕ chrome://extensionsで拡張機能が有効か確認し、claude --versionでClaude Codeが最新か確認したうえで、Claude Code内で/chromeを実行して「Reconnect extension」を選ぶ

なぜ重要か：初回接続時はネイティブメッセージングのホスト設定ファイルが作成されますが、Chromeはこれを起動時にしか読み込みません。初回で認識されない場合はChrome自体の再起動が必要です。

失敗2：長時間セッションで接続が切れる

❌ 動かなくなったら拡張機能を都度アンインストールする
⭕ Chrome拡張機能のservice workerは非アクティブ状態が続くとアイドル化する仕様のため、/chromeから「Reconnect extension」を選ぶだけで復旧する

失敗3：モーダルダイアログでブラウザが応答しなくなる

❌ 何度も同じ指示を送り直す
⭕ alert・confirm・promptなどのJavaScriptダイアログはブラウザイベントをブロックするため、まず手動でダイアログを閉じてからClaudeに続行を指示する

失敗4：ログイン画面やCAPTCHAで処理が止まったと誤解する

❌ フリーズしたと判断してタスクを中断する
⭕ Claudeはログインページやセキュリティ確認を検知すると自動的に一時停止し、ユーザーに手動対応を促す仕様。これは想定どおりの安全設計であり、資格情報を勝手に入力しようとしない挙動そのものが望ましい

Claude Code×Chrome vs Playwright MCP vs Computer Use API — どれを使うべきか

ブラウザをAIエージェントに操作させる手段は、Claude Code×Chrome連携だけではありません。すでに用途が近い選択肢としてPlaywright MCPやComputer Use APIがあります。使い分けの目安を整理します。

手段	ログイン状態の引き継ぎ	実行環境	向いている用途
Claude Code×Chrome連携	あり（普段使うブラウザのログインをそのまま利用）	手元のGoogle Chrome / Edge	個人の開発ワークフロー内でのUI検証・デバッグ・データ抽出
Playwright MCP	設定次第（基本はクリーンな自動化環境）	ヘッドレス/ヘッドフルなブラウザ環境	CI/CDに組み込む再現性の高いE2Eテスト・自動化パイプライン
Computer Use API	なし（画面全体を画像として認識・操作）	仮想デスクトップ環境（サンドボックス）	ブラウザに閉じない、OS全体のGUI操作を伴う自動化

個人のログイン状態をそのまま使い、手元のブラウザで素早く検証したいなら Claude Code×Chrome連携、CI環境で繰り返し実行する自動テストを組みたいなら Playwright MCP、ブラウザの外にあるデスクトップアプリまで含めて操作させたいなら Computer Use API、という住み分けです。Playwright MCPの実装方法はPlaywright MCP完全ガイド2026｜AIブラウザ自動化の仕組みと実装、Computer Use APIの実装はComputer Use本番運用ガイド2026｜ループ設計とtask budgetで詳しく解説しています。

よくある質問

Q1. Claude in ChromeとClaude Code×Chrome連携は無料で使えますか？

いいえ。公式ドキュメントによると、Claude in ChromeはPro・Max・Team・Enterpriseのいずれかの有料プランで利用できるベータ機能で、無料プランには含まれません。

Q2. Chrome以外のブラウザでも使えますか？

Google ChromeとMicrosoft Edgeのみが公式サポート対象です。Brave・Arc・その他のChromium系ブラウザやモバイル端末、WSL環境では利用できません。

Q3. どのAIモデルが使えますか？

公式サポートページには「Claude in Chromeはすべてのパブリックモデルで利用可能」と明記されています。プラン別の利用可能モデルはAnthropicの料金ページで最新情報を確認してください。

Q4. 会社のアカウントで使う場合、勝手に社内システムを操作されませんか？

Team/Enterpriseプランには管理者機能があり、アクセスを許可するサイトの allowlist、アクセスさせないサイトの blocklist を設定できます。Enterpriseのカスタムロールでは、拡張機能自体の利用可否をロール単位で管理者が付与・剥奪することも可能です。

Q5. Playwright MCPと何が違うのですか？

Claude Code×Chrome連携は普段使っているブラウザのログイン状態をそのまま引き継いで動く点が最大の違いです。Playwright MCPはCI/CDでの再現性の高い自動テストに向いており、用途が異なります。

参考・出典

• Get started with Claude in Chrome — Anthropic Claude Help Center（参照日: 2026-07-08）
• Use Claude Code with Chrome — Anthropic Claude Code Docs（参照日: 2026-07-08）
• Use Claude in Chrome safely — Anthropic Claude Help Center（参照日: 2026-07-08）
• Claude in Chrome admin controls — Anthropic Claude Help Center（参照日: 2026-07-08）
• Claude in Chrome Permissions Guide — Anthropic Claude Help Center（参照日: 2026-07-08）

まとめ：今日から始める3つのアクション

1. 今日やること：Claude Codeを最新版に更新し、Chromeウェブストアから拡張機能をインストールしてclaude --chromeで接続を確認する
2. 今週中：ローカル開発中のUI検証やコンソールログ確認など、手動で繰り返しているブラウザ作業を1つ選んでClaudeに任せてみる
3. 今月中：チームで使う場合はTeam/Enterprise管理者機能のallowlist/blocklistを設計し、機密性の高いサイトへのアクセスを事前に制限しておく

あわせて読みたい:

• Claude Code TUIフルスクリーンモード完全ガイド — ターミナル作業を効率化するもう一つの設定術
• Playwright MCP完全ガイド2026 — CI環境での再現性重視のブラウザ自動化を組みたい方向け

---

著者：佐藤傑（さとう・すぐる）
株式会社Uravation代表取締役。X（@SuguruKun_ai）フォロワー10万人超。100社以上の企業向けAI研修・導入支援。著書累計2.5万部突破。