油猴脚本是一个浏览器扩展,如果你还没听说过那就简直是太古代人了 ...
目前来说,使用的人群最多的就是浏览器狂热者和大前端码农了吧,对于前者,都在疯狂的找脚本,后者则疯狂的输出 →_→
油猴支持很多主流的浏览器,Chrome、Firefox、Edge、Opera、Safari、UC等等,所以实现了脚本的一次编写,到处运行了吧,感觉基于浏览器的应用才算是真正的跨平台了。
首先上官网 http://tampermonkey.net/ 下载或者在 Chrome应用商店里搜索油猴下载扩展程序,不过这需要借助梯子,好在国内也有Chrome插件的网站,百度一下也能找到。
安装完成后,油猴会在浏览器的扩展插件栏上产生一个图标:
油猴插件
点击进入管理面板之后,即可进入油猴的主界面:
油猴
最左边的小图标使用来创建脚本的,设置项用于对油猴插件进行设置,一般没什么需要修改的,保持默认即可。
实用工具里,我们有很多方式导入导出脚本资源,你可以将你收集的脚本资源存放在 Google Drive 或者 Dropbox 上,也可以导出压缩文件,这样更换了游览器照样可以使用原来的脚本插件。
已安装的脚本里显示的是你当前安装的脚本,可以启用或者关闭脚本。
需要说明的是,安装未知的脚本使非常不安全的,这些脚本可以监听网络请求,按键等敏感操作,所以必须安装可信来源的脚本,如果熟悉 JavaScript,可以审阅源代码,检查是否代码中包含敏感操作。
官方的脚本源:https://openuserjs.org/ ,可以在此搜索添加脚本,有哪些推荐的脚本也可以上逼乎搜索一番,这里就不赘述了。
接下来的,就是介于普通人和大前端的人的一些玩法了,大前端绕路,点击浏览器右上角 X 图标。
首先我们可以试试创建一个新的脚本:
油猴
脚本整体结构就是如此了,name 是指代你的脚本名称,namespace 是命名空间,可以用你的网站名称,version 是你的脚本当前版本,这样别人如果使用了你的脚本,还可以及时更新。description 是对你的脚本的描述,例如:百度超级VIP破解 等等,author 是你的大名,match 是你的脚本在匹配到什么 url 时才触发生效。
在开始接下来的实例的时候,你需要准备的知识有:
HTML+Javascript+jQuery
想要系统性的学习,可以去 MDN 看看: https://developer.mozilla.org/zh-CN/
修改我们的脚本内容如下:
油猴
然后保存,打开任何一个网站都会弹出 'hello world'
油猴
这样,你的第一个脚本就已经开发完成了。
接下来,我们可以进阶一下,对百度的 logo 做点变化,每次打开百度都给他显示一只狗狗图片。
通过 Chrome 的审查元素功能,知道这个 logo 是在一个 id 为 lg 的 div 下的,我们只要替换这个 div 或者里面的 img 的 src 属性值即可,这里粗暴的替换 div 的内容就行。
油猴
修改我们的脚本内容如下:
油猴
脚本意思是查找 div id 为 lg 的元素,如果找到了,就将 html 内容重新替换为新的 img 标签,img 的图片路径为我们自定义的图片路径。
保存后我们再次打开百度:
油猴
发现百度的 logo 已经被替换了,不过,是在百度 logo 加载完成后才替换的,那么有什么办法一开始让他就加载狗狗图片呢,我们试试利用 DOMContentLoaded 事件。
window.addEventListener("DOMContentLoaded", function(){
// 君の代码。
}, false);
结果是,事件不执行了,早期很多人写的脚本都是利用 DOMContentLoaded ,不过现在不行了,不知道是不是油猴升级了导致的,这本也算是个不安全的隐患吧。
接下来说说如何调试我们写的脚本,很简单,早期我为开发企业级应用的时候针对的都是IE6~8浏览器,可没有像 Chrome 这么强大的调试工具,都是用的 debugger 设置断点,然后附加到 Visual Studio 中去调试,这里我们也可以用 debugger,然后打开 Chrome 控制台。
不过还有个问题就是脚本有时候会执行多次,这个比较烦。只能借助 jQuery 的文档就绪函数来判断了。
// ==UserScript==
// @name 第一个脚本
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @include *
// @require http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
// @grant unsafeWindow
// ==/UserScript==
jQuery.noConflict();
(function( $ ) {
debugger;
var a=12;
var b=45;
var c = a+b;
var d = a-b;
})( jQuery );
在上面的代码中,我们也加入了 debugger,再次保存,打开浏览器:
油猴
接下来 F10 和 F11 进行调试了,在右侧 Local 窗口能看到执行变量值。
油猴
OK,至此,关于如何开始开发油猴脚本就说完了,期待大家为油猴脚本资源多做贡献 !