掘金内容屏蔽插件使用【content-block】
content-block介绍

安装
插件已经发布到chrome应用商店,点击这里即可安装。
如果安装不上的话,可以把源代码下载到本地,可以采取下面方式安装体验

使用
(1)在首页列表页面,右键你不喜欢的文章,在右键菜单中选择【屏蔽作者】或着【屏蔽文章】即可
(2)在文章页面,任意地方右键,同样可以屏蔽这篇文章或者作者
【查看我的屏蔽列表】
点击浏览器右上角,插件图标,可以查看你的屏蔽数据,你可以在这里把作者或者文章,从屏蔽列表中移除

插件屏蔽范围
目前仅支持首页专栏。沸点啥的不支持(以后会考虑)
如何关闭插件
如果你不想屏蔽或者暂时取消屏蔽,直接在这关闭 chrome://extensions/
【注意】如果你选择删除插件,再次安装的时候,之前的屏蔽数据就没有了,操作须谨慎
实现原理
流程大概分3步
1。右键选取不想看的文章,获取文章的信息,包括文章url,作者等
2。添加文章信息到本地存储storage
3。拦截请求,根据storage过滤数据返回,剔除被屏蔽的数据
代码结构

- main.js负责过滤数据
- content.js负责消息通信,解析dom
- background.js创建右键菜单
- bridge.js负责动态插入js(解决插件无法获取浏览器js变量)
- pop.js插件弹出窗口页面,屏蔽列表渲染
核心点:如何拦截请求?
拿掘金来说,页面的请求都是基于XML request发送,修改它,具体代码【main.js】
不知道为啥,代码粘贴过来总是变成一行,只能截图了
// 修改XMLHttpRequest open方法
XMLHttpRequest.prototype.open = function() {
var url = arguments[1];
if (url.match(myRequestConfig.articleUrl)) {
this.myRequestType = 'article'
} else {
this.myRequestType = ''
}
if (!this._hooked) {
this._hooked = true;
setupHook(this);
}
rawOpen.apply(this, arguments);
}
function setupHook(xhr) {
function getter() {
delete xhr.responseText;
var ret = xhr.responseText;
console.log(222);
setup();
console.log(444);
if (xhr.myRequestType) {
return filterResponse(xhr, ret)
} else {
return ret
}
}
function setup() {
console.log(1111);
Object.defineProperty(xhr, 'responseText', {
get: getter,
configurable: true
});
console.log(3333);
}
setup();
}
数据存储 【chrome.storage.sync】
它和普通的存储不一样的地方就是可以关联chrome账号,如果你换电脑,只要登陆账号,数据是同步的
如果你看代码的话会发现,插件还使用了localStorge,原因是chrome插件的安全策略限制,插件无法直接访问浏览器js变量,所以插件的数据要同步到页面localStorge中,在main.js中就可以直接获取屏蔽的数据
最后
插件安装地址 chrome.google.com/webstore/de…
文章代码部分只介绍了最核心的一个点,如果你想看完整代码,请移步 github.com/ColdDay/con…
声明:由于作者水平有限,不保证插件的稳定性或者其它未知bug,仅用于学习
如有问题,请指正
--------------