chrome扩展应用实例

chrome extensions 基本组成，唯一必要的文件就是manifest.json这个应用的配置清单

manifest.json中前三个参数为必要参数，其他的可选：

{

"name ":"your extensions name ",

"version":"1.0.0.1",                                               //扩展应用版本，自定义

"manifest_version":2,                                         //清单文件的版本，现在都应该写2

"icons":{                                                             //图标，暂时也没加载成功

”16“：”imgs/icon.png",

"48":"imgs/icon48.png",

"128":"imgs/icon128.png"

},

"background":{                                                  //扩展的后台页面，持续运行，一般是只需要写js文件就可，如果需要也可写page

//"page":"background.html",

"scripts":["background.js"]

},

"permissions":[                                                //允许在background,popup内访问的网站，或页面的其他信息权限，如网页上的右键菜单

"http://*/*"，                                                //这个表示所有的http网页

“notifications"                                                //通知

]，

”browser_action":{                                         //扩展应用的的三种形式之一，出现在浏览器右上角的图标

"default_icon":"imgs/icon19.png",

"default_title":"my extension",

"default_popup":"popup.html"                      //点击右上角的图标时出现的页面

},

“content_scripts":                                                                                          //  可以操纵页面的js，但不能调用与被调用 页面中的js变量，方法交互

[{

"js":["jquery-3.3.1.min.js","my_content_script.js"],                                        //js脚本列表，这里把jquery加进去，在其他content_scripts中就可以使用jquery语法了

"css":[],

"matches":["*://*.cnblog.com/*","*://*.tmall.hk/*"],                                     //这些js作用于哪些页面

”run_at":"document_end"                                                                              //在什么时候执行，这里表示页面加载完成后执行

}],

"web_accessible_resources":["images/*.png","images/*.gif","echarts.js"]    //在页面上可以直接访问的资源列表，相当于静态文件

}

这里我主要用到的就是content_scripts和background.

content_scripts可以直接改变页面的元素，增删改，但是权限有限，需要与background通信，交换信息，再改造页面。

background 是一个持续存在与浏览器后台的页面，不可见，可以进行跨站访问，获取数据

popup也与background具有相同的功能，但是只用当用户点击时才被激活，下次被点击时又是初始状态

在 my_content_script.js中，

var echar_src=$("<script type='text/javascript' src="+chrome.extension.getURL('echarts.js')+" </script>");

这里chrome.extension.getURL('echarts.js'),     echarts.js在web_accessible_resources中列出了，所以页面可以直接访问该资源

$('#content').append(echar_src)

conten_scripts与background 通讯，这是有问有答的多次通讯，建立一个专用端口，然后在端口上通讯，如果只需发送一次性消息，可用其他简单写法

var port = chrome.runtime.connect({name: "敲门"});
port.postMessage({joke: "敲门"});
console.log('I AM content script, had send message:'+JSON.stringify({joke: "敲门"}));
port.onMessage.addListener(function(msg) {
if (msg.question == "是谁？"){

port.postMessage({answer: "数据",name:c5_name,site:"c5"});
console.log('i answer bkgrd.js for data ');
}
else if (msg.question == "ok")
{
console.log('i got data :'+JSON.stringify(msg.data));
var pricenode=$("#content");
exe_ele=$("<script>var jsdata="+JSON.stringify(msg.data)+"; hotlineLine(jsdata);</script>") ;
pricenode.append(exe_ele);
console.log('i am after the data insert ');
}
});

在background.js中

function httpRequest(url,callback){                                                         //这里定义一个请求方法，url必须是manifest.json的参数permissions中所列出的地址
var xhr=new XMLHttpRequest();
xhr.open("GET",url,true);//初始化一个请求，采用异步
xhr.onreadystatechange=function(){
if (xhr.readyState==4){
callback(xhr.responseText);                                                                   //XMLHttpRequest.responseText 请求的返回值，类型为string
}
}
//发送数据
xhr.send();
}

chrome.runtime.onConnect.addListener(function(port) {                        //监听port.name=="敲门"这个端口中消息
console.assert(port.name == "敲门");
port.onMessage.addListener(function(msg) {
if (msg.joke == "敲门")
port.postMessage({question: "是谁？"});
else if (msg.answer == "女士")
port.postMessage({question: "哪位女士？"});
else if (msg.answer=='数据'){
httpRequest(MY_DATA_URL, function(res){
port.postMessage({question:'ok',data:JSON.parse(res)});
});
}
});
});

在 扩展应用的 组建间通讯时，可以认为发送的消息 json形式的对象都是自动转换成string发送出去，收到的消息也是自动右string转换成json对象。但是从外面请求来的数据，需要用JSON.parse()来将其转换成json对象。