拡張機能 Service Worker の基本

拡張機能 Service Worker のインストールと更新は、ウェブ Service Worker とは異なります。このページでは、その違いについて説明します。

Service Worker を登録する

拡張 Service Worker を登録するには、manifest.json ファイルの "background" フィールドに指定します。単一の JavaScript ファイルを指定する "service_worker" キーを使用します。ウェブページまたはウェブアプリの Service Worker は、最初に navigator で serviceWorker の特徴検出を行ってから、特徴検出内で register() を呼び出すことで、Service Worker を登録します。拡張機能では機能しません。

{
  "name": "Awesome Test Extension",
  ...
  "background": {
    "service_worker": "service-worker.js"
  },
  ...
}

スクリプトのインポート

スクリプトを Service Worker にインポートするには、import ステートメントと importScripts() メソッドの 2 つの方法があります。import()（動的インポートとも呼ばれる）はサポートされていません。

import ステートメントを使用するには、マニフェストに "type" フィールドを追加して "module" を指定します。例:

  "background": {
    "service_worker": "service-worker.js",
    "type": "module"
  }

その後、通常どおり import を使用します。インポート アサーションはサポートされていません。

import { tldLocales } from './locales.js';

ウェブサービス Worker の場合と同様に importScripts() を使用します。

importScripts('locales.js');

更新

Service Worker を更新するには、Chrome ウェブストアに拡張機能の新しいバージョンを公開します。この問題は、拡張機能をサーバーから読み込む方法では回避できません。セキュリティ上の理由から、Manifest V3 ではリモートでホストされるコードをサポートしていません。Service Worker は拡張機能パッケージの一部である必要があります。