Antigravity で Chrome 拡張機能を開発する：AI 支援のブラウザツール制作ガイド

取り組みの背景

Google Antigravity IDEは、AI支援を受けながらブラウザツールを高速に開発できる強力なプラットフォームです。Chrome拡張機能の開発は従来、複数のテキストエディタとブラウザコンソールを行き来する煩雑な作業でしたが、Antigravityの統合開発環境とAI機能により、プロトタイプから公開まで数時間で完結させることが可能になります。

Antigravity が Chrome 拡張機能開発に最適な理由

1. ビルトインのブラウザプレビュー

Antigravityには、コード編集と同時にChrome拡張機能の動作を確認できるプレビューウィンドウが統合されています。従来は別ウィンドウでテストが必要でしたが、ここでは左右分割画面で編集とテストが並行できるため、開発効率が格段に向上します。

2. AI による manifest.json 生成

manifest.json（拡張機能の設定ファイル）は複雑な仕様を持つため、手作業での作成ミスが多くなります。Antigravityのプロンプト機能を使えば、「ページをスクレイピングする拡張機能」と入力するだけで、適切なpermissionsとhost_permissionsを含む正確なマニフェストが自動生成されます。

3. API リファレンスの統合ドキュメント

Chrome Extensions APIはバージョンごとに仕様が異なります。Antigravityのコードアシスト機能は、最新のManifest V3 API仕様を参照しながら提案するため、非推奨APIを誤用する心配が減ります。

4. デバッグ・コンソール統合

拡張機能のバックグラウンドスクリプト、コンテンツスクリプト、ポップアップのコンソール出力が一箇所に集約されるため、複雑な動作の追跡がシンプルになります。

Manifest.json V3 の最小設定

Chrome拡張機能はmanifest.jsonで拡張機能の仕様を宣言します。Manifest V3（現在の標準）は、V2と比べてセキュリティが強化されましました。

{
  "manifest_version": 3,
  "name": "Page Summarizer",
  "version": "1.0.0",
  "description": "このページの内容をAIで自動要約します",
  "permissions": ["activeTab", "scripting"],
  "host_permissions": ["<all_urls>"],
  "action": {
    "default_title": "Click to summarize",
    "default_popup": "popup.html"
  },
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "images/icon-16.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  }
}

重要なポイント:

manifest_version: 3 は必須（V2は廃止予定）
permissions と host_permissions は分離している
バックグラウンドスクリプトは service_worker として動作（永続的なバックグラウンドスクリプトは廃止）
ポップアップUI用に action で default_popup を指定

プロジェクト構成と初期セットアップ

Chrome拡張機能プロジェクトの典型的なフォルダ構成は以下の通りです。

my-chrome-extension/
├── manifest.json          # 拡張機能設定
├── popup.html            # ポップアップUI
├── popup.js              # ポップアップロジック
├── content.js            # コンテンツスクリプト
├── background.js         # バックグラウンドワーカー
└── images/
    ├── icon-16.png
    ├── icon-48.png
    └── icon-128.png

Antigravityでプロジェクトを新規作成したら、上記のディレクトリ構造を指定してAIアシストで各ファイルを生成します。

AI支援によるコンポーネント開発

コンテンツスクリプトの作成

コンテンツスクリプトは、ページを訪問したときに自動実行されるJavaScriptです。ページの内容にアクセスしたり、ページの要素を操作できます。

Antigravityのプロンプトで「ページ内の全てのテキストを収集し、バックグラウンドスクリプトに送信するコンテンツスクリプトを作成してください」と入力すると、以下のようなコードが生成されます。

// content.js - ページのテキストを収集してバックグラウンドに送信
 
const pageText = document.body.innerText;
const pageTitle = document.title;
 
// バックグラウンドスクリプトにメッセージを送信
chrome.runtime.sendMessage(
  {
    type: 'PAGE_TEXT',
    text: pageText,
    title: pageTitle,
    url: window.location.href
  },
  (response) => {
    console.log('Response from background:', response);
  }
);

生成されたコードの確認:

ページの全テキストを document.body.innerText で取得
chrome.runtime.sendMessage() でバックグラウンドスクリプトに非同期送信
レスポンスをコンソールに出力

バックグラウンドスクリプトの実装

バックグラウンドワーカーは、拡張機能が有効な限り動作し続け、複数のタブからのメッセージを受け取ります。

// background.js - メッセージ受信とAPI呼び出し
 
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === 'PAGE_TEXT') {
    // 受け取ったテキストをAPIに送信（例：要約AI）
    summarizeText(request.text)
      .then(summary => {
        sendResponse({
          success: true,
          summary: summary
        });
      })
      .catch(error => {
        sendResponse({
          success: false,
          error: error.message
        });
      });
 
    // 非同期処理の場合は true を返す
    return true;
  }
});
 
async function summarizeText(text) {
  // 例：外部APIを呼び出す
  const response = await fetch('https://api.example.com/summarize', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer YOUR_API_KEY`
    },
    body: JSON.stringify({ text: text })
  });
 
  const data = await response.json();
  return data.summary;
}

生成コードの動作:

chrome.runtime.onMessage.addListener() でメッセージを受信
summarizeText() で外部APIを呼び出し
結果を sendResponse() でコンテンツスクリプトに返却
非同期処理のため戻り値に true を指定

ポップアップUI の構築

ポップアップはユーザーがアイコンをクリックしたときに表示されるUI です。

<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body {
      width: 400px;
      padding: 15px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }
    #summary {
      margin-top: 15px;
      padding: 10px;
      background-color: #f0f0f0;
      border-radius: 5px;
      max-height: 200px;
      overflow-y: auto;
    }
    button {
      padding: 8px 16px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <h2>Page Summarizer</h2>
  <button id="summarize-btn">Summarize This Page</button>
  <div id="summary"></div>
  <script src="popup.js"></script>
</body>
</html>

// popup.js - ポップアップのロジック
 
document.getElementById('summarize-btn').addEventListener('click', async () => {
  const btn = document.getElementById('summarize-btn');
  btn.disabled = true;
  btn.textContent = 'Summarizing...';
 
  // アクティブなタブのコンテンツスクリプトにメッセージ送信
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
 
  chrome.tabs.sendMessage(tab.id, { type: 'GET_SUMMARY' }, (response) => {
    if (response && response.success) {
      document.getElementById('summary').textContent = response.summary;
      btn.textContent = 'Summarize This Page';
    } else {
      document.getElementById('summary').textContent = 'Error: ' + (response?.error || 'Unknown error');
    }
    btn.disabled = false;
  });
});

デバッグとローカルテスト

Antigravityのデバッグパネルで以下を確認できます。

ステップ 1: デバッグモードを有効化

ブラウザの Chrome 開発者ツール（DevTools）を開き、拡張機能 タブからローカル拡張機能のコンソール出力を監視します。

// デバッグ用ログの例
console.log('Content script loaded');
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  console.log('Message received:', request);
  // 処理...
});

ステップ 2: メッセージパッシングの検証

複数のスクリプト間でメッセージが正しく送受信されているか確認します。

// content.js での送信確認
chrome.runtime.sendMessage(
  { type: 'TEST_MESSAGE', data: 'Hello from content script' },
  (response) => {
    console.log('Response:', response); // ← この行が実行されたらOK
  }
);

ステップ 3: ストレージの確認

chrome.storage.local を使用する場合、保存されたデータを確認します。

chrome.storage.local.get(['key'], (result) => {
  console.log('Stored data:', result);
});

Chrome Web Store への公開

1. デベロッパーアカウントの作成

Chrome Web Store Developer Dashboard にアクセスし、Google アカウントで登録します。初回は $5 の登録手数料が必要です。

2. アイコン・スクリーンショット・説明文の準備

Chrome Web Storeでは以下が必須です。

アイコン: 128×128px（PNG）
スクリーンショット: 1280×800px または 640×400px（最大5枚）
説明文: 日本語版と英語版（各言語で異なるマーケティング対応が推奨）

Antigravityで画像を生成し、Public フォルダに配置しておくと効率的です。

3. ZIP ファイルの作成と公開

# プロジェクトディレクトリで実行
zip -r my-extension.zip manifest.json popup.html popup.js content.js background.js images/
 
# Chrome Web Store Developer Dashboard からアップロード

公開までの審査期間は通常 1 日〜数日 です。

推奨リソース

ブラウザ自動化やスクレイピングの精度を高めるには、以下の機器も効果的です。

まとめ

Google Antigravity IDEを使用することで、Chrome拡張機能の開発がこれまで以上に高速・効率的になります。

本ガイドのポイント:

Manifest V3 の基本構造を理解する
コンテンツスクリプト・バックグラウンドワーカー・ポップアップUI を AI アシストで構築
デバッグ機能 を活用して複数スクリプト間の通信を検証
Chrome Web Store に公開するまでの全フロー

開発を通じて、Antigravity の高度なコード生成機能と AI との協働の価値を実感できるでしょう。