エージェント向け Chrome DevTools を使用すると、エージェントはブラウザ セッションを開始し、MCP サーバーを使用して Chrome 拡張機能をインストールまたは操作できます。これにより、コーディング エージェントは拡張機能のライフサイクル（インストール、再読み込み、アクションのトリガー）を制御できます。
コードを変更するたびに、パッケージ化されていない拡張機能を手動で読み込み、拡張機能管理ページで再読み込みボタンをクリックして、拡張機能を手動でトリガーしてテストする代わりに、AI エージェントにプロセス全体を自律的に管理するように指示します。これにより、静的コード生成とライブ拡張機能テストのギャップを埋めることができます。
拡張機能ツールを使用すると、次のことができます。
- 拡張機能をインストールする: ローカル ディレクトリ パスからパッケージ化されていない Chrome 拡張機能をインストールします。
- 拡張機能を一覧表示する: インストールされているすべての Chrome 拡張機能のリスト（名前、ID、バージョン、有効ステータスなど）を取得します。
- 拡張機能を再読み込みする: ID でパッケージ化されていない Chrome 拡張機能を再読み込みして、コードの変更を即座に適用します。
- アクションをトリガーする: ID で拡張機能のデフォルト アクションをトリガーします。
たとえば、メニューを開いたり、バックグラウンド スクリプト アクションを実行したりします（API
ドキュメントの
chrome.actionをご覧ください）。
- 拡張機能をアンインストールする: ID でブラウザ セッションから Chrome 拡張機能を削除します。
前提条件
拡張機能ツールを使用する前に、次のものがあることを確認してください。
- 試験運用版フラグ: エージェント用の DevTools では、[拡張機能] カテゴリはデフォルトで有効になっていません。MCP サーバーを
構成するには、
--categoryExtensionsフラグを使用する必要があります。 - 展開されていない拡張機能:
install_extensionなどのツールでは、パッケージ化されていない拡張機能フォルダの絶対パスが必要なため、ローカル開発に最適です。
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 拡張機能を最初から作成するには、ボイラープレート ファイルを作成し、パッケージ化されていないディレクトリをブラウザに手動で読み込んでテストする必要があります。エージェントに初期コードを生成し、拡張機能を読み込んで、基本的な機能をエンドツーエンドで検証するように指示することで、この手動設定をスキップできます。
プロンプト例:
Build a Chrome extension that turns the page background gray when I click its icon. Save the files to '/tmp/gray-bg-ext', 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 を検査するか、スクリーンショットを撮って、背景がグレーに変わったことを確認し、ボイラープレートが機能していることを証明します。