イベント ドリブン バックグラウンド スクリプトに移行する

永続的でないバックグラウンド スクリプトを実装すると、拡張機能のリソース費用が大幅に削減されます。ほとんどの拡張機能の機能は、イベントベースのバックグラウンド スクリプトでサポートできます。システム リソースを常に消費し、性能の低いデバイスに負荷をかける可能性があるため、拡張機能のバックグラウンドを永続化するのはまれな状況のみです。

永続的なバックグラウンド スクリプトをイベントベースの非永続的モデルに移行することで、拡張機能のパフォーマンスを向上させます。デフォルトでは、"persistent" は true に設定されています。

永続性を false として指定する

拡張機能のマニフェスト ファイルで "background" キーを見つけ、"persistent" フィールドを false に追加または更新します。

{
  "name": "My extension",
  ...
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  ...
}

HTML ファイルに依存するバックグラウンド スクリプトについても同様です。

{
  "name": "My extension",
  ...
  "background": {
    "page": "background.html",
    "persistent": false
  },
  ...
}

イベント リスナーを表示する

重要なイベントがトリガーされた場合にバックグラウンド スクリプトを有効にするには、リスナーをトップレベルに配置する必要があります。登録済みのリスナーを同期パターンに再構築する必要がある場合があります。次のようにリスナーを構造化すると、同期的に登録されないため、リスナーを呼び出すことはできません。

chrome.storage.local.get('runtimeEvents', function (events) {
  for (let event of events)
    chrome.runtime[event].addListener(listener);
});

代わりに、リスナーをトップレベルに置き、ネストしないでください。

chrome.runtime.onStartup.addListener(function() {
  // run startup function
})

ストレージに状態変化を記録する

Storage API を使用して、状態と値を設定、返す。local.set を使用してローカルマシンを更新します。

  chrome.storage.local.set({ variable: variableInformation });

local.get を使用して、その変数の値を取得します。

chrome.storage.local.get(['variable'], function(result) {
  let awesomeVariable = result.variable;
  // Do something with awesomeVariable
});

タイマーをアラームに変換

window.setTimeout()window.setInterval() などの DOM ベースのタイマーは、イベントページが休止状態のときにトリガーされた場合、非永続的バックグラウンド スクリプトでは考慮されません。

let timeout = 1000 * 60 * 3;  // 3 minutes in milliseconds
window.setTimeout(function() {
  alert('Hello, world!');
}, timeout);

代わりに、アラーム API を使用してください。

chrome.alarms.create({delayInMinutes: 3.0})

次にリスナーを追加します。

chrome.alarms.onAlarm.addListener(function() {
  alert("Hello, world!")
});

バックグラウンド スクリプト関数の呼び出しを更新する

extension.getBackgroundPage を使用してバックグラウンド ページから関数を呼び出す場合は、runtime.getBackgroundPage に更新します。新しいメソッドは、それを返す前に非永続的スクリプトを有効にします。

function backgroundFunction() {
  alert('Background, reporting for duty!')
}
document.getElementById('target').addEventListener('click', function(){
  chrome.extension.getBackgroundPage().backgroundFunction();
});

この方法は、バックグラウンド スクリプトが無効(永続的でないスクリプトのデフォルト状態)では機能しません。新しいメソッドには、バックグラウンド スクリプトが確実に読み込まれたことを確認するコールバック関数が含まれています。

document.getElementById('target').addEventListener('click', function() {
  chrome.runtime.getBackgroundPage(function(backgroundPage){
    backgroundPage.backgroundFunction()
  })
});