Chrome 自動化交互利器：用 tampermonkey 向頁面注入自定義 Javascript

一、背景

常常會遇到相似下面的這種網站，查個信息得填一堆信息，奇葩的是文本框也不讓複製粘貼，並且瀏覽器還不自動保存，這樣每次查詢或者超時退出都得從新手動填寫一遍。

有沒有辦法能簡化這個過程呢？

辦法固然是有的，其中最通用的辦法是裝個 lastpass 擴展，由它幫你完成表單信息的自動保存與填充，信息也會雲存儲在他們服務器上，仍是挺方便的。

可是若是你擔憂隱私安全或者想要更加個性化的功能怎麼辦？通常來講這個時候須要用戶自定義腳原本實現了。

二、tampermonkey 簡介

Chrome是原生支持加載UserScripts的，只不過它的加載方式是將UserScripts文件轉換爲一個擴展…… 開發起來略麻煩，不過好處就是穩定可靠。不過這個方案在這裏就比較重量級了，不夠方便。 因此我決定用TamperMonkey來作這件事兒。 安利一下TamperMonkey擴展，這個至關於Firefox上的Scriptish或GreaseMonkey擴展，至關於一個UserScripts的管理和加載器。挺好使的一個玩意兒，做者貌似是位棒子國的同胞，只不過這貨對Chrome的性能影響仍是蠻大的。

三、用 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 連接。

四、個性化需求：目標頁自動輸入百度網盤密碼

咱們應該常常能遇到上面的 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-z\d]{4})/i.exec(txt)&&RegExp.$1;
        if(!code){
            txt=link.parentNode.innerText;
            code=/碼.*?([a-z\d]{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-z\d]{4}/i.exec(code)){
            document.getElementById("accessCode").value=code;
            document.getElementById("submitBtn").click();
        }}
}();

須要說明的是，雖然效果很好很贊，但最大的問題是：須要跑UserScripts。因此通常在常去的資源站上用用就行了，不必把腳本跑到每一個網站上，畢竟那是極浪費性能的事兒~

上面我只匹配了zdfans網站，但其實只要改@match ，這段腳本能夠匹配大多數使用網盤共享的網站。

最後感謝 木魚 童鞋提供的思路與分享，其實引伸開來，TamperMonkey 用於一些自動化交互測試以及一些什麼秒殺活動自動輸入等場合也是極好的，就看你們怎麼拿着錘子滿世界找釘子了~ :)

Refer：

[1] 技術貼：使用UserScript自動經過百度網盤/360雲盤提取碼

http://blog.fishlee.net/2016/03/09/using-contentscripts-to-pass-access-code/

[2] Javascript : get <img> src and set as variable?

http://stackoverflow.com/questions/7882356/javascript-get-img-src-and-set-as-variable

[3] 使用Canvas進行驗證碼識別

http://www.cnblogs.com/ziyunfei/archive/2012/10/05/2710349.html

[4] JS破解烏雲驗證碼

http://zone.wooyun.org/content/18101

[5] OCR 在線識別驗證碼

http://lab.ocrking.com/

[6] UserScript：自動提取XClient上的下載鏈和提取碼

http://blog.fishlee.net/2016/03/18/userscipts-pass-xclient-downloadlink/