Chrome插件开发实例 - 开关灯(browser action)

这里通过一个网页开关灯的例子来演示browser action,除了browser action之外,还会涉及到其他很多的chrome api或者manifest.json配置项。

20130614000050

这个文件包含的文件如下:

background.html

背景页,一个单独的长时间运行的脚本,是一个运行在扩展程序中的html页面。在应用的整个生命周期都存在,在同一个时间只有一个实例处于活动状态。

background.js

背景页的JS,一般不需要上面的background.html也可以,manifest.json中按照如下配置就可以了:

“background”: {
“scripts”: [“background.js”]
}

func.js

一个需要注入到页面中的 content script

icon.png

应用的图标 19px * 19px

jquery-2.0.2.js

需要注入页面中使用的jquery库

manifest.json

应用的配置文件

popup.html

点击浏览器工具栏时,应用的弹窗页面

popup.js

弹窗页面对应的JS文件,在popup.html中引入。

下面就逐个文件说明:

manifest.json

{
“manifest_version”: 2,
“name”: “pv show”,
“description”: “__MSG_ext_desc__“,
“version”: “2”,
“default_locale”: “en”,
“icons”: {
“48”: “images/icon_16.png”,
“48”: “images/icon.png”,
“128”: “images/icon_128.png”
},
“permissions”: [
“tabs”,
“http:///“,
“https:///“,
“notifications”
],
“browser_action”: {
“default_icon”: “images/icon.png”,
“default_popup”: “options.html”,
“default_title”: “网页流量统计”
},
“background”: {
“scripts”: [“background.js”]
}
}

popup.html

<!DOCTYPE html>




开关灯

<!-- 引入JS文件,这里引入的文件只能在popup.html页面中使用,不能再web页面中使用(页面中的为content script) –>




关灯

开灯


popup.js

/
\

* 这个JS文件表示对popup.html文档的操作
* 比如直接在这里写的document也是代表了popup.html的文档流
*/

// 这里的document代表了popup.html的文档流,所以也是注册这个页面中的dom事件
document.addEventListener(‘DOMContentLoaded’, function(){
var divs = document.querySelectorAll(‘div’);
var obj = {“name”:”root”, “password”:”123”};
for(var i=0; i<divs.length; i++){
divs[i].addEventListener(‘click’, function(e){
// var jsonText = JSON.stringify(e); // 转换报错
// console.log(jsonText);
// chrome.tabs.executeScript(null,
// {code:”switchLight(‘“+ obj +”‘);”, allFrames: true}); // 这里如果传递一个e事件对象的话,会自动转换为字符串字面值,导致对象变成了字符串
// 向页面注入JavaScript 脚本执行,由于这里调用的是一个JS方法switchLight(),该方法在func.js文件中,所以可以在background.js中把该JS(content script)注入到web页面中。
chrome.tabs.executeScript(null,
{code:”switchLight(‘“+ e.target.id +”‘);”, allFrames: true});
// console.log(“send”);
// chrome.extension.sendRequest(e); // 发送请求方法可以传递JSON对象,但是这里chrome把e事件对象转换为JSON字符串时会报错:Uncaught TypeError: Converting circular structure to JSON
});
}
});

func.js

// 一个简单的方法直接设置document.body的背景颜色,即开关灯效果
// 由于这个content script是注入到web页面中的,所以这里的document也就是代表web页面中的文档
function switchLight(lightAction){
console.log(lightAction);
if(lightAction == ‘off’){
document.body.style.backgroundColor=’#000’;
} else {
document.body.style.backgroundColor=’#fff’;
}
}

background.html

背景页,应用的整个生命周期都存在,这个页面只是简单的引用了background.js文件,不用也可以,见上面的说明。







bakcground.js

/*
\
注册标签页更新时的事件
* 这里调用了initialize()事件,把func.js注入当前标签页中
*/
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
initialize(tabId);
});

/*
\
注册切换标签页时的事件
* 这里调用了initialize()事件,把func.js注入当前标签页中
*/
chrome.tabs.onSelectionChanged.addListener(function(tabId, selectInfo) {
initialize(tabId);
});

/*
\
初始化方法 ,注入func.js事件
* @param {Object} tabId
*/
function initialize(tabId){
chrome.tabs.executeScript(tabId, {file: “func.js”, allFrames: true});
chrome.tabs.executeScript(tabId, {file: “jquery-2.0.2.js”, allFrames: true});
}

/*
\
启动一个chrome.extension.onRequest事件监听器用来处理消息
*/
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {
chrome.tabs.executeScript(null, {code: “switchLight(“+ request +”);”, allFrames: true});
});

源代码稍后补充…

arthinking wechat
欢迎关注itzhai公众号