likes
comments
collection
share

编写一个自动点击的油猴脚本

作者站长头像
站长
· 阅读数 14

1. 缘起

最近逛学习网站的时候总是会弹出来各种莫名其妙的框框，十分苦恼之下，偶然间注意到了我浏览器右上角的一个神奇的插件，想起来过往种种用油猴刷英文视频的经历，突然想要自己编写一个油猴插件试一试，所以就有了这篇文章。

因为我是边学边做作品，所以肯定会有些地方写得不成熟，这是正常现象，不要大惊小怪，现在进入正题。

这里如何在浏览器里面安装油猴插件，因为太简单，就不多做介绍了。网上相关经验很多。

2. 油猴插件实现原理

油猴的原理，以我目前浅显的了解，就是在特定的玩野，执行特定的、编辑好的js脚本，从而实现包括但不限于去广告、实现自动签到、改变网站的布局等等，各种客户端的功能。由于这种脚本只是在客户端做手脚，所以对于网站运营商来说，几乎不会造成任何影响，所以目前应该也不用担心做这个会被送银手镯的问题。

3. 实现功能分析

目前的目标(要实现的功能)如下

Alpha版:

  • 去掉看雪论坛上面的升级正式会员的弹框(给发不了好文章的兄弟们带来福音)

Beta版:

  • 实现看雪论坛的自动签到

Release 1.0.0版:

实现以上两种功能即可Release。

4. 代码设计

然后就是整篇文章的主题部分了，那就是该怎么写这个脚本。

首先，这个油猴要写的是js的脚本，这就要求开发者要会一点前端的技术。起码得会一点js，对前端有简单了解。

4.1 创建脚本

打开控制面板，点击顶部导航栏最左侧的+号创建自己的脚本。

编写一个自动点击的油猴脚本

编辑器里面就是我们要写脚本的地方了，可以看到这里已经给出了一部分内容，下面是要实现功能得代码部分，上面是脚本的注释部分，油猴的注释会被解析出来，不同的注释代表着不同的含义。

关于这里各个注释的含义，这里借鉴一下，别人的总结。

// ==UserScript==
// @name         这里是你的编写的油猴脚本的名字
// @namespace    这个是命名空间；用来区分名称相同但是作者不同的用户脚本，一般都是写作者的个人网址，没有也可以写你的博客地址
// @version      0.1  这个是版本号
// @description  这个是功能描述，描述你的这个脚本是用来干嘛的
// @author       这个是作者的名字，比如我：mukes
// @match        这个是该脚本匹配的网址，支持通配符匹配
// @include		 这个也是该脚本匹配的网址，支持通配符匹配
// @exclude		 这个和 iclude 配合使用，排除匹配到的网址，优先于 include
// @grant        none 
// ==/UserScript==

借由此，我们可以很容易地写出来自己的文件头

// ==UserScript==
// @name         看雪一键签到
// @namespace    http://lyricpoem.cn/
// @version      Alpha
// @description  实现看雪论坛一键签到，以及去掉看雪的新手顶部弹框。
// @author       Lyr1cP03m
// @match        https://bbs.kanxue.com/
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
})();

4.2 关闭弹框功能实现

接下来就是重中之重了，那就是代码的具体实现。这里我首先要实现的功能是关闭看雪论坛的新人弹框。

这个其实他既然设置了能点击右上角关闭弹框，我们直接抄下来他的关闭的代码就行了，事实证明，这个关闭弹框的功能并不难

// 关闭弹框
$(".temporary_member_box").css("height", "0");

设置该盒子的css height为0px即可。

4.3 实现自动签到

这个本来也挺简单的，我开始写的内容如下。

// 自动签到  (使用改脚本会多访问一次`user-is_signin.htm`这个接口)
$.ajax({url:"user-is_signin.htm", function (code, message) {
    if (code == 1) {  //查询到未签到的处理方式
        $(".signin").click();
        console.log("已一键签到*_*")
    } else if (code == 0) {  // 查询到签过到了的处理方式
        var sign_html = `<p>${message}</p>`;
        $(".signin").html(sign_html);
        $(".signin").addClass("signin_over").removeClass('sign');
    }
}});

我尝试刷新了一下，但是并不起作用，简单看下控制台出现了新的warnings，如下。

编写一个自动点击的油猴脚本

warning内容为

Cross-Origin Read Blocking (CORB) 已屏蔽 MIME 类型为 text/html 的跨域响应 https://www.kanxue.com/。如需了解详情，请参阅 https://www.chromestatus.com/feature/5629709824032768。

这个跨域请求问题油猴有内置的解决方案，解决后的脚本内容如下

GM_xmlhttpRequest({
    method: "GET",
    url: "https://bbs.kanxue.com/user-is_signin.htm",
    onload: function(res) {
        if (res.code == 1) {  //查询到未签到的处理方式
            $(".signin").click();
            console.log("[+]TemperMonkeyMessage 已一键签到*_*")
        } else if (res.code == 0) {  // 查询到签过到了的处理方式
            console.log("[+]TemperMonkeyMessage 已签过到*_*")
            var sign_html = `<p>${res.message}</p>`;
            $(".signin").html(sign_html);
            $(".signin").addClass("signin_over").removeClass('sign');
        }
    }
});

但是问题显然还是没被解决，因为点击效果一直没成。

后来输出一下console.log($(".signin"))明白了。

编写一个自动点击的油猴脚本

原来是这个class对应了两个不同的按钮，油猴脚本这里需要指定要点击的按钮是第几个才行。

还是没解决，应该是油猴脚本的执行时机不对的问题，前端js的各种玄学问题。这里不具体研究了，发现其实直接加一个setTimeout就挺管用的。有可能是各种资源没加载完，不太懂，有懂得师傅可以解释一下。

4.4 Alpha版本的代码

// ==UserScript==
// @name         看雪一键签到
// @namespace    http://lyricpoem.cn/
// @version      Alpha
// @description  实现看雪论坛一键签到，以及去掉看雪的新手顶部弹框。
// @author       Lyr1cP03m
// @match        https://bbs.kanxue.com/
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        GM_xmlhttpRequest
// ==/UserScript==

(function() {
    'use strict';

    // 关闭弹框
    $(".temporary_member_box").css("height", "0");
    // 自动签到  (使用改脚本会多访问一次`user-is_signin.htm`这个接口)
    GM_xmlhttpRequest({
        method: "GET",
        url: "https://bbs.kanxue.com/user-is_signin.htm",
        onload: function(res) {
            res = eval("(" + res.response + ")");
            console.log(res);
            if (res.code == '1') {  //查询到未签到的处理方式
                setTimeout(function() {
                    $(".signin").click();
                }, 1000);
                console.log("[+]TemperMonkeyMessage 已一键签到*_*")
            } else if (res.code == '0') {  // 查询到签过到了的处理方式
                console.log("[+]TemperMonkeyMessage 已签过到*_*")
                var sign_html = `<span>${res.message}</span>`;
                $(".signin").html(sign_html);
                $(".signin").attr("disabled","true");  //签过到后禁用按钮。
                $(".signin").addClass("signin_over").removeClass('sign');
            }
        }
    });
})();

5. 发布自己的脚本

接下来就是最后一步了，那就是发布自己的脚本到GreasyFork (油叉)了。首先在油叉上登录。

编写一个自动点击的油猴脚本

在个人中心里面发布自己的脚本，但是这里新用户是不能发布脚本的，可以先上传到GitHub上面，等几天再发布。

GreasyFork-Scripts

编写一个自动点击的油猴脚本

转载自:https://juejin.cn/post/7234817882902200379
评论
请登录