chrome 插件开发

谷歌浏览器插件是一种小型的用于定制浏览器体验的程序。通过插件，可以自定义浏览器的一些行为来适应个人的需要，只要你会HTML，JavaScript，CSS就可以动手开发浏览器插件了。

开发谷歌浏览器插件，就相当于在谷歌浏览器的基础之上进行活动，站在巨人的肩膀上，操作很多东西都方便了一些。有了插件，我们可以定制js爬虫、屏蔽网页广告，网页实时查词，修改http请求头，等等，能做的东西很多。

首先看目录结构：

manifest.json

{
    "manifest_version": 2,
    "name": "数据抓取",
    "version": "0.0.1",
    "background": { "scripts": ["jquery-2.0.0.js", "background.js"] },
    "browser_action": {
        "default_icon": {
            "19": "cnblogs_19.png",
            "38": "cnblogs_38.png"
        },
        "default_title": "tmall order rx data", // shown in tooltip
        "default_popup": "popup.html"
    },
    "icons":{"16":"cnblogs_19.png","48":"cnblogs_19.png","128":"cnblogs_19.png"},
    "permissions" : [
        // "contextMenus", // 右键菜单
        "tabs", // 标签
        // "system.cpu",
        // "system.display",
        "notifications", // 通知
        "webRequest", // web请求
        "webRequestBlocking",
        "storage", // 插件本地存储
        "http://*/*" // 可以通过executeScript或者insertCSS访问的网站
        // "https://*/*" // 可以通过executeScript或者insertCSS访问的网站
    ],
    "content_scripts":[{
        "matches":["https://www.xxx.com/a/*","https://www.xxx.com/b/*"],
        "js":["jquery-2.0.0.js", "content_script.js"],
        "css":["content_script.css"]
    }]
}

background.js
主要后台数据处理，并且做为不同页面标签的信息传递，部分代码如下

chrome.runtime.onMessage.addListener(function(request, sender, sendRequest){
     //保存订单号以及图片地址
    if(request.type=="taobaoOrder"){
     //开始采集
     }else if(request.type=="start"){
          let data = {};
          data.type = 'start';
          sendMsg(data);
     //采集完成
     }else if(request.type=='open'){
          chrome.tabs.create({
                url:request.url
          });
     }
     return false;
});

主要通过 chrome.runtime.onMessage.addListener 监听接受的数据，然后，进行处理

chrome.tabs.query({
          title:'已卖出的宝贝'
     },
     function(tabs) {
          console.log('sendMsg',tabs[0].id,data);
          chrome.tabs.sendMessage(tabs[0].id, data,function(response) {});
     })

通过 chrome.tabs.query 可以将信息发送的指定页签

content_script.js 是注入每个页签的 js ，可以操作dom ，但是 独立于页签其他js
通过 chrome.runtime.onMessage.addListener 监听消息
通过 chrome.runtime.sendMessage({type:"order",orderNo:orderNo}); 发送消息

popup.html 是插件的界面，比如插件需要输入参数，等用户行为触发会用到

chrome 还有很多其他API，