自己写一个Chrome插件

这篇文章也是之前在公众号上发布过的,现在整理一下发上来,如果这里分析的廖雪峰老师的网站结构有改变,代码可能也要重新分析编写。

另外,很多时候,使用Tampermonkey写用户脚本会更加方便,而且也可以使用别的许多大牛写的脚本,也推荐大家使用。我这篇文章只是写一下制作插件的过程。

前言

前段时间在看廖雪峰老师网站的JavaScript教程时,发现有很多图片广告,看得我很是不舒服。于是决定写一个Chrome插件屏蔽一下。并不是说挂广告有什么不对,只是单纯地想折腾一下……

所以这里就记录下我是怎么做的。

准备工作

首先当然是F12看源码了,我们可以找到图片广告的div。
左侧广告
中间广告
可以看到两个div的class都有uk-clearfix,我们用hide()方法就可以这些图片隐藏了。

编写js代码

以下代码就可以把图片去掉了:

1
$('.uk-clearfix').hide();

然后我就想了,既然要去广告,那就再去得干净一点吧,左侧还有一个关于作者的廖雪峰老师的微博……
微博

于是找到classx-sidebar-left-bottom

1
$('.x-sidebar-left-bottom').hide();

还有下面的分享部分,可以看到这些是分开的。
分享

这里我是通过找到他们的前一个元素来去定位的:

1
$('.x-wiki-content').next().next().andSelf().next().andSelf().next().andSelf().hide();

之后评论这一部分:
评论

本来我想直接去除,但是觉得有些评论还是挺有用的,所以就做成了可以通过点击评论让评论列表隐藏或显示,还让鼠标移到“评论”上就变成手指哈哈:

1
2
3
4
5
$('.x-anchor').next().mousemove(function(){
$(this).css("cursor","pointer");
}).on('click', function () {
$('#x-comment-list').toggle();
});

还有一个提示登录评论的我就直接去掉了:

1
$('#x-comment-list').next().next().andSelf().hide();

制作插件

这里先准备以下文件:
准备文件

icon就是安装后显示的图标,一个jQuery的js文件,另一个js就是刚才自己编写的js脚本:

1
2
3
4
5
6
7
8
9
10
11
window.onload = function () {
$('.uk-clearfix').hide();
$('.x-anchor').next().mousemove(function(){
$(this).css("cursor","pointer");
}).on('click', function () {
$('#x-comment-list').toggle();
});
$('.x-sidebar-left-bottom').hide();
$('.x-wiki-content').next().next().andSelf().next().andSelf().next().andSelf().hide();
$('#x-comment-list').next().next().andSelf().hide();
}

manifest.json就相当于这个插件的配置文件了:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
"manifest_version": 2,
"name": "LiaoXueFeng",
"description": "Don't tell others!",
"version": "1.0",
"permissions": [
"https://www.liaoxuefeng.com/*"
],
"browser_action": {
"default_icon": "icon.png",
"default_title": "Remove somthing!"
},
"content_scripts": [
{
"matches": ["https://www.liaoxuefeng.com/*"],
"js": ["jquery-1.10.2.min.js","Liaoxuefeng.js"],
"run_at": "document_start"
}
]
}

接下来就是打开Chrome的扩展程序界面,点击打包扩展程序这里选了根目录就行,密钥文件是用来更新扩展程序用的:
点击打包
打包

之后生成了crx文件,就完成了!pem文件就是刚才说的密钥文件了。
完成打包

然后就可以安装使用了,以后打开这个网页就变得清爽多了:
效果