油猴脚本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”这几个单词。

切到网页源代码页面，搜索一下“PERIOD”，可以看到下面这一段。我们关注的就是中间夹着这一段<select>...</select>

请注意 这段 select 的 id="contract" , 

如果我们想让脚本帮我们选择 Every 3 months 这个option, 请注意这个option 的 value="Q"

所以脚本写成这样：

var contractField = document.getElementById("contract");

contractField.value="Q";

处理 操作系统 单选项

切到网页源代码页面，搜索一下“Debian”，可以看到下面这一段。我们关注的是 Debian 11 所在的这一段 <input>...</input>

请注意这一段的 name="os", 而且可以看到它的上面, 下面, 都有其它的 <input type="radio" name="os" ...> 结构.

我们再看一下这一系列的 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();

 用菜单保存, 或者快捷键 Ctrl+S

切换到创建VPS页面, 刷新页面.

你会发现, 页面一加载完, 瞬间就进入等待系统完成VPS设置的界面了.

而且参数是按脚本设置的.

========

完