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

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

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

拡張機能の開発に特化したコーディング エージェントのスキルを作成しました。このスキルは、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 プラグインを選択できます。または、[Customizations] > [Build With Google Plugins] > [Modern Web Guidance] から追加することもできます。

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

エージェント向け Chrome DevTools は、プラグイン、拡張機能、または MCP サーバーとして、任意のコーディング エージェントに追加できます。

以下に、一般的なエージェントの手順を示します。

Antigravity

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

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

   

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

   

   

   

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. 新しいワークスペースを作成し、テスト プロンプト「Create a hello world Chrome extension. 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 ファイルを作成して維持することで、この問題に対処します。このファイルには、コードでリクエストされた各権限のリクエストの正当性など、必要な情報が追跡されます。

このスキルは、「これを公開して」や「この拡張機能をストア用に準備して」などのフレーズを使用するとトリガーされますが、Agentic Workflows を効率化するには、エージェントのシステム指示（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 を使用するための明示的なアーキテクチャ ルールとハードウェア制約に関する追加情報も使用します。これにより、モデルのダウンロードの効率的な管理、セキュリティへの重点、グレースフル フォールバック戦略が可能になります。

このスキルは、コードでリクエストされた各権限の正当な理由など、公開に必要な情報をエージェントが追跡するのにも役立ちます。たとえば、コーディング エージェントに 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 ウェブストアへの送信に備えることができます。

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