2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

1、背景

經(jīng)常會(huì)遇到類似下面的這種網(wǎng)站，查個(gè)信息得填一堆信息，奇葩的是文本框也不讓復(fù)制粘貼，而且瀏覽器還不自動(dòng)保存，這樣每次查詢或者超時(shí)退出都得重新手動(dòng)填寫一遍。

有沒有辦法能簡(jiǎn)化這個(gè)過程呢？

辦法當(dāng)然是有的，其中最通用的辦法是裝個(gè) lastpass 擴(kuò)展，由它幫你完成表單信息的自動(dòng)保存與填充，信息也會(huì)云存儲(chǔ)在他們服務(wù)器上，還是挺方便的。

但是如果你擔(dān)心隱私安全或者想要更加個(gè)性化的功能怎么辦？一般來說這個(gè)時(shí)候需要用戶自定義腳本來實(shí)現(xiàn)了。

2、tampermonkey 簡(jiǎn)介

Chrome是原生支持加載UserScripts的，只不過它的加載方式是將UserScripts文件轉(zhuǎn)換為一個(gè)擴(kuò)展…… 開發(fā)起來略麻煩，不過好處就是穩(wěn)定可靠。不過這個(gè)方案在這里就比較重量級(jí)了，不夠方便。 所以我決定用TamperMonkey來做這件事兒。 安利一下TamperMonkey擴(kuò)展，這個(gè)相當(dāng)于Firefox上的Scriptish或GreaseMonkey擴(kuò)展，相當(dāng)于一個(gè)UserScripts的管理和加載器。挺好使的一個(gè)玩意兒，作者貌似是位棒子國(guó)的同胞，只不過這貨對(duì)Chrome的性能影響還是蠻大的。

3、用?tampermonkey 實(shí)現(xiàn)自動(dòng)化交互

首先你需要安裝好 Chrome 以及?tampermonkey 插件，然后在你需要自動(dòng)交互的網(wǎng)站上點(diǎn)擊擴(kuò)展圖標(biāo)，這樣你就可以開始寫你的交互邏輯代碼了：

上面是一個(gè)很通用的模板，如果你看不懂的話也許需要去看下UserScripts的格式…… 這里先把?@name ?和?@match ?改掉，一個(gè)是名字，一個(gè)是匹配的網(wǎng)址。名字隨便取，@match ?改為?http://www.ooxx.com/*。 然后在最下面開始寫代碼。

比如文初開頭的完整代碼如下：

//?==UserScript== //?@name?????????ooxx網(wǎng)站 //?@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?:?""//}); })();

這樣當(dāng)你每次打開?http://www.ooxx.com/wsyw/wscx/gjjcx-logineoor.jsp?id=2?時(shí)，下拉列表會(huì)被選擇好，同時(shí)各個(gè)表單域的值也會(huì)填寫成預(yù)設(shè)值，如果驗(yàn)證碼也破解成功則可以直接模擬點(diǎn)擊事件提交表單，文章開頭提到的繁瑣流程至此一氣呵成十分方便！

關(guān)于最后一個(gè)驗(yàn)證碼的破解有兩種思路：

• 利用Canvas進(jìn)行驗(yàn)證碼識(shí)別，屬于純 js 破解，需要針對(duì)性的分析驗(yàn)證碼的色彩與位置分布特點(diǎn)等，兼容性不好

• 利用云服務(wù)來破解，不過這種需要注意 Ajax 跨域問題，推薦使用 js 構(gòu)造iframe，然后嵌套 form 表單提交 post 的方式來請(qǐng)求服務(wù)
  

這兩點(diǎn)思路可以參考文末的 Refer 鏈接。

4、個(gè)性化需求：目標(biāo)頁自動(dòng)輸入百度網(wǎng)盤密碼

我們應(yīng)該經(jīng)常能遇到上面的 case，每次都要打開鏈接，然后再返回回來復(fù)制密碼，再切到下一頁面，再粘貼回車，太繁瑣啦。

咱們可以看看在?tampermonkey 中如何將這幾個(gè)交互步驟自動(dòng)化。

4.1 給跳轉(zhuǎn) url 帶上尾巴

要想在下一頁還能拿到上一頁密碼，只有兩種辦法，一種是 url 傳參，另一種是 Cookie 傳遞。

這里咱們優(yōu)先選擇 url 傳參的方式，基本意思就是找出所有指向百度網(wǎng)盤、360云盤的A標(biāo)簽，然后嘗試在A標(biāo)簽后面的文本或A標(biāo)簽當(dāng)前上級(jí)節(jié)點(diǎn)里搜索提取碼，一旦找到的話，就將其以Hash的方式附加到鏈接中。

4.2 提取密碼并模擬點(diǎn)擊

從上一步中的 URL Hash 中截取密碼并賦值給密碼框，最后模擬點(diǎn)擊事件即可。

代碼最終如下：

//?==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。所以一般在常去的資源站上用用就好了，沒必要把腳本跑到每個(gè)網(wǎng)站上，畢竟那是極浪費(fèi)性能的事兒~

上面我只匹配了zdfans網(wǎng)站，但其實(shí)只要改@match ，這段腳本可以匹配大多數(shù)使用網(wǎng)盤共享的網(wǎng)站。

最后感謝?木魚?童鞋提供的思路與分享，其實(shí)引申開來，TamperMonkey?用于一些自動(dòng)化交互測(cè)試以及一些什么秒殺活動(dòng)自動(dòng)輸入等場(chǎng)合也是極好的，就看大家怎么拿著錘子滿世界找釘子了~ :)

Refer：

[1]?技術(shù)貼：使用UserScript自動(dòng)通過百度網(wǎng)盤/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進(jìn)行驗(yàn)證碼識(shí)別

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

[4]?JS破解烏云驗(yàn)證碼

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

[5] OCR 在線識(shí)別驗(yàn)證碼

http://lab.ocrking.com/

[6]?UserScript：自動(dòng)提取XClient上的下載鏈和提取碼

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

轉(zhuǎn)載于:https://my.oschina.net/leejun2005/blog/636155

總結(jié)

以上是生活随笔為你收集整理的Chrome 自动化交互利器：用 tampermonkey 向页面注入自定义 Javascript的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。