エージェント向け Chrome DevTools を使用すると、エージェントはブラウザ セッションを開始し、MCP サーバーを使用して Chrome 拡張機能をインストールしたり、操作したりできます。これにより、コーディング エージェントが拡張機能のライフサイクル（インストール、再読み込み、アクションのトリガー）を制御できるようになります。
解凍された拡張機能を手動で読み込み、コードを変更するたびに拡張機能管理ページで再読み込みボタンをクリックし、拡張機能を手動でトリガーしてテストする代わりに、AI エージェントにプロセス全体を自律的に管理するよう指示します。これにより、静的コード生成とライブ拡張機能テストのギャップが埋められます。
拡張機能ツールを使用すると、次のことができます。
- 拡張機能をインストール: ローカル ディレクトリ パスからパッケージ化されていない Chrome 拡張機能をインストールします。
- 拡張機能を一覧表示する: インストールされているすべての Chrome 拡張機能のリスト（名前、ID、バージョン、有効ステータスなど）を取得します。
- 拡張機能を再読み込み: ID でパッケージ化されていない Chrome 拡張機能を再読み込みし、コードの変更を即座に適用します。
- アクションをトリガーする: メニューを開く、バックグラウンド スクリプト アクションを実行するなど、拡張機能のデフォルト アクションを ID でトリガーします（API ドキュメントの chrome.action をご覧ください）。
- 拡張機能をアンインストールする: ID を指定して、ブラウザ セッションから Chrome 拡張機能を削除します。
前提条件
拡張機能ツールを使用する前に、次のものが揃っていることを確認してください。
- 試験運用版フラグ: 拡張機能カテゴリは、DevTools for Agents でデフォルトで有効になっていません。
--categoryExtensionsフラグを使用して MCP サーバーを構成する必要があります。 - 解凍された拡張機能:
install_extensionなどのツールでは、解凍された拡張機能フォルダへの絶対パスが必要になるため、ローカル開発に最適です。 拡張機能フォルダへのファイル アクセス: サーバーは、ワークスペース ルート内のファイルのみを読み取ることができます。これらは、プロジェクト ディレクトリなど、MCP クライアントが提供するルートです。クライアントがルートを指定しない場合、サーバーは OS の一時ディレクトリにのみアクセスできます。macOS の場合、このディレクトリは
/tmpではありません。拡張機能フォルダがこれらのルートの外にある場合、install_extensionはAccess deniedエラーで失敗します。別のフォルダを許可するには、サーバー引数に--filesystemRootフラグ（エイリアス--workspace）を追加します。"args": ["chrome-devtools-mcp@latest", "--categoryExtensions", "--filesystemRoot=/path/to/extensions"]詳しくは、一時ディレクトリ外のファイルへのアクセスを許可するをご覧ください。
Chrome 拡張機能ツールのユースケース
バグの開発と修正中に拡張機能のライフサイクルを管理するようエージェントに指示します。
注: エージェントの実行手順は、潜在的な動作の例です。エージェントの動作が異なる場合があります。
拡張機能を迅速に反復処理して再読み込みする
ファイルが変更されるたびに拡張機能を手動で再読み込みすると、開発が遅くなります。エージェントにコード修正を適用し、手動で介入することなく拡張機能をすぐに再読み込みして、新しい動作を確認するよう指示します。
プロンプトの例:
一般的なアプローチを使用できます。
Verify the extension has access to the active tab.
または、次のように詳細を指定することもできます。
Update the manifest.json to include the "activeTab" permission. Then, reload the extension with ID 'abc123xyz' and trigger its default action to ensure it works.
エージェントの実行例: エージェントがファイル システムの manifest.json ファイルを編集します。次に、指定された ID を使用して reload_extension ツールを呼び出します。最後に、trigger_extension_action ツールを呼び出して拡張機能を有効にし、コンソールで権限エラーがスローされないことを確認します。
ターゲット ページで拡張機能のデフォルト アクションをテストする
多くの場合、コンテンツ スクリプトまたは拡張機能のアクションが特定のウェブサイトとどのようにやり取りするかをテストする必要があります。エージェントにサイトへの移動、拡張機能のインストール、トリガーを指示して、このプロセスを自動化します。
プロンプトの例:
一般的なアプローチを使用できます。
Test my extension on example.com and verify it works correctly.
または、次のように詳細を指定することもできます。
Navigate to example.com, install the unpacked extension located at '/Users/dev/my-extension', and trigger the extension action. Check the console logs to verify the content script executed correctly.
エージェントの実行例: エージェントは navigate_page を使用してターゲット URL に移動します。次に、指定された絶対パスで install_extension を使用します。拡張機能が読み込まれると、trigger_extension_action を実行してユーザーのクリックをシミュレートします。最後に、list_console_messages を使用して、コンテンツ スクリプトが実行され、想定どおりの出力が生成されたことを確認します。
インストールされている拡張機能を確認してクリーンアップする
自動テストでは、拡張機能が正しいバージョンで正しく読み込まれているかどうかを確認したり、次のテストのためにクリーンな状態を確保するために拡張機能を削除したりする必要がある場合があります。
プロンプトの例:
Uninstall 'My Test Extension' from the browser.
エージェントの実行例: エージェントは list_extensions ツールを使用して、インストールされている拡張機能とそのメタデータのリストを取得します。出力を解析して、「My Test Extension」に関連付けられている ID を特定します。次に、その ID を指定して uninstall_extension ツールを使用し、ブラウザから安全に削除します。
新しい拡張機能を作成してテストする
通常、新しい Chrome 拡張機能をゼロから作成するには、ボイラープレート ファイルを作成し、解凍したディレクトリをブラウザに手動で読み込んでテストする必要があります。この手動設定をスキップするには、エージェントに指示して、初期コードの生成、拡張機能の読み込み、基本的な機能の検証を 1 つのステップでエンドツーエンドで実行します。
プロンプトの例:
Build a Chrome extension that turns the page background gray when I click its icon. Save the files to a 'gray-bg-ext' folder in my project, navigate to example.com, load the extension, and verify that it works.
エージェントの実行例: エージェントは、基本的な Manifest V3 manifest.json と、chrome.action.onClicked イベントをリッスンするバックグラウンド サービス ワーカーを作成します。次に、テストページに移動し、install_extension を呼び出し、trigger_extension_action を使用してユーザーのクリックをシミュレートします。最後に、DOM を検査するか、スクリーンショットを撮って、背景がグレーに変わったことを確認し、ボイラープレートが機能していることを証明します。