Manifest V3

Manifest V3

Manifest V3は、Chrome拡張機能の最新のマニフェスト形式です。セキュリティとパフォーマンスを向上させています。

Manifest V2からの主な変更点

1. Background Pages → Service Workers

Manifest V2:

{
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  }
}

Manifest V3:

{
  "background": {
    "service_worker": "background.js"
  }
}

影響:

• Service Workerはイベント駆動で動作
• 永続的な実行ができない
• メッセージパッシングが重要になる

2. Web Request APIの制限

Manifest V2:

chrome.webRequest.onBeforeRequest.addListener(
  callback,
  { urls: ['<all_urls>'] },
  ['blocking', 'requestBody']
);

Manifest V3:

// Declarative Net Request APIを使用
chrome.declarativeNetRequest.updateDynamicRules({
  addRules: [{
    id: 1,
    priority: 1,
    action: { type: 'block' },
    condition: { urlFilter: 'example.com' }
  }]
});

Manifest V3の基本構造

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.0",
  "description": "Extension description",

  "permissions": [
    "storage",
    "tabs",
    "scripting",
    "declarativeNetRequest"
  ],

  "host_permissions": [
    "https://*/*"
  ],

  "background": {
    "service_worker": "background.js"
  },

  "content_scripts": [{
    "matches": ["https://*/*"],
    "js": ["content.js"],
    "run_at": "document_idle"
  }],

  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png",
      "128": "icon128.png"
    }
  },

  "web_accessible_resources": [{
    "resources": ["injected.js"],
    "matches": ["https://*/*"]
  }]
}

パーミッションの詳細

必須パーミッション

{
  "permissions": [
    "storage",           // chrome.storage API
    "tabs",             // chrome.tabs API
    "scripting",        // chrome.scripting API
    "activeTab",        // 現在のタブへのアクセス
    "background"        // バックグラウンド実行
  ]
}

ホストパーミッション

{
  "host_permissions": [
    "https://api.example.com/*",  // 特定のドメイン
    "https://*/*",                 // すべてのHTTPSサイト
    "<all_urls>"                   // すべてのURL
  ]
}

Service Workerの実装

background.js

chrome.runtime.onInstalled.addListener(() => {
  console.log('Extension installed');
});

// メッセージの受信
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'GET_DATA') {
    chrome.storage.local.get(['data'], (result) => {
      sendResponse({ data: result.data });
    });
    return true; // 非同期レスポンスのため
  }
});

// タブの更新を監視
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete') {
    // ページ読み込み完了時の処理
  }
});