前言：

因一些需求，前陣子需要幫助某些同學，檢測網路請求並下載之。

身為一隻前端程式猿，首先想到的，就是開發chrome外掛。

BUT，旅途各種忐忑，木有中文api，官方缺少重要的例子，各種層次api的執行不正確 & 等等，等等~。

功能說明：

1、監控網路請求

2、下載（這部分以後再講

介面如下：

manifest.json講解：

1、background屬性：

{
  ......
  "background": {
    "scripts": ["background.js"]
  }
  ......
}

{
  ......
  "browser_action": {
    ......
    "default_popup": "popup.html"
  }
  ......
}

chrome.extension.sendMessage({your message object});

chrome.extension.onMessage.addListener(function(messageObject){ ... });
 

與後臺的 background.js進行通訊。

核心程式碼：

1、在background.js裡：

chrome.webRequest.onCompleted.addListener(function(details){

	// 請求完畢，返回的相關資料，都在details中

	// 拿到資料後，可以通過chrome.extension.sendMessage({msg:"getNetworkResource", data:details});將資料通知popup.html

},{urls: ["<all_urls>"]},["responseHeaders"]);

因為popup.html的資料，會在外掛介面收起的時候回收，所以，不合適進行網路監聽。

PS：最好就在background.js中，對請求回來的資料，進行快取

2、在popup.html中

呼叫剛剛介紹過的

chrome.extension.onMessage.addListener(function(data){

	if(data && data.msg == "getNetworkResource"){

		// 對返回的資料進行處理

	}

});

參考文件：