Manifest V3 アーキテクチャ解析と環境構築

もしあなたがマイクロSaaSを構築し、最短時間でユーザーを獲得したいのであれば、**Chrome拡張機能（ブラウザ拡張機能）**は間違いなく最適な選択肢です。

なぜでしょうか？ユーザーは大容量のデスクトップソフトをインストールする必要も、現在閲覧中のウェブページから離れる必要もありません。あなたのツールは直接彼らのブラウザに「寄生」し、必要な時に価値を提供できるからです（例：Grammarlyが英文を修正、AdBlockが広告をブロック、自動フォーム入力ツールなど）。

このレッスンでは、Google最新のManifest V3アーキテクチャをゼロから深く理解し、最初の拡張機能を構築する方法を解説します。

1. Manifest V3とは？

Chrome拡張機能を開発する際、最も重要なファイルがmanifest.jsonです。これは拡張機能の「身分証明書」兼「取扱説明書」のようなもので、ブラウザにこの拡張機能の名前、必要な権限、含まれるスクリプトなどを伝えます。

Googleは最近、旧版のV2に代わりManifest V3を全面的に推進しています。これは大きなアーキテクチャ変更で、主に以下を目的としています：

セキュリティ向上：外部コードの実行を制限し、悪意のある拡張機能によるデータ窃取を防止
パフォーマンス改善：Service Workersを導入し、メモリを常時消費していたBackground Pagesを置き換え
プライバシー強化：declarativeNetRequestでwebRequestを置き換えるなど、ネットワークリクエストブロックにおけるより厳格な権限管理

[!WARNING] 非推奨警告：GoogleはすでにManifest V2拡張機能の強制削除を開始しています。ネット上で"manifest_version": 2を使用している古いチュートリアルを見かけても、それはすでに公開できないため無視してください！本コースでは最新のV3標準を全面的に採用しています。

2. 拡張機能のコアコンポーネント

強力なChrome拡張機能は通常、以下の4つのコアコンポーネントで構成されます：

Manifest (manifest.json)：設定ファイル。権限とアーキテクチャを定義
Background Script (Service Worker)：バックグラウンドで動作する執事。イベント処理、クロスページ状態管理、バックエンドAPI通信を担当
Content Scripts：ターゲットページに注入されるスパイ。ページのDOMを直接読み取り・変更可能（例：ページ上の特定の単語を赤くマーク）
Popup / Options Page：ユーザーインターフェース。右上アイコンクリックで表示されるポップアップや専用設定ページ

これらのコンポーネントは互いに隔離されており、Chromeが提供するMessage Passing (メッセージング) APIを通じて通信する必要があります。

3. ハンズオン：最初の拡張機能を作成

最もシンプルなHello Worldプロジェクトを作成しましょう。my-first-extensionという新しいフォルダを作成し、以下のファイルを追加します：

`manifest.json`

このファイルだけは必須です。以下のコー��を貼り付けてください：

{
  "manifest_version": 3,
  "name": "Vibe Tutor 最初の拡張機能",
  "version": "1.0.0",
  "description": "これはVibe Tutorに沿って作成した最初のChrome拡張機能です！",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "permissions": [
    "storage",
    "activeTab"
  ]
}

解説：

"manifest_version": 3：最新標準を使用する宣言
"action"：ユーザーがブラウザ右上アイコンをクリックした時の動作を定義（ここではpopup.htmlを指定）
"permissions"：必要なChrome API権限を宣言。ここではstorage（設定保存）とactiveTab（現在のタブ情報取得）を要求

`popup.html`

アイコンクリック時に表示されるポップアップUIで、シンプルなウェブページです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body {
      width: 300px;
      padding: 16px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }
    h1 {
      font-size: 18px;
      color: #3b82f6;
    }
    button {
      background-color: #3b82f6;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
      width: 100%;
      margin-top: 10px;
    }
    button:hover {
      background-color: #2563eb;
    }
  </style>
</head>
<body>
  <h1>こんにちは！Vibe Tutor！</h1>
  <p>これはあなたの最初のマイクロSaaSプロトタイプです。</p>
  <button id="clickMeBtn">クリックしてテスト</button>

  <!-- ロジックスクリプトを導入 -->
  <script src="popup.js"></script>
</body>
</html>

`popup.js`

ボタンにインタラクティブなロジックを追加します。

document.addEventListener('DOMContentLoaded', () => {
  const btn = document.getElementById('clickMeBtn');
  
  btn.addEventListener('click', () => {
    alert('素晴らしい！ボタンイベントが正常にトリガーされました！');
    btn.innerText = "クリック済み ✓";
    btn.style.backgroundColor = "#10b981"; // 緑色に変更
  });
});

アイコン画像の準備

プロジェクト内にiconsフォルダを作成し、3つのサイズの画像(icon16.png, icon48.png, icon128.png)を配置してください。

ヒント：ローカル開発テストのみの場合は、アイコンがなくても動作します。Chromeが自動的にデフォルトのアルファベットアイコンを表示します。

4. 拡張機能のインストールとテスト方法

3つのファイルを作成したら、どうやってブラウザにインストールするのでしょうか？

Chromeブラウザを開き、アドレスバーにchrome://extensions/と入力してアクセス
ページ右上で**「開発者モード（Developer mode）」**を有効にする
左上の**「パッケージ化されていない拡張機能を読み込む（Load unpacked）」**ボタンをクリック
先ほど作成したmy-first-extensionフォルダを選択

これで、拡張機能リストにあなたの拡張機能が表示されます！ブラウザのアドレスバー右側のパズルアイコン🧩をクリックし、ツールバーに拡張機能を「ピン留め（Pin）」してください。アイコンをクリックすると、美しいpopup.htmlがポップアップ表示され、ボタンが正常に動作するはずです。

[!TIP] 開発とデバッグのコツ HTMLやJSファイルを変更するたびに、chrome://extensions/ページに戻り、拡張機能カード右下の**更新ボタン（⟳）**をクリックする必要があります。最新のコードが反映されます。初心者が最も忘れがちな��テップです。

5. 次のチャレンジ

おめでとうございます！最初の一歩を踏み出しました。しかし実際のSaaS製品では、ポップアップウィンドウだけでなく、拡張機能がユーザーの閲覧ページを「理解」し、バックグラウンドで自動化タスクを実行できる必要があります。

次の章では、Manifest V3最大の変革点であるBackground Service Workersについて深く掘り下げ、この強力な「透明執事」がどのような超能力をもたらすかを見ていきましょう！