Claude in Chrome、正式ベータへ — 何ができるようになったのか
2026年春、AnthropicはChromeブラウザ拡張機能「Claude in Chrome」のベータを、Pro / Team / Enterprise / Maxの全有料プランユーザーに開放した。当初は1,000人のMaxユーザー限定パイロットから始まり、数ヶ月の安全性テストを経ての正式ベータ展開だ。
単なる「ブラウザにAIが入った」話ではない。特に開発者にとって大きいのは、Claude Codeとの連携機能だ。ターミナルでコードを書き、ブラウザで動作確認し、コンソールエラーをClaudeが直接読み取ってデバッグする——これが一連のフローとして完結するようになった。
何が変わり、何に気をつけるべきか。ファクトと技術的な意味を整理する。
何が発表されたのか — 主要機能の全体像
| 機能 | できること | 対応プラン |
|---|---|---|
| ブラウザ操作 | ボタンクリック、フォーム入力、ページナビゲーション | 全有料プラン（ベータ） |
| コンテンツ読み取り | DOM状態、コンソールエラー、ネットワークリクエスト | 全有料プラン（ベータ） |
| Claude Code連携 | ターミナルのエラーをブラウザ側Claudeが解析 | 全有料プラン（ベータ） |
| ワークフロー録画 | 操作を録画してClaudeに繰り返し実行させる | 全有料プラン（ベータ） |
| サイドパネル | 閲覧中のページを見ながら並行してChatができる | 全有料プラン（ベータ） |
対応ブラウザはGoogle ChromeとMicrosoft Edgeの2つ。ChromeウェブストアからAnthropicの拡張機能をインストールし、claude.aiのアカウントでサインインするだけで利用できる（最終確認日: 2026-04-07）。
技術的に見ると — Claude Codeとの連携が核心
一般ユーザーにとってのメリット（複雑な操作の自動化、Webページの情報収集）は分かりやすい。だが開発者視点で最も注目すべきは、デバッグワークフローの変化だ。
従来のフロントエンド開発・デバッグフローはこうだった。
- コードを書く（エディタ/ターミナル）
- ブラウザで動作確認
- DevToolsでエラーを確認
- エラーをコピーしてChatGPT/Claudeに貼り付け
- 回答をもとにコードを修正
- 1に戻る
Claude in Chrome + Claude Codeを組み合わせると、このフローが短縮される。
- Claude Codeでコードを書く（ターミナル）
- ブラウザで動作確認（Claude in Chromeがコンソールエラーを読み取り中）
- Claude Codeにフィードバックが自動送信される
- Claude Codeが修正コードを提案・適用
「ターミナル→ブラウザ→ターミナル」のコンテキストスイッチが、Claude同士の連携で吸収される形だ。
DOM読み取りとコンソールエラー取得の仕組み
拡張機能はChrome Extension APIを使って、閲覧中のページのDOMツリーとコンソールログへのアクセスを取得する。Claudeはこれを「ツール」として受け取り、ページの現在の状態を把握した上で回答を生成する。
開発者ツールで見えているものを、Claudeも見ている——それがこの機能の本質だ。
Claude Code連携の実際のデバッグフロー
Claude in ChromeとClaude Codeを連携させる際の推奨フローを示す。ターミナルでClaude Codeを起動し、ブラウザ側でClaude in Chromeを有効にしておくことで、エラー情報の共有が自動化される。
# Claude Codeをヘッドレスモードで起動してブラウザエラーを受け取る例
# 前提: Claude in Chrome拡張機能がインストール済み
# 1. プロジェクトディレクトリでClaude Codeを起動
cd ~/my-project
claude
# 2. ブラウザで動作確認中にコンソールエラーが発生した場合
# Claude in ChromeのサイドパネルでエラーをClaude Codeに送信
# （拡張機能の「Send to Claude Code」ボタン or コンテキストメニュー）
# 3. Claude Codeが直接コンソールエラーの内容を受け取り、関連ファイルを調査
# 注意: 本番環境で使用する前に、必ずテスト環境で動作確認してください。
Chrome DevToolsプロトコルで取得できる情報の種類
Claude in Chromeが読み取れる情報の範囲を整理しておく。これを理解していないと、「できると思ったのにできなかった」という誤解が生まれる。
// Chrome DevTools Protocol経由でClaudeが取得できる情報の例（概念コード）
// 実際の操作はClaude in Chromeが内部で行う
// 1. コンソールエラーの取得
// Console.messageAdded イベントから:
// { source: "javascript", level: "error", text: "Uncaught TypeError: ...", url: "...", line: 42 }
// 2. ネットワークリクエストの確認
// Network.responseReceived イベントから:
// { requestId: "...", response: { url: "https://api.example.com/data", status: 404, headers: {...} } }
// 3. DOM状態の取得
// DOM.getDocument から始まり、querySelector相当の操作が可能
// { nodeId: 1, nodeType: 9, nodeName: "#document", children: [...] }
// 注意: Claudeが直接JavaScriptを実行するわけではなく、
// Chrome拡張機能がCDPを通じて情報を収集し、Claudeに渡す仕組みです。
# Claude Code CLIとの連携確認コマンド
# Claude in Chromeがインストール済みか確認
google-chrome --list-extensions 2>/dev/null | grep -i claude ||
echo "Chrome拡張機能の確認はchrome://extensions/で行ってください"
# Claude Code側でChromeデバッグ情報を受け取るか確認
# （実際にはClaude in Chrome拡張機能が橋渡しをする）
claude --version
# 注意: 本番環境で使用する前に、必ずテスト環境で動作確認してください。
安全性と現実のリスク — Anthropicが公開したデータ
Anthropicはパイロット段階でのセキュリティテスト結果を公開している。ブラウザ操作AIの最大リスクはプロンプトインジェクション攻撃だ。
「悪意あるWebサイト、メール、ドキュメントに隠された指示が、AIをだましてファイル削除・データ窃取・金融取引などの有害なアクションを実行させる攻撃」
— Anthropic公式ブログ「Piloting Claude in Chrome」より
Anthropicのテストでは、防御措置を施す前の攻撃成功率が23.6%だった。防御措置の導入後は11.2%に低下したが、ゼロではない。これが3ヶ月のパイロット期間に1,000人限定で始めた理由だ。
Anthropicは現在のベータ版で以下の制限を推奨している。
- 金融・医療などの機密性の高いサイトでは使用しない
- 高リスクなアクション（決済、アカウント操作）には明示的な確認が必要
- サイトごとの権限付与で、信頼できるサイトのみにアクセスを許可する
11.2%という数字を「まだ高い」と見るか「十分に低い」と見るかは用途次第だが、ベータ段階であることを忘れないようにしたい。
開発者が知っておくべきこと — 実務的なインパクト
Claude in ChromeをフロントエンドとClaude Codeを組み合わせた場合、変化するのはデバッグのスピードだけではない。
E2Eテスト記述の自動化
「操作を録画してClaudeに繰り返し実行させる」機能は、E2Eテストの記述コストを下げる可能性がある。QAエンジニアが手動で行った操作手順をそのままClaudeが再現できるなら、PlaywrightやCypressのテストコード生成に活用できる。
ただし現時点では「録画した操作の再現」にとどまり、テストコードへのエクスポートは別途対応が必要だ。
ネットワークリクエストの監視
APIレスポンスの形式やステータスコードをClaudeが直接読み取ることができるため、「フロントエンドのFetchが失敗している理由を調べて」という依頼に対して、実際のリクエスト/レスポンスを確認しながら答えられるようになった。
この先どうなるか
現時点ではベータ。機能の追加・変更・提供停止の可能性はある。Anthropicは安全性テストを継続しており、プロンプトインジェクション対策の改善を最優先にしているとしている。開発者としては、Claude Code連携機能を試しつつ、本番フローへの組み込みは攻撃対策が十分に成熟してからというスタンスが現実的だ。
参考・出典
- Piloting Claude in Chrome — Anthropic公式ブログ（参照日: 2026-04-07）
- Use Claude Code with Chrome (beta) — Claude Code Docs（参照日: 2026-04-07）
- Get started with Claude in Chrome — Anthropic Help Center（参照日: 2026-04-07）
- Claude — Chrome Web Store（参照日: 2026-04-07）
- Claude Code Chrome Integration: What Developers Need to Know（参照日: 2026-04-07）
Claude CodeによるMCP連携の詳細はClaude CodeのMCPツール統合ガイドを参照してください。AIエージェントのセキュリティ面についてはAIエージェントのセキュリティ検証アプローチも合わせてご確認ください。ブラウザ自動化をエージェントに組み込む実装例はMicrosoft Agent Governance Toolkitの活用もご覧ください。
AIエージェントや生成AI活用について専門家に相談したい方は、Uravationのお問い合わせフォームからお気軽にどうぞ。
この記事はAIgent Lab編集部がお届けしました。
