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

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

首先看目录结构:
chrome_1.png
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,

标签: none

添加新评论