chrome插件知识点总结

这两天做了一个chrome插件，主要作用就是，通过按钮向当前页面注入一个cookie，主要用于判别是否开启测试环境，另一个功能是检测页面是否有CNZZ链接，如果有，通过处理，实现点击弹框链接跳转到相应数据报表页。（项目地址：https://github.com/dannisi/switch_cookie_chrome_extension）

---

下面总结一下，方便日后的回顾。

1.配置

{  "name": "switch development environment",  "version": "1.0",  "manifest_version": 2,  "description": "通过切换按钮，启用关闭测试环境",  "content_scripts":[{    "matches":["http://*/*", "https://*/*"],    "js":["contentScript.js"]    }],  "icons":{    "64":"icon.png"  },  "background":{    "scripts":["background.js"]  },  "permissions": [    "tabs", "cookies", "http://*/*", "https://*/*", "background"  ],  "browser_action": {    "default_icon": "icon.png",    "default_title": "测试吧",    "default_popup": "popup.html"  }}

这里需要注意：
1. “manifest_version”,必须是2。
2. “content_scripts”，配置向当前页面注入js和css，控制页面样式或结构，如果只是控制唯一的页面，只需要更改“matches”为想要控制页面的链接即可。这里只有注入js文件，如果还需要css，和js的写法一样。
3. “icons”，设置在chrome加载打包后显示的图标
4. “background”，这个相当于起了一个桥的作用，项目中需要它来传递信息，因为contentScript.js和popup.js不能通信。
5. “permissions”，配置权限
6. “browser_action”，弹出框的配置

2.增删cookie功能

1. chrome.tabs.getSelected(null, function(tab){    tab.url  });

通过它获得当前页面的url.

2.function setTestCookie(url,name,value){  var time = new Date();  var expires = time.setTime(time.getTime()/1000+7*24*3600);//缓存7天  var domain=url.split('/')[2];  var cookie={    'url':url,    'name':name,    'value':value,    'path':'/',    "domain":domain,    'expirationDate':expires  }  chrome.cookies.set(cookie);};

设置cookie

3.function removeTestCookie(url,name){  var cookie={    'url':url,    'name':name,  }  chrome.cookies.remove(cookie);};

删除指定name的cookie

4.var cookieDetail={    'url':url,    'name':'x-server-env',  };  chrome.cookies.get(cookieDetail,function(cookie){  //获得指定name的cookie的全部信息 });

这里通过判断参数cookie，来实现按钮的相关状态

5.另外需要注意的是，元素的处理，除了有些页面加载完后自动实现的之外，其余都需要通过addEventListener事件触发。类似如下：

$('checkBox').addEventListener('click',function(e){    checkBoxStatus(e);   })

3.查看CNZZ数据报表功能

首先需要查看当前页面是否有cnzz链接，所以需要注入脚本来获取

"content_scripts":[{    "matches":["http://*/*", "https://*/*"],    "js":["contentScript.js"]    }],

通过contentScript.js获得需要的页面里的一些信息，此时需要考虑如何将信息传递给popup.js，这个时候，background.js派上了用场。

• contentScript.js中用到chromeAPIchrome.extension.sendMessage({id:id})
  -发送信息给background.js
• background.js中通过

chrome.extension.onMessage.addListener(  function(request, sender, sendResponse) {    id=[];    id.push(request.id);  });

事件监听，获得contentScript.js发送过来的消息。

• popup.js文件中
• chrome.extension.getBackgroundPage()获得信息

因为在background.js中，事件是立即发生的，需要在这个js中声明一个函数或者变量，然后popup.js中指定这个变量名或者函数名取得信息。如下：

background.jsvar id=[];chrome.extension.onMessage.addListener(  function(request, sender, sendResponse) {    id=[];    id.push(request.id);  });var a=function(){  if(id){    return id;  }else{    return 'false';  }}

popup.jschrome.extension.getBackgroundPage().a();

具体有许多深入的知识点尚未用到，暂不多做介绍…

参考文档：

开发者文档：http://open.se.360.cn/open/extension_dev/devguide.html
chrome extensions 中的交互: http://www.tuicool.com/articles/YfANNr