登录 | 注册

背景页

扩展常常用一个单独的长时间运行的脚本来管理一些任务或者状态。 Background pages to the rescue.

如同 architecture overview 的解释。背景页是一个运行在扩展进程中的HTML页面。它在你的扩展的整个生命周期都存在，同时，在同一时间只有一个实例处于活动状态。

在一个有背景页的典型扩展中，用户界面（比如，浏览器行为或者页面行为和任何选项页）是由沉默视图实现的。当视图需要一些状态，它从背景页获取该状态。当背景页发现了状态改变，它会通知视图进行更新。

清单

按如下方式在扩展清单中注册你的背景页： 

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

如果你需要浏览器更早启动 — 例如，你想显示通知 — 那么，你也许也希望指定"background"权限。

详细

你可以用类似于帧之间通讯的方式，使用直接的脚本调用在你的多个页面之间进行通讯。chrome.extension.getViews() 方法会返回属于你的扩展的每个活动页面的窗口对象列表，而chrome.extension.getBackgroundPage() 方法返回背景页。

范例

下面的代码片段演示了在扩展中背景页如何与其他页面交互。同时也向你展示如何使用背景页来处理事件，如用户点击事件。

这个例子中的扩展有一个背景页以及从一个名为image.html创建的多个页面（通过chrome.tabs.create()）。 

//In the background page:
<html>
  <script>
    //React when a browser action's icon is clicked.
    chrome.browserAction.onClicked.addListener(function(tab) {
      var viewTabUrl = chrome.extension.getURL('image.html');
      var imageUrl = /* an image's URL */;

      //Look through all the pages in this extension to find one we can use.
      var views = chrome.extension.getViews();
      for (var i = 0; i < views.length; i++) {
        var view = views[i];

        //If this view has the right URL and hasn't been used yet...
        if (view.location.href == viewTabUrl && !view.imageAlreadySet) {

          //...call one of its functions and set a property.
          view.setImageUrl(imageUrl);
          view.imageAlreadySet = true;
          break; //we're done
        }
      }
    });
  </script>
</html>

//In 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>

此页面的开发文档由360工程师翻译自Chromium官方的扩展开发文档，您可以随意传播、转阅。

Powered by 360