Featured image of post Manifest V3対応ブラウザ拡張機能の開発入門Featured image of post Manifest V3対応ブラウザ拡張機能の開発入門
ソフトウェア

Manifest V3対応ブラウザ拡張機能の開発入門

Chrome拡張機能などで必須規格となった「Manifest V3」の構成と、基本的な開発手順をチュートリアルで解説。

  1. ホーム
  2. Softwares
  3. Manifest V3対応ブラウザ拡張機能の開発入門

Google Chromeブラウザの拡張機能規格「Manifest V2」の廃止完了に伴い、「Manifest V3」への対応が必須となりました。バックグラウンド処理用のService Workersの活用や、新しい宣言的ネットリクエストAPIについて基本的な実装コードを示します。

本記事では、Manifest V3の核心となる変更点、基本的なファイル構成、そして簡単な拡張機能の実装チュートリアルを解説します。

1. Manifest V2 から V3 への主要な変更点

Googleが提唱するManifest V3（MV3）は、主に「セキュリティ」「プライバシー」「パフォーマンス」の向上を目的に策定されました。

1) バックグラウンドページの「Service Worker」化

従来の background.html や永続的バックグラウンドスクリプト（background.js）が廃止され、不要なときは自動で終了する非永続的な Service Worker へ変更されました。メモリの節約に貢献しますが、変数のメモリ保持ができなくなったため、データの永続化には chrome.storage APIを使用する必要があります。

2) リクエスト制御の変更（declarativeNetRequest）

以前の webRequest APIは、ネットワークトラフィックをJavaScript側で自由にインターセプト・改ざんできたため悪用リスクがありました。MV3では、ブラウザ側にブロックルールを事前に登録する declarativeNetRequest APIへの移行が義務付けられました。

3) 外部スクリプト（リモートコード）の実行禁止

セキュリティ強化のため、拡張機能パッケージ外からJavaScriptスクリプト（例えばCDN経由の外部コード）を動的に読み込んで実行することが禁止されました。すべてのコードは拡張機能パッケージ内に同梱する必要があります。

2. Manifest V3 拡張機能の基本構成

最もシンプルな「ポップアップを表示する」拡張機能の構成ファイルを設計します。

1) 設定ファイル: manifest.json

MV3に対応したマニフェスト設定の基本例です。

{
  "manifest_version": 3,
  "name": "NetGuide MV3 Sample",
  "version": "1.0.0",
  "description": "Manifest V3のサンプル拡張機能です。",
  "permissions": [
    "storage",
    "activeTab"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  }
}

2) サービスワーカー: background.js

イベントベースで動作するバックグラウンドスクリプトの実装です。

// インストール時に初期状態を保存
chrome.runtime.onInstalled.addListener(() => {
  chrome.storage.local.set({ extensionActive: true });
  console.log("Extension installed and initialized.");
});

// タブの更新を検知してメッセージを処理
chrome.tabs.onActivated.addListener((activeInfo) => {
  chrome.storage.local.get(["extensionActive"], (result) => {
    if (result.extensionActive) {
      console.log(`Active tab changed to: ${activeInfo.tabId}`);
    }
  });
});

3) ポップアップ画面: popup.html / popup.js

拡張機能アイコンをクリックした際に表示されるミニUIです。

<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body { width: 180px; font-family: sans-serif; padding: 10px; }
    button { width: 100%; padding: 6px; background: #2563eb; color: white; border: none; border-radius: 4px; }
  </style>
</head>
<body>
  <h4>NetGuide Tool</h4>
  <button id="action-btn">Click Me</button>
  <script src="popup.js"></script>
</body>
</html>

// popup.js
document.getElementById('action-btn').addEventListener('click', async () => {
  // ストレージから状態を読み出す
  chrome.storage.local.get(["extensionActive"], (result) => {
    alert(`Extension active state: ${result.extensionActive}`);
  });
});

3. 開発時の注意点とデバッグ方法

  • Service Workerの休止状態: Service Workerは非アクティブ状態が続くと自動休止します。setInterval は動作しなくなるため、定期処理を行う場合は chrome.alarms APIを使用する必要があります。
  • デバッグ方法: chrome://extensions を開き、「デベロッパーモード」をオンにして、「パッケージ化されていない拡張機能を読み込む」からフォルダを選択してインストールします。バックグラウンドのログは「ビューを検証: サービスワーカー」リンクからコンソールを開いてデバッグします。

4. まとめ：Manifest V3移行期を超えて

当初はAPI制限などにより懸念の多かったManifest V3ですが、現在では仕様改善が進み、安全性とパフォーマンスが担保された新世代のプラットフォームとして安定しています。最新仕様に準拠した拡張機能を開発し、より快適なブラウジング体験を提供しましょう。

©2022 - 2026 かいせつくん