油猴脚本编写教程

油猴脚本(Tampermonkey)是一个非常流行的浏览器扩展,它可以运行由广大社区编写的扩展脚本,来实现各式各样的功能,常见的去广告、修改样式文件、甚至是下载视频。今天我们就来看看如何编写自己的油猴脚本。当然为了运行油猴脚本,你应该在浏览器中安装油猴插件。

安装油猴插件

安装油猴插件非常简单,直接在浏览器的扩展商店中安装即可。国产浏览器的话一般可以通过下载扩展文件手动拖动的方式来安装。下图是微软新版Edge浏览器的扩展商店,直接搜索Tampermonkey即可。

新版Edge扩展商店

新建脚本

首先在浏览器右上角找到并点击油猴插件,选择添加新脚本。
添加新脚本

然后就会打开如图所示的编辑器窗口,我们就可以在其中编辑自己的脚本文件了。如果你喜欢的话,还可以将脚本内容复制到合适的编辑器中编辑,完成之后再复制回来。

编辑脚本文件

如果你点击开发者菜单的话,可以选择ES6模板,然后就可以在脚本中使用新版JavaScript的特性了,它会有Babel转译回ES5。不过这个模板貌似有点问题,用了它就没办法使用代码纠错功能了。所以这里我还是选择了默认的ES5模板。

脚本编写方法

功能注释

首先来看看脚本的内容,上面是一大排注释,这些注释可以非常有用的,它表明了脚本的各个属性。下面来简单介绍一下。

属性名 作用
name 油猴脚本的名字
namespace 命名空间,类似于Java的包名,用来区分相同名称的脚本,一般写成作者名字或者网址就可以了
version 脚本版本,油猴脚本的更新会读取这个版本号
description 描述,用来告诉用户这个脚本是干什么用的
author 作者名字
match 只有匹配的网址才会执行对应的脚本,例如*http://*http://www.baidu.com/*等,参见谷歌开发者文档
grant 指定脚本运行所需权限,如果脚本拥有相应的权限,就可以调用油猴扩展提供的API与浏览器进行交互。如果设置为none的话,则不使用沙箱环境,脚本会直接运行在网页的环境中,这时候无法使用大部分油猴扩展的API。如果不指定的话,油猴会默认添加几个最常用的API
require 如果脚本依赖其他js库的话,可以使用require指令,在运行脚本之前先加载其他库,常见用法是加载jquery
connect 当用户使用GM_xmlhttpRequest请求远程数据的时候,需要使用connect指定允许访问的域名,支持域名、子域名、IP地址以及*通配符
updateURL 脚本更新网址,当油猴扩展检查更新的时候,会尝试从这个网址下载脚本,然后比对版本号确认是否更新

脚本权限

下面简单介绍一下grant指令那里可以填写的一些权限,详情请查看油猴脚本文档。这里就简单介绍几个常用的,可以调用的函数全部以GM_作为开头。

权限名 功能
unsafeWindow 允许脚本可以完整访问原始页面,包括原始页面的脚本和变量。
GM_getValue(name,defaultValue) 从油猴扩展的存储中访问数据。可以设置默认值,在没成功获取到数据的时候当做初始值。如果保存的是日期等类型的话,取出来的数据会变成文本,需要自己转换一下。
GM_setValue(name,value) 将数据保存到存储中
GM_xmlhttpRequest(details) 异步访问网页数据的API,这个方法比较复杂,有大量参数和回调,详情请参考官方文档。
GM_setClipboard(data, info) 将数据复制到剪贴板中,第一个参数是要复制的数据,第二个参数是MIME类型,用于指定复制的数据类型。
GM_log(message) 将日志打印到控制台中,可以使用F12开发者工具查看。
GM_addStyle(css) 像网页中添加自己的样式表。
GM_notification(details, ondone), GM_notification(text, title, image, onclick) 设置网页通知,请参考文档获取用法。
GM_openInTab(url, loadInBackground) 在浏览器中打开网页,可以设置是否在后台打开等几个选项

还有一些API没有介绍,请大家直接查看官方文档吧。

编写脚本

编写脚本就很简单了,编写到// Your code here ..那里即可。可以编写函数,然后在最后调用这几个函数,这样的模块化编写方法写出来的脚本比较容易维护。

等vagrant更新时候提醒我的脚本

前段时间了解了vagrant这个东西,感觉很有意思,准备研究一下,但是照着官网教程运行的时候,第一步就发生了错误。我上网一搜,原来我更新的virtualbox比较新,vagrant恰好不支持。但是如今几个月过去了,vagrant还是没有更新,所以我要写一个脚本,等到vagrant更新的时候,给我网页上弹出一个对话框。

首先访问vagrant官网,然后就可以看到中间下载按钮上大大的版本号2.2.6了。因为版本肯定是不会倒退的,所以只要判断一下版本号不是2.2.6,就可以弹出提示了。通过F12开发者工具可以看到,这三个按钮其实都是链接,只不过显示成了按钮的样子,而且他们恰好都位于header标签之中。如果如果可以的话,直接用选择器就可以非常轻松的获取到版本号。

vagrant官网

为了能在更新的时候及时获取到提示,我需要脚本在所有网站上生效,来检测版本。但是这样做会导致另外一个问题,那就是每次打开一个网页都会运行一次检查vagrant的脚本,而这是完全不必要的。所以需要一个额外的判断,这就需要利用油猴提供的API来保存当前日期,只有每天第一次的时候才会执行检查代码。本来我想的很复杂,需要一个日期变量,然后还要额外一个变量保存是否是今天第一次更新。后来我发现我想的太多了,做法其实很简单。每天先获取一次日期,然后和事先保存的日期比较,如果不一样的话才执行脚本,并将日期设置为今天的日期;如果日期一样的话无事发生。

最后一个问题就是如何来判断版本号,有两种方法:第一种就是上面提到的,直接解析HTML代码并找到版本号;第二种是更直接的办法, 因为vagrant也是Github上开源的项目,所以可以直接调用Github的API来获取最新发布的版本号。可惜的是,第二种办法我试了一下居然不成功,不知为何,没办法获取到发布信息,但是换成其他项目就可以。所以最后没办法只好采用第一种办法。有兴趣的同学可以自己试一下第二种方法。

好了,所有相关的坑我都已经解释完毕了,相信大家应该很容易就可以看懂下面的代码,我就不介绍了。虽然看着简单,但是我其实还是踩了不少的坑,就这点代码花了我好几天的时间。而且确实这个代码写的也并不是很好,因为ajax取回来的代码是完整一个html页面,貌似用原版DOM API没办法解析,最后只好用jQuery的parseHTML方法解析的。而且我还因为原生方法和jQuery之间的方法名搞混了,浪费了很多时间。

// ==UserScript==
// @name         remind_me_vagrant_update
// @namespace    https://github.com/techstay/myscripts
// @version      0.1
// @description  remind me if vagrant support virtualbox
// @author       techstay
// @match        *
// @require      https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js
// @connect vagrantup.com
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_setClipboard
// @grant GM_log
// @grant GM_xmlhttpRequest
// @grant unsafeWindow
// @grant window.close
// @grant window.focus
// ==/UserScript==

(function () {
   
    'use strict';

    const CHECKED_DATE = 'checkedDate';

    function checkDateEquals(a, b) {
   
        return a.getFullYear() === b.getFullYear() &&
            a.getMonth() === b.getMonth() 
  • 142
    点赞
  • 529
    收藏
    觉得还不错? 一键收藏
  • 35
    评论
油猴脚本可以通过监听页面中的 Ajax 请求来实现监控。具体方法如下: 1. 使用 GM_xmlhttpRequest 函数来发起 Ajax 请求,这样可以捕获到请求的过程和结果。 2. 使用 @run-at document-end 指令来确保脚本在页面加载完成后执行,这样才能获取到页面中的 Ajax 请求。 3. 在 GM_xmlhttpRequest 函数中添加 onreadystatechange 事件监听器,用来监听 Ajax 请求的状态变化。 4. 在事件监听器中判断请求的状态和响应内容,如果满足某些条件,就可以触发相应的操作,比如弹出提示框或者发送通知等。 下面是一个简单的示例,演示了如何使用油猴脚本来监控页面中的 Ajax 请求: ```javascript // ==UserScript== // @name Ajax Monitor // @namespace http://tampermonkey.net/ // @version 1.0 // @description Monitor Ajax requests on the page // @author Your name // @match https://example.com/* // @grant GM_xmlhttpRequest // @run-at document-end // ==/UserScript== (function() { 'use strict'; // Add an event listener to monitor Ajax requests GM_xmlhttpRequest({ method: "GET", url: "https://example.com/api", onload: function(response) { console.log(response.responseText); }, onerror: function(response) { console.error(response.statusText); }, onreadystatechange: function(response) { if (response.readyState == 4 && response.status == 200) { console.log(response.responseText); } } }); })(); ``` 在这个示例中,我们使用 GM_xmlhttpRequest 函数发起了一个 GET 请求,同时添加了 onload、onerror 和 onreadystatechange 事件监听器。当请求成功返回时,会在控制台中输出响应内容;当请求失败时,会输出错误信息;当请求状态变化时,会输出响应内容。你可以根据实际需求来修改这个示例,比如改变请求的方法和地址,或者添加其它的事件监听器。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 35
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值