開發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

chrome插件開發