常驻后台

参考原文

知识点:

  • background




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

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

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

在 Manifest 中指定 background 域可以使扩展常驻后台。background 可以包含三种属性,分别是 scriptspagepersistent

  • 如果指定了 scripts 属性,则 Chrome 会在扩展启动时自动创建一个包含所有指定脚本的页面。

  • 如果指定了 page 属性,则 Chrome 会将指定的 HTML 文件作为后台页面运行。通常我们只需要使用 scripts 属性即可,除非在后台页面中需要构建特殊的 HTML —— 但一般情况下后台页面的 HTML 我们是看不到的。

  • persistent 属性定义了常驻后台的方式 —— 当其值为 true 时,表示扩展将一直在后台运行,无论其是否正在工作;当其值为 false 时,表示扩展在后台按需运行,这就是 Chrome 后来提出的 Event PageEvent Page 可以有效减小扩展对内存的消耗,如非必要,请将 persistent 设置为 falsepersistent 的默认值为 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 条件运算符的一种写法,当 statustrue 时返回冒号前面的元素 'online.png';当 statusfalse 时返回冒号后面的元素 'offline.png'。(详细参见:条件(三元)运算符

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,172评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,346评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,788评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,299评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,409评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,467评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,476评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,262评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,699评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,994评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,167评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,827评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,499评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,149评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,387评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,028评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,055评论 2 352

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,953评论 25 707
  • 之前一直都只知道用block,没有对block进行过总结和深入的理解。 个人觉得block就是一个介于变量和函数中...
    小如99阅读 238评论 0 0