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

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

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

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

拡張機能のmanifest ファイルで "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);

代わりに、alarms 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()
  })
});