油猴脚本Tampermonkey自动填写网页表单 减轻CloudCone刷鸡的鼠标操作
CloudCone支持在开机后的短时间内自助删鸡, 根据使用的小时数, 按比例扣钱.
那么就可以在CloudCone上面开新机，测试IP是否被墙, 如果已经被墙就马上销毁; 这样不断地开机, 删鸡, 去寻找可用的不被墙的IP, 或者说符合你的某种要求的IP。
这样就会遇到一个问题, 每次到这个开机页面都要选择PERIOD, 选择操作系统, 填写Hostname. 如果想节省一些鼠标点击的话, 可以用油猴脚本 Tampermonkey.
安装Chrome插件
地址
https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo
打开目标页面
比如，https://1ladder.eu.org/cc1680
添加新脚本
看到你要处理的页面, 点击插件按钮, 添加新脚本.
编辑脚本
你要明白，你要写的脚本就是写在 // Your code here... 的下面。
脚本的语法是 JavaScript.
我们可以用脚本去操作页面元素, 填写网页表单.
分析页面元素
看到你要处理的页面, 右键菜单, 查看网页源代码.
处理 PERIOD 下拉框
观察目标网页，要处理的下拉框上面有“PERIOD”这个单词，下面有“Save upto 15% by paying yearly”这几个单词。
请注意 这段 select 的 id="contract" ,
如果我们想让脚本帮我们选择 Every 3 months 这个option, 请注意这个option 的 value="Q"
所以脚本写成这样：
var contractField = document.getElementById("contract");contractField.value="Q";
处理 操作系统 单选项
切到网页源代码页面，搜索一下“Debian”，可以看到下面这一段。我们关注的是 Debian 11 所在的这一段 <input>...</input>
我们再看一下这一系列的 radio, 从页面上看 Debian 11 排在第6个.
从源码上看, 它也是排第6名.
如果我们想让脚本帮我们选择 Debian 11 这个 radio, 那么脚本写成这样:
var systemRadios = document.getElementsByName('os');systemRadios[5].checked = true;
JavaScript语法中, 按 name 去获取页面元素, 得到的是一排有顺序的数据, 也叫数组/Array.
数组的编号/索引/Index是从0开始的, 我们想操作第6项被选中, 对应的索引为5.
处理 Hostname 文本框
切到网页源代码页面，搜索一下“Hostname”，可以看到下面这一段。我们关注的是这个 <input type="text" ...>
可以看到它没有 id, 只有 name="hostname". 所以我们不能用前面的getElementById方法获取唯一的界面元素, 只能用getElementsByName方法获取一个数组. 只是刚好这个数组只含有一个元素/element.
如果我们想让脚本帮我们设置这个文本框的内容, 那么脚本写成这样:
var hostnameField = document.getElementsByName("hostname")[0];hostnameField.value="balabalabala";
当然这里的balabalabala你想写成什么都可以.
告一段落!
到目前为止, 你的油猴脚本应该是这个样子
其中, 你编写的部分为:
var contractField = document.getElementById("contract");contractField.value="Q";var systemRadios = document.getElementsByName('os');systemRadios[5].checked = true;var hostnameField = document.getElementsByName("hostname")[0];hostnameField.value="balabalabala";
用菜单保存, 或者快捷键 Ctrl+S
切换到目标页面, 刷新页面.
可以看到油猴脚本插件下标有一个数字 1, 表示有 1 个脚本在此页面上运行. 当然就是我们刚刚编写的那个脚本了.
这时你可以看到页面上除了 Hostname 被脚本填充了以外, PERIOD, 操作系统都没有改变.
但如果你这时点击部署的按钮.
你会发现创建出来的VPS, 操作系统 和 计费周期 并不是页面上显示的那样, 而是按脚本设定的参数.
可以说我们达到了目的, 用脚本帮我们设定了参数, 节约了鼠标操作.
但如果我们多问一个问题,
怎么让页面显示为脚本设定的参数
一般来说简单设计的网页不会出现Cloudcone这样的现象, 脚本设置的参数就会在页面上显示.
以下为Cloudcone这个页面的特例.
我们在源码页面的最末尾, 可以看到从这里开头的一大段 <script> ...
这里面的逻辑就不一一解释了. 大致上说,
1. 这一大段是用于刷新页面显示的.
2. calculate() 是这一大段的名字. 是这一大段 函数/Function的名字.
那么我们在油猴脚本(Javascript)中, 就这样子调用函数:
calculate();
好了, 我们的油猴脚本成了下面这样.
保存一下, 然后在目标页面刷新.
可以看到, 除了 PERIOD 显示不符合我们的预期, 页面的其它部分有更新.
更进一步,
让脚本帮我们点击 部署 按钮
切到网页源代码页面，搜索一下“Deploy Server”，可以看到下面这一段。
<a class="btn btn-fill btn-block btn-magnify btn-danger btn-lg deploy-server-btn" id="deploy-form-btn"><div class='uil-reload-css reload-small hidden' style=''><div></div></div> <i class="ti-cloud-up"></i> <span class="deploy-server-btn-text">Deploy Server</span></a>
注意这一段的 id 是 deploy-form-btn
如果我们想让脚本帮我们点击这个页面元素, 那么脚本写成这样:
var deployBtn = document.getElementById('deploy-form-btn');deployBtn.click();
大结局!
到目前为止, 你的油猴脚本应该是这个样子
其中, 你编写的部分为:
var contractField = document.getElementById("contract");
contractField.value="Q";
var systemRadios = document.getElementsByName('os');
systemRadios[5].checked = true;
var hostnameField = document.getElementsByName("hostname")[0];
hostnameField.value="balabalabala";var deployBtn = document.getElementById('deploy-form-btn');deployBtn.click();
评论
发表评论