如何开发一个油猴(TamperMonkey)脚本入门教程

发表于 2019-12-10 08:45:41

马上注册，结交更多网友，浏览器插件/脚本不再愁！

您需要登录才可以下载或查看，没有帐号？注册会员

x

本帖最后由疯子先生于 2019-12-10 08:51 编辑

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

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

首先下载油猴(TamperMonkey)脚本 https://www.tampermonkey.cn/thread-2-1-1.html

安装：安装油猴(TamperMonkey)脚本https://www.tampermonkey.cn/thread-4-1-1.html

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

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

最左边的小图标使用来创建脚本的，设置项用于对油猴插件进行设置，一般没什么需要修改的，保持默认即可。

实用工具里，我们有很多方式导入导出脚本资源，你可以将你收集的脚本资源存放在 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，至此，关于如何开始开发油猴脚本就说完了，期待大家为油猴脚本资源多做贡献！

发表于 2021-1-16 18:09:21

学习了，已经写出第一个脚本

如何开发一个油猴(TamperMonkey)脚本入门教程

马上注册，结交更多网友，浏览器插件/脚本不再愁！

频道

关于

友链

免责声明