chrome插件篇：资源监控01

前言：

因一些需求，前阵子需要帮助某些同学，检测网络请求并下载之。

身为一只前端程序猿，首先想到的，就是开发chrome插件。

BUT，旅途各种忐忑，木有中文api，官方缺少重要的例子，各种层次api的运行不正确 & 等等，等等~。

功能说明：

1、监控网络请求

2、下载（这部分以后再讲

界面如下：

manifest.json讲解：

1、background属性：

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

background可以理解成插件的后台代码。

它指定的脚本，运行在浏览器插件的整个生命周期，只要插件不被停用，或者卸载，就算我们没有展开插件的界面，它都在默默的运行。

2、browser_action属性：

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

browser_action中，能指定插件现在在工具栏的logo、title，而其中的“default_popup”属性，则指定点击插件logo后的弹出层界面（即上面那个截图的弹出界面）；

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"){

		// 对返回的数据进行处理

});

参考文档：

http://chrome.liuyixi.com/overview.html