开发Chrome插件，如抢票、秒杀、页面数据抓取等，可以搜集一些数据。
开发插件需要的东西：manifest.json popup.html popup.js content-script.js background.js
配置文件：manifest.json
{
"name": "webtrendsTool",
"manifest_version": 2,
"version": "1.0",
"description": "chrome自制小插件",
"background": { "scripts": ["zepto.js","background.js"] },
"page_action": {
"default_icon": {
"19": "ico.png",
"38": "ico.png"
},
"default_title": "webtrendsTool", // shown in tooltip
"default_popup": "popup.html"
},
"permissions": [ "tabs","http://localhost/"],
"content_scripts": [
{
"matches": ["https://www.cnblogs.com/*"],
"js": ["zepto.js", "content-script.js"],
"run_at":"document_end"
}
]
}
background script即插件运行的环境，这是chrome专门给插件开辟的一块地方，与页面的脚本分开，一般我们browser级别的逻辑就会写在这里。
content script: 就是可以对页面内容进行操作的脚本了，它可以访问DOM里的内容，但又受到很多限制，比如并不能访问web页面或其它content script中定义的函数和变量，它默认是在网页加载完了和页面脚本执行完了，页面转入空闲的情况下（Document Idle）就会运行，但这个是可以改变的。content script和我们扩展的background script处于不同的环境，它们需要之间通过message机制来进行通信。我的理解是，content script其实算是插件与page操作交互的一个桥梁了。
content script：其实算是插件与page操作交互的一个桥梁，这个里面主要是获取目标页面上的数据，可以操作目标页面的dom，比如从页面上抓取dom，解析数据。background： 浏览器级别的操作
popup.js: 通过background 获取抓取的页面数据
content-script.js
var msgData = [];
console.log('content-script!!!!');
var allProducts = $(".post_item");
for(var i=0,len=allProducts.length;i<len;i++){
var name = allProducts.eq(i).find(".titlelnk").html();
var promoprice = allProducts.eq(i).find(".diggnum").html();
msgData.push({'name':name,'price':promoprice});
}
//数据传递 与background.js通信
chrome.runtime.sendMessage(msgData);
background.js
function getDomainFromUrl(url){
var host = "null";
if(typeof url == "undefined" || null == url)
url = window.location.href;
var regex = /.*://([^/]*).*/;
var match = url.match(regex);
if(typeof match != "undefined" && null != match)
host = match[1];
return host;
}
function checkForValidUrl(tabId, changeInfo, tab) {
if(getDomainFromUrl(tab.url).toLowerCase()=="www.cnblogs.com"){
//只在指定页面展示 插件图片
chrome.pageAction.show(tabId);
}
};
chrome.tabs.onUpdated.addListener(checkForValidUrl);
//接收从content-script传递来的数据，供popup使用
var postData = {};
chrome.runtime.onMessage.addListener(function(request, sender, sendRequest){
postData = request;
// $.ajax({
// url: "http://localhost:3000/savedata",
// cache: false,
// type: "POST",
// data: JSON.stringify(postData),
// dataType: "json",
// success:function(response){
// },
// error:function(err){
// }
// })
});
popup.js
//background 里面的数据
document.addEventListener('DOMContentLoaded', function () {
var data = chrome.extension.getBackgroundPage().postData || '';
console.log('popup---postData',data);
$(".info").html(JSON.stringify(data));
});