知识点：
- 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 后，在联网的情况下可以看到扩展图标为绿色，断开网络连接后扩展图标变为了红色。
网友评论