TamperMonkey油猴/暴力猴浏览器脚本插件中文网（原TMchina）

标题: 如何开发一个油猴(TamperMonkey)脚本入门教程 [打印本页]
作者: 疯子先生    时间: 2019-12-10 08:45
标题: 如何开发一个油猴(TamperMonkey)脚本入门教程
本帖最后由 疯子先生 于 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

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

(, 下载次数: 821)

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

(, 下载次数: 814)

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

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

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

需要说明的是，安装未知的脚本使非常不安全的，这些脚本可以监听网络请求，按键等敏感操作，所以必须安装可信来源的脚本，如果熟悉 JavaScript，可以审阅源代码，检查是否代码中包含敏感操作。

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

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

首先我们可以试试创建一个新的脚本：

(, 下载次数: 623)

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

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

HTML+Javascript+jQuery

想要系统性的学习，可以去 MDN 看看： https://developer.mozilla.org/zh-CN/

修改我们的脚本内容如下：

(, 下载次数: 577)

然后保存，打开任何一个网站都会弹出 'hello world'

(, 下载次数: 573)

这样，你的第一个脚本就已经开发完成了。

接下来，我们可以进阶一下，对百度的 logo 做点变化，每次打开百度都给他显示一只狗狗图片。

通过 Chrome 的审查元素功能，知道这个 logo 是在一个 id 为 lg 的 div 下的，我们只要替换这个 div 或者里面的 img 的 src 属性值即可，这里粗暴的替换 div 的内容就行。

(, 下载次数: 592)

修改我们的脚本内容如下：

(, 下载次数: 570)

脚本意思是查找 div id 为 lg 的元素，如果找到了，就将 html 内容重新替换为新的 img 标签，img 的图片路径为我们自定义的图片路径。

保存后我们再次打开百度：

(, 下载次数: 559)

发现百度的 logo 已经被替换了，不过，是在百度 logo 加载完成后才替换的，那么有什么办法一开始让他就加载狗狗图片呢，我们试试利用 DOMContentLoaded 事件。

  1. window.addEventListener("DOMContentLoaded", function(){
  2.     // 君の代码。
  3. }, false);
复制代码


结果是，事件不执行了，早期很多人写的脚本都是利用 DOMContentLoaded ，不过现在不行了，不知道是不是油猴升级了导致的，这本也算是个不安全的隐患吧。

接下来说说如何调试我们写的脚本，很简单，早期我为开发企业级应用的时候针对的都是IE6~8浏览器，可没有像 Chrome 这么强大的调试工具，都是用的 debugger 设置断点，然后附加到 Visual Studio 中去调试，这里我们也可以用 debugger，然后打开 Chrome 控制台。

不过还有个问题就是脚本有时候会执行多次，这个比较烦。只能借助 jQuery 的文档就绪函数来判断了。

  1. // ==UserScript==
  2. // @name         第一个脚本
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  try to take over the world!
  6. // @author       You
  7. // @include      *
  8. // @require      http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
  9. // @grant        unsafeWindow
  10. // ==/UserScript==
  11. jQuery.noConflict();
  12. (function( $ ) {
  13.     debugger;
  14.     var a=12;
  15.     var b=45;
  16.     var c = a+b;
  17.     var d = a-b;
  18. })( jQuery );
复制代码


在上面的代码中，我们也加入了 debugger，再次保存，打开浏览器：

(, 下载次数: 863)

接下来 F10 和 F11 进行调试了，在右侧 Local 窗口能看到执行变量值。

(, 下载次数: 649)

OK，至此，关于如何开始开发油猴脚本就说完了，期待大家为油猴脚本资源多做贡献 ！
作者: Suntime    时间: 2021-1-16 18:09
学习了，已经写出第一个脚本



欢迎光临 TamperMonkey油猴/暴力猴浏览器脚本插件中文网（原TMchina） (https://tampermonkey.cn/) Powered by Discuz! X3.3