Antigravity などの AI コーディング エージェントは、拡張機能コードを驚くほど正確に生成できるようになりました。ただし、その可能性を最大限に引き出し、高品質の結果を得るには、適切なコンテキストとツールを提供する必要があります。
このガイドでは、コーディング エージェントに適切なツールを設定する方法と、それらのツールがより優れた拡張機能を迅速に構築するのにどのように役立つかについて説明します。
Google は、拡張機能の開発専用に設計されたコーディング エージェントのスキルを作成しました。このスキルは、AI コーディング エージェントにウェブ プラットフォームの専門知識、ベスト プラクティス、最新の API パターンを提供する、より広範な取り組みである Modern Web Guidance の一部です。
ただし、拡張機能の構築は最初の一歩にすぎません。コードが想定どおりに動作することを確認するために、エージェント用の Chrome DevTools を使用すると、AI コーディング アシスタントが Chrome で拡張機能を直接デバッグし、DevTools のデバッグ機能とパフォーマンスに関する分析情報を活用できます。
設定
Modern Web Guidance
スキルパックを使用するには、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 プラグインを選択するか、[カスタマイズ] > [Google プラグインでビルド] > [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 について教えます。使用しているモデルのトレーニング後にリリースされた API も含まれます。
- ベスト プラクティス: エージェントが、Chrome 拡張機能の構築で Google のチームが長年かけて学んだすべてのベスト プラクティスにアクセスできるようにします。
- 送信の準備: Chrome ウェブストアに拡張機能を送信する際に必要となる可能性のある情報を追跡し、配信を容易にします。
Modern Web Guidance には、パフォーマンス、ユーザー補助、最新の API など、優れたユーザー エクスペリエンスを提供するために必要なすべての要素をカバーするスキルも含まれています。たとえば、組み込みの AI API スキルを使用すると、AI コーディング エージェントは常に最新バージョンの API を使用します。また、これらの API を使用するための明示的なアーキテクチャ ルールとハードウェア制約に関する追加情報も使用します。これにより、モデルのダウンロードを効率的に管理し、セキュリティに重点を置き、適切なフォールバック戦略を立てることができます。
このスキルは、コードでリクエストされた各権限の正当性など、公開に必要な情報をエージェントが追跡するのにも役立ちます。たとえば、コーディング エージェントに Side Panel 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 ウェブストアに送信できる状態であることを確認できます。
次のプロジェクトでこれらのツールを試して、最初のプロトタイプから公開までの拡張機能の開発をどのように効率化できるかをご確認ください。