如何开发一个油猴(TamperMonkey)脚本

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

油猴支持不少主流的浏览器，Chrome、Firefox、Edge、Opera、Safari、UC等等，因此实现了脚本的一次编写，处处运行了吧，感受基于浏览器的应用才算是真正的跨平台了。

首先上官网 tampermonkey.net/ 下载或者在 Chrome应用商店里搜索油猴下载扩展程序，不过这须要借助梯/子，好在国内也有Chrome插件的网站，百度一下也能找到。

安装完成后，油猴会在浏览器的扩展插件栏上产生一个图标：

油猴插件

点击进入管理面板以后，便可进入油猴的主界面：

油猴

最左边的小图标使用来建立脚本的，设置项用于对油猴插件进行设置，通常没什么须要修改的，保持默认便可。

实用工具里，咱们有不少方式导入导出脚本资源，你能够将你收集的脚本资源存放在 Google Drive 或者 Dropbox 上，也能够导出压缩文件，这样更换了游览器照样可使用原来的脚本插件。

已安装的脚本里显示的是你当前安装的脚本，能够启用或者关闭脚本。

须要说明的是，安装未知的脚本使很是不安全的，这些脚本能够监听网络请求，按键等敏感操做，因此必须安装可信来源的脚本，若是熟悉 JavaScript，能够审阅源代码，检查是否代码中包含敏感操做。

官方的脚本源：openuserjs.org/ ，能够在此搜索添加脚本，有哪些推荐的脚本也能够上逼乎搜索一番，这里就不赘述了。

接下来的，就是介于普通人和大前端的人的一些玩法了，大前端绕路，点击浏览器右上角 X 图标。

首先咱们能够试试建立一个新的脚本：

油猴

脚本总体结构就是如此了，name 是指代你的脚本名称，namespace 是命名空间，能够用你的网站名称，version 是你的脚本当前版本，这样别人若是使用了你的脚本，还能够及时更新。description 是对你的脚本的描述，例如：百度超级VIP破解 等等，author 是你的大名，match 是你的脚本在匹配到什么 url 时才触发生效。

在开始接下来的实例的时候，你须要准备的知识有：

HTML+Javascript+jQuery

想要系统性的学习，能够去 MDN 看看： 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，至此，关于如何开始开发油猴脚本就说完了，期待你们为油猴脚本资源多作贡献 ！

---

原文：www.jianshu.com/p/2408cdb48…