Background 常驻后台操作

background 是一个常驻的页面,它的生命周期是插件中所有类型页面中最长的,它随着浏览器的打开而打开,随着浏览器的关闭而关闭,所以把需要一直运行的、启动就运行的、全局的代码放在 background 里面。
background 的权限非常高,几乎可以调用所有的Chrome扩展API(除了devtools),而且它可以无限制跨域,也就是可以跨域访问任何网站而无需要求对方设置CORS。
配置中,background 通过 scripts 指定一个JS,Chrome 会自动为这个 JS 生成一个默认的网页:

{
	// 会一直常驻的后台JS
	"background":
	{
		"service_worker":"js/background.js"
	},
}

运行体验 background

1. 打开 background.js 编写代码

console.log('我是后台js...');

2. 检查修改配置文件

{
       "background":
	{
		"scripts": ["background.js"]
	}
}

3. 重载插件

注意 点击查看视图 背景页按钮 来观察控制台。

一个具体示例

下面的例子演示了 :
当浏览器标签更新时识别最后一个标签,如果网址为 百度 弹出警告框。

// background.js
console.log('我是后台js...');
chrome.tabs.onUpdated.addListener(function(tabId , info) {
	console.log(info);
    if (info.status == "complete") {
        chrome.tabs.query({'active': true, 'lastFocusedWindow': true}, function (tabs) {
            var url = tabs[0].url;
            console.log(url)
            if(url=="https://www.baidu.com/"){
                chrome.tabs.executeScript(null,{code:'alert("Hello World!");'});
                chrome.tabs.executeScript(null,{code:"$('#kw').css({background:'red'});"});
            }
        });
    }
});

可以看到执行 js 脚本需要 :
chrome.tabs.executeScript(null,{code:'要执行的js代码'});
而不是直接在 background.js 直接编写运行 dom 操作代码!