background.js / service_worker.js

Chrome拡張機能における「background.js / service_worker.js」は、拡張機能のバックグラウンドで動作するスクリプトファイルであり、ユーザーの操作やページ表示とは独立して常駐的な処理やイベントの監視などを担います。Manifest V3 では background.js は廃止され、代わりに service_worker.js を使用するように変更されました。

---

1. 背景スクリプトの役割

背景スクリプトは以下のような処理を担当します：

• 拡張機能の起動処理

• 通知の生成

• イベントの監視（タブ更新、拡張アイコンのクリックなど）

• Webリクエストのインターセプト（webRequest APIなど）

• コンテンツスクリプトとのメッセージ通信の仲介

---

2. background.js（Manifest V2まで）

特徴

• 常駐型：一度読み込まれると、ブラウザが閉じられるか、拡張がアンロードされるまでメモリ上に残り続ける

• イベントリスナーを設定して、ユーザー操作やシステムイベントに反応

使用例（Manifest V2）

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

この方法はメモリ使用量が増加するため、Manifest V3では非推奨となりました。

---

3. service_worker.js（Manifest V3）

特徴

• 非常駐型（イベント駆動）：必要なときだけ起動され、処理終了後は自動的に破棄される

• リソース効率が高い

• Promiseベースの非同期処理に対応している必要がある（async/await）

使用例（Manifest V3）

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

例：拡張アイコンがクリックされたときに通知を表示

javascript
chrome.action.onClicked.addListener(async (tab) => {
  await chrome.notifications.create({
    type: 'basic',
    iconUrl: 'icon.png',
    title: '通知タイトル',
    message: 'アイコンがクリックされました'
  });
});

---

4. 注意点（Manifest V3）

• グローバル変数の永続性は保証されない：service_worker.js はイベントごとに再起動するため

• 同期的なXHRやブロッキング処理は禁止

• 通信はすべて非同期（Promise）で記述

---

5. 使用上の補足

---

6. まとめ

---

Chrome拡張機能の開発をこれから始める場合は、service_worker.js による実装を基本として学習・構築するのが推奨されます。