油猴(Tampermonkey)浏览器插件简单自定义脚本开发

介绍

浏览器插件,包括油猴插件和其他插件,通过它们可以实现浏览器网页的定制化与功能增强。

其他插件一般只有某种具体的功能,且已经写死而不能更改,比如Adblock插件只用于去广告。

油猴插件是一款用于管理用户脚本的插件,它本身没有什么功能,真正起作用的是它所管理的那些用户脚本。你可以根据需求,利用油猴插件来安装某些特定的用户脚本,从而实现定制化的功能。

入门

入门案例一

先来简单入门开发下一个简单的脚本尝尝鲜

按照顺序进行点击

油猴(Tampermonkey)浏览器插件简单自定义脚本开发_第1张图片

点击加号添加新的自定义脚本

油猴(Tampermonkey)浏览器插件简单自定义脚本开发_第2张图片 油猴(Tampermonkey)浏览器插件简单自定义脚本开发_第3张图片

 ctrl+s保存脚本进行测试

保存后可以在已安装脚本中查看到刚才自己创建的脚本

油猴(Tampermonkey)浏览器插件简单自定义脚本开发_第4张图片

 脚本匹配的页面是百度,所以来到百度首页查看控制台是否会打印我们写好的文本

油猴(Tampermonkey)浏览器插件简单自定义脚本开发_第5张图片

可以看到脚本已生效

 js原生写法蔡徐坤

下面我们将b站蔡徐坤用户的用户名修改为"社会你坤哥"

可以看到原先页面的名字是SniperAugust_蔡徐坤 

拿取页面元素

开发者工具打开进行查找页面元素

原生写法查看是否能拿取到用户名

油猴(Tampermonkey)浏览器插件简单自定义脚本开发_第6张图片 可以拿到,编写脚本

油猴(Tampermonkey)浏览器插件简单自定义脚本开发_第7张图片 

油猴(Tampermonkey)浏览器插件简单自定义脚本开发_第8张图片

保存测试

 油猴(Tampermonkey)浏览器插件简单自定义脚本开发_第9张图片

可以看到脚本已经起作用

jquery版本 

油猴(Tampermonkey)浏览器插件简单自定义脚本开发_第10张图片

测试:

油猴(Tampermonkey)浏览器插件简单自定义脚本开发_第11张图片 发布线上脚本

油猴(Tampermonkey)浏览器插件简单自定义脚本开发_第12张图片

登录后点击自己的用户名

油猴(Tampermonkey)浏览器插件简单自定义脚本开发_第13张图片 油猴(Tampermonkey)浏览器插件简单自定义脚本开发_第14张图片

油猴(Tampermonkey)浏览器插件简单自定义脚本开发_第15张图片 

发布脚本

油猴(Tampermonkey)浏览器插件简单自定义脚本开发_第16张图片 发布成功:

油猴(Tampermonkey)浏览器插件简单自定义脚本开发_第17张图片

发布成功:

油猴(Tampermonkey)浏览器插件简单自定义脚本开发_第18张图片 

你可能感兴趣的:(前端,浏览器插件,油猴插件,篡改猴)