コーディング エージェントを使用して拡張機能を構築する

Antigravity などの AI コーディング エージェントは、驚くほどの精度で拡張機能コードを生成できるようになりました。ただし、その可能性を最大限に引き出し、高品質な結果を得るには、適切なコンテキストとツールを提供する必要があります。

このガイドでは、コーディング エージェントで適切なツールを設定する方法と、それらのツールがより優れた拡張機能をより迅速に構築するうえでどのように役立つかについて説明します。

拡張機能の開発専用に設計されたコーディング エージェントのスキルを作成しました。このスキルは、AI コーディング エージェントにウェブ プラットフォームの専門知識、ベスト プラクティス、最新の API パターンを提供する、Google の広範な取り組みである 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 プラグインを選択できます。または、[Customizations] > [Build With Google Plugins] > [Modern Web Guidance] から追加することもできます。

コーディング エージェント向けの Chrome DevTools

エージェント用の Chrome DevTools は、プラグイン、拡張機能、MCP サーバーのいずれかとして、選択したコーディング エージェントに追加できます。

ここでは、よく使用されるエージェントの手順について説明します。

Antigravity

1. Antigravity IDE をダウンロードします（Antigravity では MCP サーバー構成を手動で編集できないため、おすすめしません）。

2. 起動時、または [設定] > [カスタマイズ] の [Google でビルド] で、[Chrome DevTools] を有効にします。これにより、MCP サーバーではなく、Chrome DevTools スキルのみがインストールされます。

   

3. Chrome DevTools MCP サーバーを追加するには、[設定] > [カスタマイズ] に移動し、[MCP サーバーを追加] ボタンをクリックして、Chrome DevTools を検索します。

   

   

   カスタマイズに Chrome DevTools MCP サーバーがリストされています。

4. [Open MCP Config] をクリックして MCP サーバー構成を開きます。IDE で構成ファイルを表示するには、設定を閉じる必要があります。

   

5. 次の 2 つの構成パラメータ（--categoryExtensions（拡張機能ツールを有効にする）と --autoConnect（既存の Chrome プロファイルへの接続を有効にする。Chrome の組み込み AI API を使用する場合やログインが必要な場合に使用する））を追加します。

   {
    "mcpServers": {
      "chrome-devtools-mcp": {
        "args": [
          "-y",
          "chrome-devtools-mcp@latest",
          "--categoryExtensions",
          "--autoConnect"
        ],
        "command": "npx"
      }
    }
   }
   

6. リモート デバッグを有効にするには、Chrome を開き、chrome://inspect/#remote-debugging に移動して、[このブラウザ インスタンスのリモート デバッグを許可する] を選択します。

   

7. Antigravity IDE を再起動します。

8. 新しいワークスペースを作成し、「Hello World の Chrome 拡張機能を作成してください。Chrome DevTools を使用してテストします。」エージェントがブラウザで拡張機能のテストを開始すると、Chrome にリモート デバッグの権限を求めるダイアログが表示されます。[許可] を選択します。リモート デバッグ セッションが有効になっている間、Chrome に「Chrome は現在自動テスト ソフトウェアによって制御されています」というバナーが表示されます。

<figure>
  <img src="image/antigravityide--u84rk62f5t9.png" alt="The remote debugging warning banner and approval popup dialog in Chrome." class="screenshot" width="800">
  <figcaption>The remote debugging banner indicating automated browser control is active.</figcaption>
</figure>

Claude Code

  claude mcp add chrome-devtools --scope project -- npx chrome-devtools-mcp@latest --categoryExtensions --autoConnect

他のエージェント

他のエージェントの設定手順については、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 拡張機能の構築を通じてチームが長年にわたり学んできたすべてのベスト プラクティスにアクセスできます。
• 送信の準備: 拡張機能を 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.

この場合、エージェントはデータを永続化する必要があることを認識しているため、マニフェスト 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 for Agents を組み合わせることで、高品質な機能をより迅速に構築できるだけでなく、拡張機能の安定性を確保し、Chrome ウェブストアへの送信準備を整えることができます。

次のプロジェクトでこれらのツールを試して、初期のプロトタイプから公開までの拡張機能の開発を効率化する方法を確認してください。