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.alarmsAPIを使用する必要があります。 - デバッグ方法:
chrome://extensionsを開き、「デベロッパーモード」をオンにして、「パッケージ化されていない拡張機能を読み込む」からフォルダを選択してインストールします。バックグラウンドのログは「ビューを検証: サービスワーカー」リンクからコンソールを開いてデバッグします。
4. まとめ：Manifest V3移行期を超えて
当初はAPI制限などにより懸念の多かったManifest V3ですが、現在では仕様改善が進み、安全性とパフォーマンスが担保された新世代のプラットフォームとして安定しています。最新仕様に準拠した拡張機能を開発し、より快適なブラウジング体験を提供しましょう。