【轻知识】chrome扩展开发——不智能过滤广告

先看看效果

设置前

设置前

设置后

设置后

规则

规则
面板解读

直接看json 就晓得界面功能了。

iframe	轮播广告
.pulllog-box	底部广告
#csdn-toolbar	顶部tabbar
aside	隐藏侧栏就没必要再添加iframe了

{
    "blog.csdn.net":[
        {
            "is_enable":1,
            "rule":"iframe"
        },
        {
            "is_enable":1,
            "rule":".pulllog-box"
        },
        {
            "is_enable":1,
            "rule":"#csdn-toolbar"
        },
        {
            "is_enable":1,
            "rule":"aside"
        }
    ]
}

开发动机

查资料的时候，经常会看到一些广告。会分神。比如：百度右侧广告、CSDN的广告（还是轮播的）等等。

其实我们查资料，固定访问的域名很多时候都是高频的。因为，有自己独立域名的童鞋还是少数（更少的是投广告在自己博客上，比如：阮一峰、廖雪峰等等）

我们看一些自我比较难的知识点（比如：底层知识）本来就看的慢。轮播广告晃来晃去。心烦，还是双十一促销广告。上一秒思考网络事件模型，下一秒想买个降噪耳机吧。开个玩笑。

拿来主义

我看了这篇文章《【干货】Chrome插件(扩展)开发全攻略》（文末有链接）。作者把自己的作品放了github。

我想快速搞定.....。那么我需要知道插件开发规则（比如：所谓搭建个架子）。比如你要用一个框架写业务。正好兄弟部门有人用过，那么down 他一份。因为我仅仅需要个架子跟一个mvc demo。

于是，我down 了上文文中作者github的demo。

第一版完成

进一步畅想

联网弄个远程规则库？每个人都弄个账号保存自己的规则？这样换电脑就不用再手动了。再增加一些程序员经常用的小工具？

鼠标划区域屏蔽？

..........（省略的想象）........

其实：adblock 扩展就很智能（支持划区域屏蔽）。推荐给大家https://chrome.google.com/webstore/search/adblock?hl=zh-CN

代码

页面加载完根据规则做dom remove

$(function() {
    var u = new URL(location.href);
    host = u.hostname;// 获取host
    // 加载设置
    chrome.storage.sync.get(host, function(data) {
        var eleArr = data[host]; // 获取要删除的元素数组
        if (data[host] != undefined) {
            eleArr.forEach(function(v,k) {
                    console.log(v);
                if (v.is_enable === 1) {
                    $(v.rule).remove();
                }
            })
        }
    });
});

界面操作

var ruleObj = {
    host: '',
    ruleData: [],
    alreadyDiv: $("#already"),
    msg: '操作成功！',
    init: function() {
        var that = this;
        chrome.tabs.getSelected(null, function (tab) {
            var u = new URL(tab.url);
            that.host = u.hostname;// 获取host
            // 因为是异步 所以要放这里边。
            chrome.storage.sync.get(that.host, function(data) {
                 if (data[that.host] != undefined) {
                    var eleArr = data[that.host]; // 获取要删除的元素数组
                    that.ruleData = eleArr;
                    that.render(); // 渲染数据
                 }
            });
        });
    },
    saveData: function() {
        var that = this;
        var obj = {};
        obj[that.host] = that.ruleData;
        chrome.storage.sync.set(obj, function() {
            var statusSpan = $("#status");
            statusSpan.html(that.msg);
            setTimeout(() => {statusSpan.html('');}, 800);
            pageObj.refresh();
        });
    },
    reloadRender: function() {
        this.alreadyDiv.empty();
        this.render();
    },
    render: function() {
        var that = this;
        this.ruleData.forEach(function(v,k) {
            var statusDesc = v.is_enable == 0 ? "启用": "禁用";
            that.alreadyDiv.append("<p><input type='text' id='rule"+k+"' value='"+v.rule+"' /><button class='update' data-index='"+k+"'>更新</button><button class='delete' data-index='"+k+"'>删除</button><button class='is_enable' data-index='"+k+"'>"+statusDesc+"</button></p>");
        })
    }
};
var pageObj = {
    refresh: function() {
        chrome.tabs.getSelected(null, function(tab) {
          var code = 'window.location.reload();';
          chrome.tabs.executeScript(tab.id, {code: code});
        });
    }
}

ruleObj.init();
ruleObj.render();

$("#already").on("click", ".update", e => {
    var index = $(e.target).data("index");
    var rule = $("#rule"+index).val();
    if (rule.length == 0) {
        return false;
    }
    ruleObj.ruleData[index].rule = rule;
    ruleObj.saveData(); 

})
$("#already").on("click", ".delete", e => {
    var index = $(e.target).data("index");
    ruleObj.ruleData.splice(index, 1);
    ruleObj.reloadRender()
    ruleObj.saveData();
})

$("#already").on("click", ".is_enable", e => {
    var index = $(e.target).data("index");
    var rule = $("#rule"+index).val();
    if (rule.length == 0) {
        return false;
    }
    ruleObj.ruleData[index].is_enable = ruleObj.ruleData[index].is_enable ? 0 : 1;
    ruleObj.saveData(); 
})

$("#add").click(e => {
    var rule = $("#rule").val();
    if (rule.length == 0) {
        return false;
    }
    $("#rule").val('');
    var ruleJson = {
        rule: rule,
        is_enable: 1
    }
    ruleObj.ruleData.push(ruleJson);
    ruleObj.reloadRender();
    ruleObj.saveData()
});

demo下载 https://github.com/yanshinian/adblock-chrome

插件icon