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

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