バックグラウンドサービスワーカー

拡張機能のバックグラウンドサービスワーカーは、サービスワーカーコンテキスト (opens in a new tab)で実行されるため強力です。例えば、このコンテキストでは、CORS を気にする必要がなくなり、任意のオリジンからリソースを取得できます。また、重い計算をバックグラウンドサービスワーカーにオフロードすることも一般的です。

最初のバックグラウンドサービスワーカーを作成するには、ルートディレクトリに background.ts ファイルを作成し、コーディングを始めましょう 💪

background.ts

export {}
 
console.log(
  "Live now; make now always the most precious time. Now will never come again."
)

⚠️

Plasmo のデフォルトの Typescript 設定では、すべてのソースファイルがモジュールとして扱われます。そのため、コードにインポートやエクスポートがない場合、ファイルの先頭に export {} 行を追加する必要があります。最初のコンテンツスクリプトを作成するときに、この警告が表示されます！

拡張機能をリロードしてから、「Service Worker インスペクター」を開きます。

Service Worker Inspector

インスペクターにログ出力した内容が表示されます。

background sw picard log

完全な例については、with-background (opens in a new tab) を参照してください。

状態の永続化

⚠️

Plasmo の dev モードでは、サービスワーカーは常に active の状態を維持します。

ワーカーは数秒間の非アクティブ状態の後、アイドル状態になり、ブラウザは5分後にそのプロセスを完全に終了します。これは、ストレージエンジンを使用しない限り、すべての状態（変数など）が失われることを意味します。

バックグラウンドサービスワーカーの状態を永続化させる最も簡単な方法は、ストレージAPIを使用することです。

より高度な方法は、fetch 呼び出しまたは WebSocket を介して状態をリモートデータベースに送信することです。

Styling Messaging