chrome插件开发

开发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));
	
	
});

　　

 

 

 

参考链接：https://www.cnblogs.com/guogangj/p/3235703.html