专栏首页数据之美Chrome 自动化交互利器:用 tampermonkey 向页面注入自定义 Javascript

Chrome 自动化交互利器:用 tampermonkey 向页面注入自定义 Javascript

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-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/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Eclipse 下找不到或无法加载主类的解决办法

    有时候 Eclipse 会发神经,好端端的 project 就这么编译不了了,连 Hello World 都会报“找不到或无法加载主类(Exception in...

    用户1177713
  • Spark 学习资源收集【Updating】

    (一)spark 相关安装部署、开发环境 1、Spark 伪分布式 & 全分布式 安装指南 http://my.oschina.net/leejun2005...

    用户1177713
  • java 中 16 进制 HEX 转换成字节码形式的 UTF-8

    恩,又碰到个蛋疼的编码转换问题了:要把形如 \xE9\xBB 的字符串转成中文。。。 在python中我们直接 print "\xE9\xBB\x84" ...

    用户1177713
  • 【Dev Club分享】JSPatch成长之路

    Dev Club 是一个交流移动开发技术,结交朋友,扩展人脉的社群,成员都是经过审核的移动开发工程师。每周都会举行嘉宾分享,话题讨论等活动。 本期,我们邀请了腾...

    腾讯Bugly
  • 智能手表2020年Q1出货量同比增长12%,Apple Watch欧美市场增长缓慢

    近日市场调研机构Canalys发布最新报告,2020年第一季度全球智能手表出货量达到1430万台,同比增长12%。

    镁客网
  • 安装并配置 CouchDB

    之前写过用 Web Scraper 爬取即刻关注/被关注列表,爬取下来的数没按照顺序排序。有解决的办法,去安装 CouchDB,然后设置一下从此 Web Scr...

    伪君子
  • 对于opencv全面貌的认识和理解

    1、opencv其实最开始只有源码,也就是sources中的代码,sources中有个modules,进入里面是各个我们平常使用的模块,如下图。

    chenjx85
  • 教程 | 手把手教你在本地构建Nervos AppChain全家桶

    本文依据博文教程以及Nervos AppChain官方文档,带你搭建一个Dapp。

    数据派THU
  • Zynq-7000开发环境的搭建一

    Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户、多任务、支持多线程和多CPU的操作系统。它能运行主要的UNIX工...

    FPGA开源工作室
  • PyCharm第一次安装及使用教程

    本文通过图文并茂的形式给大家介绍PyCharm第一次安装及使用教程,分步骤通过实际案例给大家操作演示,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋...

    用户7081581

扫码关注云+社区

领取腾讯云代金券