Antigravity などの AI コーディング エージェントは、拡張機能コードを驚くほど正確に生成できるようになりました。ただし、その可能性を最大限に引き出し、高品質な結果を確保するには、適切なコンテキストとツールを提供する必要があります。
このガイドでは、コーディング エージェントで適切なツールを設定する方法と、それらのツールがより優れた拡張機能をより迅速に構築するのにどのように役立つかについて説明します。
拡張機能の開発専用に設計されたコーディング エージェントのスキルを作成しました。このスキルは、AI コーディング エージェントにウェブ プラットフォームの専門知識、ベスト プラクティス、最新の API パターンを提供する、Google の広範な取り組みである Modern Web Guidance の一部です。
しかし、拡張機能の構築は最初の一歩にすぎません。コードが想定どおりに動作することを確認できるように、エージェント向け Chrome DevTools を使用すると、AI コーディング アシスタントが Chrome で拡張機能を直接デバッグし、DevTools のデバッグ機能とパフォーマンス分析を活用できます。
セットアップ
最新のウェブ ガイダンス
スキルパックを使用するには、Modern Web Guidance を任意の環境にインストールし、拡張機能スキルを追加します。一般的なツールでの手順は次のとおりです。
CLI
ほとんどのコーディング エージェント（Gemini CLI、Claude Code、Codex など）で推奨されるインストール方法は、Chrome チームが構築した modern-web-guidance CLI を使用することです。modern-web-guidance CLI を使用してスキルをインストールすると、スキルは自動的に最新の状態に保たれます。
npx modern-web-guidance@latest install --choose
これにより、インタラクティブ ウィザードが実行され、好みに合わせてスキルがインストールされます。オプションが表示されたら、コーディング エージェントを選択し、chrome-extensions と modern-web-guidance の両方を選択します。
Antigravity
Antigravity をインストールする際に、拡張機能スキルを含む Modern Web Guidance プラグインを選択できます。または、[Customizations] > [Build With Google Plugins] > [Modern Web Guidance] から追加することもできます。
コーディング エージェント用の Chrome DevTools
エージェント用の Chrome DevTools は、プラグイン、拡張機能、MCP サーバーのいずれかとして、選択したコーディング エージェントに追加できます。
ここでは、よく使用されるエージェントの手順について説明します。
Antigravity
Chrome DevTools MCP サーバーを使用するには、Antigravity のドキュメントに記載されているカスタム MCP サーバーをインストールする手順に沿って操作します。MCP サーバーの構成に次のように追加します。
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--category-extensions",
"-y"
]
}
}
}
Claude Code
claude mcp add chrome-devtools --scope project -- npx chrome-devtools-mcp@latest --categoryExtensions
他のエージェント
他のエージェントの設定手順については、Chrome DevTools MCP GitHub のドキュメントをご覧ください。
CHROMEWEBSTORE.md エージェントの手順
拡張機能を公開するうえで重要なのは、デベロッパー ダッシュボードに情報を入力することです。このスキルでは、コーディング エージェントが CHROMEWEBSTORE.md ファイルを作成して管理し、コードでリクエストされた各権限の正当性など、必要な情報を追跡することで、この問題に対処します。
スキルは、「これを公開しよう」や「この拡張機能をストア用に準備しよう」などのフレーズを使用するとトリガーされますが、エージェント ワークフローを効率化するには、エージェントのシステム指示（Antigravity の場合は ~/.gemini/GEMINI.md、Claude の場合は ~/.claude/CLAUDE.md など）に以下を追加します。
Whenever you are creating or making changes to a Chrome extension, create and manage a CHROMEWEBSTORE.md file. You can use the chrome-extensions skill to learn about the format of this file.
コーディング エージェントを使用して拡張機能をビルドしてテストする
Modern Web Guidance に含まれる拡張機能スキルは、エージェントを次の 3 つの重要な方法でサポートします。
- 最新の API に関する知識: エージェントは、使用しているモデルのトレーニング後にリリースされた可能性のある最新の API について学習します。
- ベスト プラクティス: エージェントは、Chrome 拡張機能の構築を通じて Google のチームが長年にわたり学んできたベスト プラクティスすべてにアクセスできます。
- 送信の準備: 拡張機能を Chrome ウェブストアに送信する際に必要となる可能性のある情報を追跡し、配布を容易にします。
Modern Web Guidance には、パフォーマンス、ユーザー補助、最新の API など、優れたユーザー エクスペリエンスを提供するために必要なすべてのスキルも含まれています。たとえば、組み込みの AI API スキルにより、AI コーディング エージェントは常に最新バージョンの API を使用し、これらの API を使用するための明示的なアーキテクチャ ルールとハードウェア制約に関する追加情報も使用します。これにより、モデルのダウンロードを効率的に管理し、セキュリティに重点を置き、グレースフル フォールバック戦略を実現できます。
このスキルは、コードでリクエストされた各権限の正当性など、公開に必要な情報をエージェントが追跡するのにも役立ちます。たとえば、コーディング エージェントにサイドパネル API を使用して拡張機能を構築し、Chrome ウェブストアに公開するよう依頼すると、エージェントは sidePanel 権限が必要であることを認識します。次に、正当な理由を含む CHROMEWEBSTORE.md ファイルが作成されます。送信の準備ができたら、この正当性を確認し、必要に応じて調整して、デベロッパー ダッシュボードに直接コピーできます。
エージェント向け Chrome DevTools を使用すると、AI コーディング アシスタントは実行中の Chrome インスタンスに拡張機能をインストールしてデバッグできます。具体的には、次のことができます。
- 拡張機能をインストールまたはアンインストールする。
- インストールされているすべての拡張機能を一覧表示して、再読み込みします。
- 拡張機能のアクションをトリガーします。
- 拡張機能のすべてのサーフェス（ポップアップ、サイドパネル、Service Worker）を検査します。
プロンプトと、実際にどのように機能するかを示す動画は次のとおりです。
Build a simple "Quick notes" extension that opens a popup text area to save notes and test it in the browser.
この場合、エージェントはデータを永続化する必要があることを認識しているため、Manifest V3 ファイルを作成して storage 権限をリクエストする必要があります。エージェントは、チャット インターフェースを離れることなく、拡張機能をビルドしてインストールし、実行を監視して安定性を確認できるようになりました。
これは簡単なプロンプトの例です。さまざまなプロンプト手法の詳細と、ユースケースに最適な手法については、プロンプト エンジニアリングのガイドをご覧ください。
CHROMEWEBSTORE.md で配信を効率化するためのプロンプトの例
拡張機能スキルをインストールしてエージェントに指示を追加することでほとんどの作業は完了しますが、プロンプトを具体的に指定することで、開発の段階に応じたより良い結果を得ることができます。ここでは、エージェントに CHROMEWEBSTORE.md ファイルの作成、更新、メンテナンスを指示する方法について簡単に説明します。
- 初回公開: 拡張機能の機能が完成し、ストアでの最初のプレゼンスを確立したい場合。
Prepare the extension for publication on the Chrome Web Store.
- 権限と正当な理由の更新: Chrome ウェブストアでは、単一の目的に関するポリシーが適用され、
manifest.jsonでリクエストされるすべての権限について、詳細な正当な理由が求められます。
We just added the 'declarativeNetRequest' and 'storage' permissions to our manifest. Let's update our store listing.
- ストアでの不承認の処理: 審査プロセスで拡張機能が不承認になった場合やフラグが付けられた場合は、不承認の理由をエージェントに直接伝え、コンプライアンス メタデータを更新するよう依頼できます。
Our extension submission was rejected because our privacy policy doesn't explicitly mention how we handle user data locally. Let's update the privacy policy section in CHROMEWEBSTORE.md to resolve this.
まとめ
Modern Web Guidance のスキルとエージェント向けの Chrome DevTools を組み合わせることで、高品質な機能をより迅速に構築できるだけでなく、拡張機能が安定しており、Chrome ウェブストアに送信する準備が整っていることを確認できます。
次のプロジェクトでこれらのツールを試して、初期のプロトタイプから公開までの拡張機能の開発を効率化する方法を確認してください。