バックグラウンド スクリプトでイベントを管理する

拡張機能は、Chrome のブラウジング環境を変更または強化するために使用されるイベントベースのプログラムです。イベントとは、新しいページへの移動、ブックマークの削除、タブの閉じるなどのブラウザでのトリガーです。拡張機能は、バックグラウンド スクリプトでこれらのイベントを監視し、指定された指示で対応します。

バックグラウンド ページは必要なときに読み込まれ、アイドル状態になるとアンロードされます。イベントの例として、次のようなものがあります。

  • 拡張機能が最初にインストールされるか、新しいバージョンに更新された。
  • バックグラウンド ページがイベントをリッスンし、イベントがディスパッチされました。
  • コンテンツ スクリプトなどの拡張機能がメッセージを送信します。
  • 拡張機能内の別のビュー（ポップアップなど）で runtime.getBackgroundPage が呼び出されます。

読み込まれたバックグラウンド ページは、Chrome API の呼び出しやネットワーク リクエストの発行などのアクションを実行している限り、実行され続けます。また、バックグラウンド ページは、表示されるすべてのビューとすべてのメッセージ ポートを閉じるまでアンロードされません。ビューを開いてもイベントページは読み込まれず、読み込み後に閉じなくなるだけです。

効果的なバックグラウンド スクリプトは、火災をリッスンするイベントが発生するまで休止状態を保ち、指定された指示に対応し、その後、アンロードされます。

バックグラウンド スクリプトを登録する

バックグラウンド スクリプトは、マニフェストの "background" フィールドの下に登録されます。これらは "scripts" キーの後に配列内でリストされ、"persistent" は false として指定する必要があります。

{
  "name": "Awesome Test Extension",
  ...
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  ...
}

モジュール化されたコードに複数のバックグラウンド スクリプトを登録できます。

{
    "name": "Awesome Test Extension",
    ...
    "background": {
      "scripts": [
        "backgroundContextMenus.js",
        "backgroundOmniBox.js",
        "backgroundOauth.js"
      ],
      "persistent": false
    },
    ...
  }

拡張機能で現在永続的なバックグラウンド ページを使用している場合は、バックグラウンド移行ガイドで、非永続的モデルに切り替える手順をご確認ください。

拡張機能を初期化する

runtime.onInstalled イベントをリッスンして、インストール時に拡張機能を初期化します。このイベントは、状態の設定や 1 回限りの初期化（コンテキスト メニューなど）に使用します。

chrome.runtime.onInstalled.addListener(function() {
  chrome.contextMenus.create({
    "id": "sampleContextMenu",
    "title": "Sample Context Menu",
    "contexts": ["selection"]
  });
});

リスナーを設定する

拡張機能が依存するイベントを中心にバックグラウンド スクリプトを構造化します。機能的に関連するイベントを定義することで、バックグラウンド スクリプトをそれらのイベントが発生するまで休止させ、拡張機能が重要なトリガーを見逃すことを防ぎます。

リスナーは、ページの先頭から同期的に登録する必要があります。

chrome.runtime.onInstalled.addListener(function() {
  chrome.contextMenus.create({
    "id": "sampleContextMenu",
    "title": "Sample Context Menu",
    "contexts": ["selection"]
  });
});

// This will run when a bookmark is created.
chrome.bookmarks.onCreated.addListener(function() {
  // do something
});

リスナーは適切にトリガーされないため、非同期で登録しないでください。

chrome.runtime.onInstalled.addListener(function() {
  // ERROR! Events must be registered synchronously from the start of
  // the page.
  chrome.bookmarks.onCreated.addListener(function() {
    // do something
  });
});

拡張機能は、removeListener を呼び出すことにより、バックグラウンド スクリプトからリスナーを削除できます。イベントのリスナーをすべて削除すると、そのイベントの拡張機能のバックグラウンド スクリプトは Chrome で読み込まれなくなります。

chrome.runtime.onMessage.addListener(function(message, sender, reply) {
    chrome.runtime.onMessage.removeListener(event);
});

イベントをフィルタする

イベント フィルタをサポートする API を使用して、拡張機能で扱うケースのみにリスナーを制限します。拡張機能が tabs.onUpdated イベントをリッスンしている場合は、Tabs API はフィルタをサポートしていないため、フィルタを含む webNavigation.onCompleted イベントを使用してみてください。

chrome.webNavigation.onCompleted.addListener(function() {
    alert("This is my favorite website!");
}, {url: [{urlMatches : 'https://www.google.com/'}]});

リスナーにリアクションする

イベントが発生したときに機能をトリガーするためのリスナーが存在します。イベントに反応するには、リスナー イベント内で目的のリアクションを構築します。

chrome.runtime.onMessage.addListener(function(message, callback) {
  if (message.data == "setAlarm") {
    chrome.alarms.create({delayInMinutes: 5})
  } else if (message.data == "runLogic") {
    chrome.tabs.executeScript({file: 'logic.js'});
  } else if (message.data == "changeColor") {
    chrome.tabs.executeScript(
        {code: 'document.body.style.backgroundColor="orange"'});
  };
});

バックグラウンド スクリプトのアンロード

onSuspend を受信せずに拡張機能がクラッシュした場合、重要な情報が失われないように、データを定期的に保持する必要があります。そのためには、storage API を使用します。

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

拡張機能でメッセージの受け渡しを使用している場合は、すべてのポートが閉じていることを確認します。すべてのメッセージ ポートがシャットダウンするまで、バックグラウンド スクリプトはアンロードされません。runtime.Port.onDisconnect イベントをリッスンすることで、開いているポートが閉じられるタイミングに関する分析情報が得られます。runtime.Port.disconnect を使用して手動で閉じます。

chrome.runtime.onMessage.addListener(function(message, callback) {
  if (message == 'hello') {
    sendResponse({greeting: 'welcome!'})
  } else if (message == 'goodbye') {
    chrome.runtime.Port.disconnect();
  }
});

バックグラウンド スクリプトの存続期間は、拡張機能のエントリが Chrome のタスク マネージャーに表示されるタイミングと非表示になるタイミングをモニタリングすることで監視できます。

ALT_TEXT_HERE

Chrome メニューをクリックし、その他のツールにカーソルを合わせて [タスク マネージャー] を選択し、タスク マネージャーを開きます。

バックグラウンド スクリプトは、アクティブでない状態が数秒間続くと、自動的にアンロードされます。直前のクリーンアップが必要な場合は、runtime.onSuspend イベントをリッスンします。

chrome.runtime.onSuspend.addListener(function() {
  console.log("Unloading.");
  chrome.browserAction.setBadgeText({text: ""});
});

ただし、runtime.onSuspend に依存せずにデータを永続化することをおすすめします。必要に応じたクリーンアップを行うことができません。また、クラッシュした場合には役立ちません。