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对象。