编写一个自动点击的油猴脚本 |
您所在的位置：网站首页 › 编写浏览器脚本怎么写出来 › 编写一个自动点击的油猴脚本 |
编写一个自动点击的油猴脚本
|
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 = `${message} `; $(".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 = `${res.message} `; $(".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 = `${res.message}`; $(".signin").html(sign_html); $(".signin").attr("disabled","true"); //签过到后禁用按钮。 $(".signin").addClass("signin_over").removeClass('sign'); } } }); })(); 5. 发布自己的脚本接下来就是最后一步了，那就是发布自己的脚本到GreasyFork (油叉)了。首先在油叉上登录。 在个人中心里面发布自己的脚本，但是这里新用户是不能发布脚本的，可以先上传到GitHub上面，等几天再发布。 GreasyFork-Scripts |
【本文地址】
今日新闻 |
推荐新闻 |