chrome extensions 开发

前端时间看到别人博客上面写的chrome扩展开发，自己也想动手试下，就顺便写了一个小例子（为公司的测试环境设置cookie），现在记录下来。方便下次开发的时候能快速回忆起来

目录结构

目录结构

index.html -> 点击插件后的弹窗
图片 -> 发布插件和插件栏显示所用
manifest.json 配置文件
script 脚本文件

下面从manifest.json开始解释

{
   "browser_action": {
      "default_icon": "48.jpg",
      "default_popup": "index.html"
   },
   "content_scripts": [ {
      "js": [ "scripts/lib/jquery-1.7.2.min.js", "scripts/main.js" ],
      "matches": [ "http://*/*", "https://*/*" ]
   } ],
   "description": "Company test environment cookie settings(公司预发布环境cookie设置)",
   "icons": {
      "16": "16.jpg",
      "48": "48.jpg",
      "128":"128.jpg"
   },
   "manifest_version": 2,
   "name": "预发布环境设置",
   "permissions": ["webRequest","notifications", "cookies", "tabs", "http://*/*", "https://*/*","http://www.zaful.com/","" ],
   "version": "1.1.0",
   "background": { "scripts": ["scripts/lib/jquery-1.7.2.min.js", "scripts/background.js"] }
}

browser_action 插件栏的图标,指定弹出模板(注意，现在browser_action和page_action不能一起使用了)
content_scripts 指定和页面进行交互的脚本,并且可以调用chrome API和background_script进行交互
descriptions 插件描述
icons 发布时有用
manifest_versions 版本，现在都是使用2
name 插件名称
permissions 一些功能的权限(cookie，弹窗之类的)
background 弹窗里面的脚本

然后是index.html 弹窗模板

    

         预发布
    

这个很明显了，就不多做解释了

background.js 弹窗里面的脚本 主要是定义一些chrome通知的方法

function inYuFaBu() {
    
        var notification = new Notification('预发布提示', {
            icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
            body: "已经进入预发布环境",
        });
    

}


function outYuFaBu() {
    
        var notification = new Notification('预发布提示', {
            icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
            body: "退出预发布环境",
        });
    

}

通知

这里主要是调用chrome自带的通知方法 Notification 需要在配置文件里面设置permissions

main.js 主要逻辑都在这个里面

var  url = '';
var domain = '';
var $body = '';


function getHost(url)
{
    var host = "null";
    if(typeof url == "undefined"|| null == url) {
        url = window.location.href;
        $body = $('body');
    }
    var regex = /^\w+\:\/\/([^＼/]*).*/;
    var match = url.match(regex);
    if(typeof match != "undefined" && null != match) {
        host = match[1];
        domain = host.split('.');
        domain.shift();
        domain = '.' + domain.join('.');
    }
    return 'http://'+host;
}

function setCookie() {
  chrome.cookies.set({
      domain: domain,
      expirationDate: 1505720700, 
      httpOnly: false,
      name:"staging",
      path: "/",
      secure: false, 
      url: url,
      value: "true"
  },function(cookie){
      chrome.extension.getBackgroundPage().inYuFaBu();
  });
}

function removeCookie(url){
    chrome.cookies.remove({
        'url':url,
        'name':'staging'
    },function () {
        chrome.extension.getBackgroundPage().outYuFaBu();
    });
}

function initCookie(url) {

  var str="";
  chrome.cookies.get({"name": "staging","url":url },function(cookie){
      if(cookie){
          str=cookie.value;
      }
        if(""!=str){
            $('#savehm').attr("checked",true);
            chrome.extension.getBackgroundPage().inYuFaBu();

        }
  });
}

function init(){
    chrome.tabs.getSelected(null, function(tab) {
        if(tab){
            url = getHost(tab.url);
            initCookie(url);
        }
    });

  $('#savehm').click(function() {
      if($('#savehm').attr('checked')) {
          setCookie();
      }else{
          removeCookie(url);
      }
    
  });

  $('#savemm').click(function() {
     if($('#savemm').attr('checked')){
        $('#savehm').attr("checked",true);
     }else{
        $('#savehm').attr("checked",false);
     }
  });
  
}
document.addEventListener('DOMContentLoaded', function () {
  init(); 
});

document.addeventListener 监听点击插件后，加载完成开始初始化 init()
init() 里面有一个chrome.tab的接口 大概就是监听chrome的标签页的一系列接口,在这个里面我们会拿当前页面的url并且匹配主域名,然后初始化cookie initCookie()
initCookie() 主要就是拿当前域名下面 看有没有一个叫staging的cookie 如果有,就通过chrome.extension的接口调用background.js 里面定义好的通知方法
setCookie() removeCookie() 就是设置cookie和删除cookie了 也都是调用了chrome自带的接口

下面说一下调试的tips

调试

我们可以点击右键，然后审查弹出内容，就可以查看源码和调试了 （如果有某个功能自己不能实现，可以去chrome应用中心找到类似的功能的插件，然后打断点研究）

插件ID

已安装插件

可以通过已安装插件的id，在本地chrome的插件里面查找，文件夹里面就是源码了

打包，上传

ssa.gif

Paste_Image.png

选中开发者模式 然后打包扩展程序 然后就会生成一个.crx文件 把这个文件拖到扩展程序这个页面就可以装上去了，另外一个.pem的文件是一个密匙文件,(下次重新打包如果有的话就需要选择，也可以直接删掉，就不用选择了）

上传页面

上传成功

发布的时候不能够发布crx文件，需要压缩成zip文件，然后按照上面的目录结构基本可以通过审核

发布地址

发布之前需要交5美元的保护费-_- 可以办一个双币信用卡 然后地址填香港就可以了

自己的第一个插件大概就是这样了,其实里面还有一些东西没有弄清楚。但是学一个东西最开始最好就是动手开始做，做出来后就会有一个大概的轮廓，如果再需要继续研究也会方便很多。

源码地址