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.js

var 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.js

chrome.extension.getBackgroundPage().a();

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

参考文档：

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