1、背景

经常会遇到类似下面的这种网站，查个信息得填一堆信息，奇葩的是文本框也不让复制粘贴，而且浏览器还不自动保存，这样每次查询或者超时退出都得重新手动填写一遍。

有没有办法能简化这个过程呢？

办法当然是有的，其中最通用的办法是装个 lastpass 扩展，由它帮你完成表单信息的自动保存与填充，信息也会云存储在他们服务器上，还是挺方便的。

但是如果你担心隐私安全或者想要更加个性化的功能怎么办？一般来说这个时候需要用户自定义脚本来实现了。

2、tampermonkey 简介

Chrome是原生支持加载UserScripts的，只不过它的加载方式是将UserScripts文件转换为一个扩展…… 开发起来略麻烦，不过好处就是稳定可靠。不过这个方案在这里就比较重量级了，不够方便。所以我决定用TamperMonkey来做这件事儿。安利一下TamperMonkey扩展，这个相当于Firefox上的Scriptish或GreaseMonkey扩展，相当于一个UserScripts的管理和加载器。挺好使的一个玩意儿，作者貌似是位棒子国的同胞，只不过这货对Chrome的性能影响还是蛮大的。

3、用 tampermonkey 实现自动化交互

首先你需要安装好 Chrome 以及 tampermonkey 插件，然后在你需要自动交互的网站上点击扩展图标，这样你就可以开始写你的交互逻辑代码了：

上面是一个很通用的模板，如果你看不懂的话也许需要去看下UserScripts的格式…… 这里先把 @name 和 @match 改掉，一个是名字，一个是匹配的网址。名字随便取，@match 改为 http://www.ooxx.com/*。然后在最下面开始写代码。

比如文初开头的完整代码如下：

// ==UserScript==
// @name         ooxx网站
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://www.ooxx.com/wsyw/wscx/gjjcx-logineoor.jsp?id=2
// @grant        none
// ==/UserScript==
/* jshint -W097 */
'use strict';

// Your code here...


(function () {
    document.getElementsByTagName("option")[1].selected = true;
    document.form1.bh.value = "ID:NO";
    document.form1.mm.value = "passwd";

    //function post(path, params, method) {
    //  method = method || "post"; // Set method to post by default if not specified.
    //
    //  // The rest of this code assumes you are not using a library.
    //  // It can be made less wordy if you use one.
    //  var form = document.createElement("form");
    //
    //  form.setAttribute("method", method);
    //  form.setAttribute("action", path);
    //
    //  for (var key in params) {
    //      if (params.hasOwnProperty(key)) {
    //          var hiddenField = document.createElement("input");
    //          //hiddenField.setAttribute("type", "hidden");
    //          hiddenField.setAttribute("name", key);
    //          hiddenField.setAttribute("value", params[key]);
    //
    //          form.appendChild(hiddenField);
    //      }
    //  }
    //
    //  var iframe = document.createElement("iframe");
    //  //document.body.appendChild(iframe);
    //  //document.querySelector("iframe").contentWindow.document.childNodes[0].appendChild(form);
    //  //form.submit();
    //
    //}
    //
    //post('http://lab.ocrking.com/do.html', {
    //  url : 'http://www.ooxx.com/wsyw/servlet/PicCheckCode1',
    //  service : 'OcrKingForCaptcha',
    //  language : "eng",
    //  charset : "7",
    //  outputFormat : "",
    //  email : ""
    //});
})();

这样当你每次打开 http://www.ooxx.com/wsyw/wscx/gjjcx-logineoor.jsp?id=2 时，下拉列表会被选择好，同时各个表单域的值也会填写成预设值，如果验证码也破解成功则可以直接模拟点击事件提交表单，文章开头提到的繁琐流程至此一气呵成十分方便！

关于最后一个验证码的破解有两种思路：

利用Canvas进行验证码识别，属于纯 js 破解，需要针对性的分析验证码的色彩与位置分布特点等，兼容性不好
利用云服务来破解，不过这种需要注意 Ajax 跨域问题，推荐使用 js 构造iframe，然后嵌套 form 表单提交 post 的方式来请求服务

这两点思路可以参考文末的 Refer 链接。

4、个性化需求：目标页自动输入百度网盘密码

我们应该经常能遇到上面的 case，每次都要打开链接，然后再返回回来复制密码，再切到下一页面，再粘贴回车，太繁琐啦。

咱们可以看看在 tampermonkey 中如何将这几个交互步骤自动化。

4.1 给跳转 url 带上尾巴

要想在下一页还能拿到上一页密码，只有两种办法，一种是 url 传参，另一种是 Cookie 传递。

这里咱们优先选择 url 传参的方式，基本意思就是找出所有指向百度网盘、360云盘的A标签，然后尝试在A标签后面的文本或A标签当前上级节点里搜索提取码，一旦找到的话，就将其以Hash的方式附加到链接中。

4.2 提取密码并模拟点击

从上一步中的 URL Hash 中截取密码并赋值给密码框，最后模拟点击事件即可。

代码最终如下：

// ==UserScript==
// @name         zdfans
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://www.zdfans.com/*
// @grant        none
// ==/UserScript==
/* jshint -W097 */
'use strict';

// Your code here...
// 4.1
document.querySelectorAll("a[href*='pan.baidu.com'], a[href*='yunpan.cn']").forEach(
    function(link){
        var txt=link.nextSibling&&link.nextSibling.nodeValue; 
        var code=/码.*?([a-zd]{4})/i.exec(txt)&&RegExp.$1;
        if(!code){
            txt=link.parentNode.innerText;
            code=/码.*?([a-zd]{4})/i.exec(txt)&&RegExp.$1;
        }
        if(code){ 
            var href=link.getAttribute("href");
            link.setAttribute("href", href+"#"+code);
        }
    }
);


// 4.2
var pathname=self.location.pathname;

!function(){
    if(pathname.indexOf("/share/")!==-1&&document.getElementById("accessCode")){
        var code=self.location.hash.slice(1,5);
        if(/[a-zd]{4}/i.exec(code)){
            document.getElementById("accessCode").value=code;
            document.getElementById("submitBtn").click();
        }}
}();