常驻后台

知识点：

background

有时我们希望扩展不仅在用户主动发起时（如开启特定页面或点击扩展图标等）才运行，而是希望扩展自动运行并常驻后台来实现一些特定的功能，比如实时提示未读邮件数量、后台播放音乐等等。

Chrome 允许扩展应用在后台常驻一个页面以实现这样的功能。在一些典型的扩展中，UI 页面，如 popup 页面或者 options 页面，在需要更新一些状态时，会向后台页面请求数据，而当后台页面检测到状态发生改变时，也会通知 UI 界面刷新。

后台页面与 UI 页面可以相互通信，这将在后续的章节中做进一步的讲解，本节将主要讲解后台页面是如何工作的。

在 Manifest 中指定 background 域可以使扩展常驻后台。background 可以包含三种属性，分别是 scripts、page和 persistent。

如果指定了 scripts 属性，则 Chrome 会在扩展启动时自动创建一个包含所有指定脚本的页面。
如果指定了 page 属性，则 Chrome 会将指定的 HTML 文件作为后台页面运行。通常我们只需要使用 scripts 属性即可，除非在后台页面中需要构建特殊的 HTML —— 但一般情况下后台页面的 HTML 我们是看不到的。
persistent 属性定义了常驻后台的方式 —— 当其值为 true 时，表示扩展将一直在后台运行，无论其是否正在工作；当其值为 false 时，表示扩展在后台按需运行，这就是 Chrome 后来提出的 Event Page。Event Page 可以有效减小扩展对内存的消耗，如非必要，请将 persistent 设置为 false。persistent 的默认值为 true。

下面我们来编写一款实时监视网站在线状态的扩展。思路很简单，每隔 5 秒就发起一次连接请求，如果请求成功就代表网站在线，将扩展图标显示为绿色，如果请求失败就代表网站不在线，将扩展图标显示为红色。

下面是这个扩展的 Manifest 文件，此例中以检测 https://www.baidu.com/ 为例，你可以根据自己的意愿更改为其他的网站。

{
    "manifest_version": 2,
    "name": "百度在线状态",
    "version": "1.0",
    "description": "监视百度是否在线",
    "icons": {
        "16": "images/icon.png",
        "48": "images/icon.png",
        "128": "images/icon.png"
    },
    "browser_action": {
        "default_icon": {
            "19": "images/icon.png",
            "38": "images/icon.png"
        }
    },
    // 设置常驻后台运行的脚本
    "background": {
        "scripts": [
            "js/status.js"
        ]
    },
    "permissions": [
        "https://www.baidu.com/"
    ]
}

由于这个扩展没有 UI，所以我们不必编写 HTML 文件，下面直接编写
status.js。

function httpRequest(url, callback){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            callback(true);
        }
    }
    xhr.onerror = function(){
        callback(false);
    }
    xhr.send();
}

setInterval(function(){
    httpRequest('http://www.google.cn/', function(status){
        chrome.browserAction.setIcon({path: 'images/'+(status? 'online.png': 'offline.png')});
    });
}, 5000);

status.js 调用 chrome.browserAction.setIcon 方法。这个方法的作用就是更换扩展在浏览器工具栏中的图标。

本节示例扩展中的 httpRequest 函数，与上节所讲述跨域请求中所使用的函数非常类似。

但请注意本节在 httpRequest 函数中加入了 onerror 事件，正是因为加入了这个事件才能捕捉到请求过程中是否发生了错误，从而得知所监视的网站是否在线。

我们注意语句： status? 'online.png': 'offline.png'，这是 javascript 条件运算符的一种写法，当 status 为 true 时返回冒号前面的元素 'online.png'；当 status 为 false 时返回冒号后面的元素 'offline.png'。（详细参见：条件（三元）运算符）

将本例载入 Chrome 后，在联网的情况下可以看到扩展图标为绿色，断开网络连接后扩展图标变为了红色。

推荐阅读更多精彩内容