先看看效果
- 设置前
设置前
- 设置后
设置后
-
规则
规则
-
面板解读
直接看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
icon
参考资料：
*《【干货】Chrome插件(扩展)开发全攻略》http://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html#%E5%BC%80%E5%8F%91%E4%B8%8E%E8%B0%83%E8%AF%95
-
《chrome extension API for refreshing the page》（我操作完想刷新页面）
https://stackoverflow.com/questions/8342756/chrome-extension-api-for-refreshing-the-page -
《谷歌扩展开发文档 》 https://developer.chrome.com/extensions
*《Chrome插件（Extensions）开发攻略》 https://www.cnblogs.com/guogangj/p/3235703.html
网友评论