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

　　

 

 

 

參考連接：http://www.javashuo.com/article/p-mmupaldw-bs.html