バックグラウンド・ページ

拡張機能に共通する要望は、タスクや状態を管理するあるスクリプトが、継続的に実行され続けることだ。バックグラウンド・ページはその要望に応える。

概要で説明したように、バックグラウンド・ページは拡張機能のプロセスで実行されるHTMLページである。拡張機能が読み込まれている限り存在し続け、同時に1つのインスタンスのみ有効になる。

典型的なバックグラウンド・ページを含む拡張機能において、ユーザインターフェース(例えばブラウザアクションやページアクション、オプションページのような)は見栄えだけの表示機能として用意される。この表示機能が何か状態を必要とする時、それはバックグラウンド・ページから要求される。バックグラウンド・ページが状態の変化を監視し、その変化を表示側に通知する形をとる。

Manifest

バックグラウンド・ページを使うには、Manifest Fileに次のように記述する。

{
  "name": "My extension",
  ...
  "background_page": "background.html",
  ...
}

詳細

拡張機能内の様々なページ間で、ちょうどフレーム間のそれのように直接スクリプトを呼び出すことが出来る。extension.getViewsメソッドを呼べば、拡張機能に属する全ての有効なWindowオブジェクトを取得できる。またextension.getBackgroundPageメソッドはバックグラウンド・ページを返す。

例

次のコード例は、どのようにバックグラウンド・ページが拡張機能内の他のページを操作するのかを示している。同時に、バックグラウンド・ページでどのように、ユーザによりクリックのようなイベントを利用するのかも理解できる。

この拡張機能は、バックグラウンド・ページと、tabs.createによって複数のタブに読み込まれた image.html を含んでいる。

/* バックグラウンド・ページ */
<html>
  <script>
    // ブラウザアクションがクリックされた場合の処理
    chrome.browserAction.onClicked.addListener(function(tab) {
      var viewTabUrl = chrome.extension.getURL('image.html');
      var imageUrl = /* an image's URL */;

      // この拡張機能に属するビューを全て確認し、今回使うものを見つける
      var views = chrome.extension.getViews();
      for (var i = 0; i < views.length; i++) {
        var view = views[i];

        // ビューが該当するURLを指し、未使用のものであれば...
        if (view.location.href == viewTabUrl && !view.imageAlreadySet) {

          // ...関数を呼び出し、使用済みに状態を変える
          view.setImageUrl(imageUrl);
          view.imageAlreadySet = true;
          break; // 完了
        }
      }
    });
  </script>
</html>

/* image.html */
<html>
  <script>
    function setImageUrl(url) {
      document.getElementById('target').src = url;
    }
  </script>

  <body>
    <p>
    Image here:
    </p>

    <img id="target" src="white.png" width="640" height="480">

  </body>
</html>