Chrome拡張としてのClaude in Chrome 第1回 Claude in Chromeの基本操作
このシリーズでは、AnthropicのブラウザAIエージェント「Claude in Chrome」を紹介します。第1回は、Chrome拡張単体としての基本的な使い方を解説します。
はじめに
Anthropicが提供する「Claude in Chrome」は、Chrome拡張機能として動作するブラウザAIエージェントです。自然言語の指示だけでWebページの閲覧・クリック・フォーム入力・情報収集を実行でき、ブラウザ操作を自動化できます。
また、Claude Codeと連携すると、コード生成・ビルド・動作確認・デバッグの一連のサイクルを自律的に行えます。この連携については次回以降で紹介します。
本記事では、まずChrome拡張単体としての基本的な使い方を解説します。
Claude in Chromeとは
ここでは、利用するための条件、できること、他ツールとの連携の3点を確認します。
利用条件
Claude in Chromeを利用するための条件を確認しておきましょう。
- Claudeの有料プランが必要：Pro、Max、Team、Enterpriseのいずれか
- ProプランではモデルがHaiku 4.5に限定されます。Sonnet 4.6やOpus 4.7を使いたい場合はMax以上の契約が必要です
- 対応ブラウザ：Google ChromeおよびMicrosoft Edge
なお、現在はベータ版として提供されており、今後仕様が変わる可能性があります。また、セキュリティ上のリスクについても告知されています。使い方の注意点などは本記事のコラム「セキュリティ上の注意」を参照してください。
参考：公式ドキュメント
自然言語の指示だけでブラウザを操作できる
Claude in Chromeを使うと、自然言語の指示だけでブラウザ操作を実行できます。サイドパネルに常駐するため、タブを切り替えることなくClaudeと対話しながら作業できます。
また、拡張機能として動作するため、実際のブラウザのログインセッションをそのまま使えます。GmailやNotionなど普段ログインしているサービスと、APIキーのような事前設定なしに直接やり取りできます。これは拡張機能として当然のことですが、認証済みの実ブラウザ環境で動作するため、ログイン操作なしにサービスへアクセスできます。この特性はClaude Codeとの連携時に特に意味をもちます。
公式サイト（Claude in Chrome）では次のような活用例が紹介されています。
- 分析ダッシュボードからのメトリクス抽出
- Google Driveのファイル整理
- カレンダー管理と会議準備
- 複数サイト間での情報収集・比較
- フォーム入力の自動化
- Webページからのデータ抽出
他ツールとの連携
Claude in ChromeはClaude Code、Claudeのデスクトップアプリ、VS Codeと連携できます。Claude Codeとの連携については次回以降で詳しく紹介します。
パネルの基本的な使い方
Claude in Chromeは、ブラウザのサイドパネルを操作の起点として使います。Chrome拡張をインストールしたら、Chromeの右上にある拡張機能アイコンから「Claude」をクリックしてパネルを開いてください。パネルには次のようなUIが用意されています。
- モデル選択（左上）：Opus 4.7・Sonnet 4.6・Haiku 4.5から使用するモデルを選択する
- 実行前に確認（入力欄左下）：「実行前に確認」と「確認せずに実行」の2択から選ぶ。デフォルトは「実行前に確認」で、Claudeがアクションを実行する前に計画を提示し、承認を求める
- +ボタン（入力欄右）：画面の一部をスクリーンショットしてClaudeに渡したり、画像をアップロードしてClaudeに渡したりできる
パネルにはこの他にもショートカットや録画といった機能を呼び出すためのアイコンがあります。これらについては次節で解説します。
ショートカットとワークフロー録画
パネルには、よく使う指示を保存して呼び出せる「ショートカット」機能と、実際のブラウザ操作を録画してショートカットとして登録できる「ワークフロー録画」機能があります。
ショートカット
よく使う指示をショートカットとして保存しておくと、毎回同じプロンプトを入力する手間がなくなります。チャット欄で「/」を入力するとショートカット一覧にアクセスできます。
ショートカットの作成方法は次の3つがあります。
- 手動で作成：
/→ タスクをスケジュール（Schedule task）、または三点メニュー（右上）→ 設定 → ショートカットからショートカット作成ダイアログを開きます。名前とプロンプトを自分で入力して保存します - 録画から作成：
/→ ワークフローを記録、または入力欄右の矢印アイコンから録画を開始します。録画完了後に自動でダイアログが開き、記録した手順がプロンプトとして自動生成され、ショートカットとして保存できます - 会話から作成：三点メニュー（右上）→ タスクに変換で、現在の会話をもとにショートカットを作成します
ショートカット作成ダイアログでは、名前・プロンプト・開始URL・スケジュール・モデルを設定できます。スケジュールをONにすると実行日時と頻度（1回のみ・毎日・毎週など）を設定でき、指定した時間に自動で実行されます。
ワークフロー録画
録画から作成を選ぶと「録画を開始」ボタンが表示されます。クリックすると録画が始まり、操作・音声・またはその両方でClaudeに手順を伝えられます。音声で「〇〇をクリックして」と話しながら操作すると、Claudeが操作の意図をより正確に理解します。録画を停止するとショートカット作成ダイアログが開き、記録した手順をプロンプトとして保存できます。
基本的な使い方を試してみる
技術調査中によくある場面として、気になるライブラリをいくつか調べながら複数タブを開いている状態があります。それぞれのページを行き来しながら特徴を比較するのは面倒ですし、後でメモするにしても、読み返すのが一苦労です。こういった場面でClaude in Chromeが役立ちます。
ここでは次のシナリオで試してみます。
- 日付系ライブラリ（date-fnsとLuxon）をそれぞれのサイトで調べて複数タブを開いている
- 「これらの特徴を比較して表にまとめて」とClaudeに指示する
比較表の作成
各ライブラリのサイト（date-fnsとLuxon）をタブで開いた状態で、ツールバーのClaudeアイコンをクリックしてサイドパネルを開きます。Claude in Chromeを開くと、現在のタブが自動的にClaudeのタブグループに追加されます。
複数タブを対象にしたい場合は、対象のタブをドラッグしてClaudeのタブグループ内に追加します。今回はdate-fnsとLuxonの2つのタブをグループに入れます。
サイドパネルのチャット欄に次のように入力します。
プロンプト例
このタブグループの2つのサイトを見比べて、各ライブラリの特徴を比較表にまとめてください
「実行前に確認」を設定している場合、Claudeはまずアクセスするサイトと作業手順（プラン）を提示し、承認を求めます。
プランを承認すると、Claudeが各タブを順番に読み取り、サイドパネルに比較表を出力します。
このようにタブグループを活用することで、複数のページをまたいだ情報収集・整理をClaudeに任せられます。
Googleスライドへの出力
Claude in Chromeはログイン済みのブラウザセッションをそのまま利用するため、GoogleスライドやGmailといったサービスとAPIキーなどの事前設定なしに直接連携できます。基本的には、連携したいサービスのページをタブグループに追加した状態でClaudeに指示します。
今回使うGoogleスライドの場合、https://slides.newというURLをブラウザで開くだけで新規プレゼンテーションが作成されます。またClaude in ChromeはGoogleサービスの知識をもっているため、ページを開かずにプロンプトだけで指示できます。先ほどの比較表をGoogleスライドに出力してみます。
プロンプト例
この比較表をGoogleスライドの新しいプレゼンテーションで作成してください
プランを承認すると、Claudeが実際にGoogleスライドを操作してスライドを作成します。このとき、完成まで数分程度かかることがあります。比較表の作成と比べて明らかに時間がかかると感じるかもしれませんが、これには理由があります。
ClaudeがGoogleスライドにコンテンツを流し込む際、内部では人が操作するのと同じようにUI上でテキストを入力していきます。スライドの枚数や内容量が増えるほど操作ステップが積み重なるため、読み取りだけで完結する比較表の作成と比べて時間がかかります。依頼したら別作業をしながら待つ前提で使うとよいでしょう。
なお、ブラウザエージェントがスクリーンショットを撮って画面を視覚的に判断しながら操作する場面でも処理が重くなります。この点については後述の「トークン消費と操作の工夫」で詳しく解説します。
補足：うまくいかない場合
Claudeがスライドを開けない場合は、「https://slides.newを開いて空のスライドを作成し、この比較表をGoogleスライドで作ってください」のように、URLとその役割をプロンプトに明示すると確実です。
ショートカットとワークフロー録画の活用
比較項目を毎回プロンプトで指定するのが面倒な場合はショートカットが便利です。たとえば今回のようなライブラリ比較で、バンドルサイズ・メンテナンス状況・GitHubのスター数を毎回の比較条件にしたい場合、その条件をショートカットとして保存しておくことで、次回以降は「/」から呼び出すだけで同じ条件で比較できます。
録画は、複数ステップにわたるUI操作をプロンプトで説明するのが難しい場面で役立ちます。たとえば経理・人事系Webアプリで毎月の給与明細をダウンロードする場合、人事労務ページへの遷移・給与メニューの選択・対象月の選択・印刷ボタンのクリックといった一連の操作を録画してショートカット化しておくと、ショートカット実行時に月を指定するだけで自動操作できます。
トークン消費と操作の工夫
Claude in Chromeは、視覚的な判断が必要な場面でスクリーンショットを撮影・解析して状態を把握しながら動きます。そのため、通常のテキストチャットと比べてトークン消費が大きくなります。特にUI要素の特定が難しい指示では、スクリーンショットを繰り返し撮影する動作が続き、なかなか処理が終わらないことがあります。たとえばホバーしないと表示されないUIをClaudeが見つけられずにループするようなケースがこれにあたります。
トークン消費を抑えるためのポイントをいくつか紹介します。
モデルをHaiku 4.5にする
テキスト読み取りや情報整理など、高度な推論が不要な作業ならHaiku 4.5で十分な場合があります。Max以上のプランではモデルを選択できます。
スクリーンショット操作を制限するプロンプトを書く
Claude in Chromeは内部でさまざまなツールを使い分けながら動作します（後述のツール一覧を参照）。その中でも画面全体をキャプチャして視覚的に判断するツールは特にトークンを消費します。要素の特定にはDOMを直接操作するjavascript_toolやfindといったトークン効率のよいツールを使うよう、プロンプトで明示的に指示すると効果的です。
プロンプト例：ツールの指定
要素の特定にはjavascript_toolやfindを使ってください。
スクリーンショット（computerツール）の使用は必要な場合のみにしてください。
試行回数の上限を指定する
要素の特定に失敗し続けるループを防ぐため、次のように上限を設けることも有効です。
プロンプト例：試行回数の上限
3回試みてうまくいかない場合は、その旨を報告して中断してください。
Claude in Chromeは内部でさまざまなツールを使い分けながら動作しますが、どのツールが使われるかはClaudeが自律的に判断します。そのため、思いとおりに動かないときはツールを明示的に指定するのが有効です。次にツールの一覧とトークン効率の分類を示します。
トークン効率：軽量
| ツール名 | 用途 |
|---|---|
| find | 自然言語またはCSSセレクターで要素を検索 |
| javascript_tool | ページコンテキストでJavaScriptを実行（DOM操作など） |
| navigate | URLへ移動、履歴の前後移動 |
| read_console_messages | コンソールログを取得（patternでフィルタ可能） |
| resize_window | ウインドウサイズを変更 |
| shortcuts_execute | ショートカット・ワークフローを実行 |
| shortcuts_list | 利用可能なショートカット一覧を表示 |
| switch_browser | 接続するChromeブラウザを切り替え |
| tabs_context_mcp | 現在のタブ一覧・タブグループ情報を取得 |
| tabs_create_mcp | 新しいタブを作成 |
| update_plan | 実行前に操作プランをユーザーに提示・承認 |
トークン効率：中程度
| ツール名 | 用途 |
|---|---|
| form_input | フォーム要素に値を入力 |
| get_page_text | ページのテキストコンテンツを取得 |
| read_network_requests | ネットワークリクエストを取得 |
| upload_image | 画像をファイルinputまたはドラッグ&ドロップでアップロード |
トークン効率：重め
| ツール名 | 用途 |
|---|---|
| computer | 画面全体をキャプチャして視覚的に操作（マウス・キーボード） |
| gif_creator | 操作のGIFアニメを録画・エクスポート |
| read_page | ページの構造（アクセシビリティツリー）をまるごと取得 |
セキュリティ上の注意
Claude in Chromeを使う上で、プロンプトインジェクションには注意が必要です。Webページに埋め込まれた悪意ある指示がClaudeを操作し、ユーザーの知らないうちに意図しない動作をさせる可能性があります。Anthropic公式もこのリスクを明示しています。
「実行前に確認」モードを使うと、Claudeが操作前に計画を提示して承認を求めます。「確認せずに実行」は意図しない操作が起きるリスクが高いため、特に理由がなければデフォルトの「実行前に確認」のまま使ってください。
また、次のような操作は避けることを推奨します。
- 本番環境での操作
- 顧客データや認証情報が関わる作業
- 削除・外部送信など取り返しのつかない操作
まとめ
本記事では、Claude in Chromeの利用条件や基本的なパネルの使い方、タブグループを活用した情報収集・整理の例、トークン消費を抑えるための工夫について解説しました。
次回は、Claude Codeとの連携方法と、それによって実現できることを紹介します。