不知道大家在平时上班努(mo)力(yu)时有没有以下烦恼呢？
-
浏览csdn网站时被他左右两栏的广告和不相关的内容干扰视线
-
跳到知乎时没有登录，会弹出很烦人的登陆弹窗，需要你手动关闭
有一些好学的可能找到了一款叫油猴插件来避免这个问题,我也一开始是这样来避免的，但是csdn处理的页面有点丑，我看到插件源码是原生JavaScript写的，出于程序员的好奇心，就想看看他是怎么实现的，自己能不能实现一个呢？
通过一顿baidu，其实发现并不是很难，主要是要按照chrome的插件开发的配置来，合适的时机执行想执行的代码， 就跟webpack暴露出来的生命周期函数来开发webpack的插件和loader样，其实油猴就是一个插件壳子，在油猴网站下载好，都是运行在这个插件壳子里面的，但是再怎么开发，套壳子只要运行在chrome， 就必须按照chrome的插件开发的配置来，油猴脚本也只是基于这个封装了一层，最后编译都得乖乖编译成chrome认识的样子。今天我先带大家来从0-1实现一个,去掉csdn侧边栏和知乎弹窗的chrome插件；
开发完后显示效果
-
新建一个文件夹chrome(名字随便起)
在chrome文件夹下新建一个json文件叫manifest.json(这个名字是必须是这个名字不能改) 2
{
"manifest_version": 2,
"name": "插件名称",
"version": "1.0",
"description": "插件的描述",
"icons":{
"16":"icon.png",
"48":"icon.png",
"128":"icon.png"
},
"browser_action": {
"default_title":"鼠标点击插件后显示的名字",
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts":[
{
"matches":[
"https://blog.csdn.net/*",
"https://zhuanlan.zhihu.com/*"
],
"css":[
"popup.css"
],
"js":[
"jquery.js",
"popup.js"
],
"all_frames":true,
"run_at":"document_end"
}
]
}
把这份代码自己手打到manifest.json中，接下来我就一个一个字段来解释一下是什么意思，为了更方便理解，上一张扩展程序的图好对比
"manifest_version": 2,
"name": "插件名称",
"version": "1.0",
这三个是必须的
manifest_version：用整数表示manifest文件自身格式的版本号。从Chrome 18开始，开发者应该（不是必须，但是2012年底左右就必须了）指定版本号为2（没有引号）,也就是说现在必须是2
name:是你写的插件的名字；
version:是自己写的版本，在插件上显示情况跟上面的截图做一下对比就知道改显示在哪里了
descriotion:插件的描述插件,描述插件是用来干嘛的
icons:插件的图标，按照三种尺寸配置好,icon.png是自己选好的图片放在跟manifest.json同一级下
browser_action:这个是显示在浏览器点击扩展插件时候显示的样子
content_scripts:注入脚本,是一个数组,matches是要匹配的网址,*是这个域名下的所有网址
css:数组是要注入的css文件 这次暂时没有用到
js:要注入的js脚本,我们处理的弹窗和侧边栏的主要逻辑都在这里处理,方便dom操作我引入了jquery
run_at:是说要在什么时候执行这些注入的脚本,document_end意思是文档结束,也就是页面加载完之后开始执行
popup.html,popup.css,jquery.js,popup.js:都是和manifest.json同目录
if (window.location.hostname == 'blog.csdn.net') {
document.querySelector('aside').innerHTML = "";
document.querySelector('#rightAside').innerHTML = "";
document.querySelector('.csdn-side-toolbar').innerHTML = "";
console.log('第一个插件--------')
} else {
console.log('-------------------知乎-----------------',window)
setTimeout(() => {
$('button.Button.Modal-closeButton.Button--plain').click();
}, 1000);
}
这一块代码应该是很容易看懂,csdn的话审查元素，找到两边栏的类名给他设置成innerHTML为"";
可以看到如果是走知乎的话是需要用定时器的,因为登陆弹窗是页面加载完后又加载弹窗,如果不加定时器,在document_end这个时机获取不到这个点关闭按钮的类名的；
最后获取到，我们用代码自动执行一下click()代码就帮我们点击了关闭按钮
分割线---------------------------------------------------------------------
到现在,插件的代码部分是开发完了,需要我们运行一下了，打开谷歌的设置---->扩展程序
扩展程序一定要打开开发者模式如图中的1
打开开发者模式然后再点2加载已解压的扩展程序,直接打开chrom这个文件夹就好了
然后去知乎和csdn验证,应该就好了；插件开发肯定是边调试边开发,在最开始开发的时候就可以把这个文件夹打开每更新代码就点一下图中的三刷新一下就是最新的插件代码了
这次只写了控制css样式,插件开发还有很多好玩的功能,比如修改鼠标右键自动填充内容，在一个网页自动打开自己的新开发页面,或者网页版小说网站自己获取数据自己重新排版等等
用这些插件能提升我们摸鱼......不对是上班效率，看大家想要什么样功能的插件，可以联系我，有时间我来帮大家开发一个，共同学习,努力工作
