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

永続的でないバックグラウンド スクリプトを実装すると、拡張機能のリソース費用を大幅に削減できます。ほとんどの拡張機能は、イベントベースのバックグラウンド スクリプトでサポートできます。拡張機能に永続的なバックグラウンドが必要になるのは、ごくまれな場合のみです。永続的なバックグラウンドは常にシステムリソースを消費し、低電力デバイスに負担をかける可能性があります。

永続的なバックグラウンド スクリプトをイベントベースの永続的でないモデルに移行することで、拡張機能のパフォーマンスを向上させます。デフォルトでは、"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);

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