油猴脚本开发入门(TamperMonkey)

油猴脚本是一个浏览器扩展,如果你还没听说过那就简直是太古代人了 ...
目前来说,使用的人群最多的就是浏览器狂热者和大前端码农了吧,对于前者,都在疯狂的找脚本,后者则疯狂的输出 →_→

油猴支持很多主流的浏览器,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,至此,关于如何开始开发油猴脚本就说完了,期待大家为油猴脚本资源多做贡献 !

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,233评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,013评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,030评论 0 241
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,827评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,221评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,542评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,814评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,513评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,225评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,497评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,998评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,342评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,986评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,812评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,560评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,461评论 2 266

推荐阅读更多精彩内容