Chrome浏览器 - 抢票插件的制作与插件工具(上)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/KingWTD/article/details/54425903

关于Chrome浏览器插件的博客有很多,它的应用场景也很多。一般来讲,Chrome浏览器插件分为三大类:ContentScript、Background和Popup,今天来说一下我们都比较关注的一个插件——12306抢票插件,它使用的是ContentScript方式。虽然有很多的抢票插件,但这个12306抢票插件在这里仅为作为学术研究与分享。

官网12306已经为我们做了一个订票助手,在这里可以提前填好车次、乘车人和席别等信息,然后等到放票时间时开始抢票。但其中有些美中不足,当我们抢票失败时,再回到订票页面时,这些信息都丢失了, 不幸的是那时还处理抢票高峰期,再取得那些信息时,12306服务器处于繁忙状态,导致获取信息失败或者长时间处于服务器请求状态。这时我们需要一个本地存储这些信息的方式来解决这个问题,另外还需要突破5秒刷票和不可随机切换车次的限制。下面我们带着这些问题,看如何制作出符合需求的Chrome浏览器插件。

注:阅读以下内容前需要对Chrome浏览器插件有认识或了解,因为在这里看到的Chrome浏览器插件格式跟传统的不一样,是我在传统的基础上添加了一些扩展,以及others目录处理及Ajax请求等,都需要借助Chromex工具。

创建目录和配置文件

1、分别创建如下目录:
css,imgs,js,others(用于存放前三者之外的文件)
2、创建manifest.json,配置如下(格式是固定的):

{
    "manifest_version": 2,
    "name": "HawkEyes Plugin",
    "version": "2.1.0",
    "description": "Grab tickets plugin.",
    "icons": {
        "64": "icon.png"
    },
    "permissions": [
        "tabs",
        "bookmarks",
        "http://*/*",
        "https://*/*"
    ],
    "content_scripts": [{
        "matches": ["https://kyfw.12306.cn/otn/leftTicket/*"],
        "imgs": ["imgs/handler.*"],
        "css": ["css/handler.css"],
        "js": ["js/handler.js"],
        "others": ["others/handler.*"]
    }]
}

创建插件的操作界面

分别创建handler.css和handler.html,分别存放于css和others目录下。操作上基本与订票助手的选项相同,作成操作界面时,可以引用12306官网的样式与jquery.js,使作成的界面风格与其一致。作成的界面下图:

PluginThumb

PluginFull

注:点击风火轮(卍)可以显示不同的操作界面,另外无穷大(∞)用来显示距离设定时间300秒的倒计时时间。
-同步缓存数据:将表单(包括席别、车站、乘车人)中的数据同步到服务器上去
-同步页面数据:将车票预订的表单中的数据同步到插件的表单中
-应用表单数据:将插件表单中的数据应用到车票预订的表单中去

实现插件界面的操作

既然12306官网上引用了jquery.js,那我们就直接利用这个利器,实现抢票插件的界面上的操作功能。
在这里,有三类数据需要存储,那怎么去取得数据源呢?如下:
席别:通过页面中的$(“#seat-list li”)中的“name”和“scode”取得
车站:通过页面中的“station_names”的全局变量取得,其中区域是以“@”区分的,车站是以“|”区分的
乘客:通过Ajax向“/otn/confirmPassenger/getPassengerDTOs”发送请求取得,但必须要处于登录状态

为了减少代码量,插件的界面采用Ajax请求取得,handler.js的结构如下:

;(function() {
    window.seatNames = {};
    window.seatCodes = {};
    window.stationNames = {};
    window.passengerNames = {};

    $.ajax({
        url: "chromex://webapps/app_id/others/handler.html",
        type: "GET",
        dataType: "html",
        success: function(response) {
            var view = response.match(/<body[^>]*>([\s\S]*)<\/body>/i)[1];
            $(document.body).append(view);
            initHandlerCallback();
            getHandlerParameters();
        },
        error: function() {
            alert("ERROR: 取得插件页面视图失败");
        }
    });

    function initHandlerCallback() {
        initStartTimeListener();
        // TODO
    }

    function initStartTimeListener() {
        // TODO
    }

    function getHandlerParameters() {
        // TODO
    }   
})();

解决开篇提出的三个问题:

1、本地存储服务器的数据
可以使用Ajax请求,将数据存储在handler.properties文件中,使用handler.jsp来完成我们的数据读写操作。这样数据就不会丢失了,而且读写的速度比官网服务器更快。
2、突破间隔5秒刷票的限制
官网是用“autoSearchTime”这个全局变更定义的刷票时间间隔的,可以在handler.js中来改变这个值的大小。(但是时间设置太短时,你的请求会被拒绝访问的,貌似此项设置没什么用!)
3、随机切换备选车次顺序
官网是用“ccSelected”这个全局变量来定义选择的车次的,可以在handler.js中来改变这个变量的值。

装载插件到Chrome扩展程序中

以上作成的插件并不能成功安装到Chrome扩展程序中,需要借助Chromex工具进行补丁操作后才可安装。由于12306官网使用的是HTTPS协议,打补丁时请选择HTTPS协议,更多详见Chromex工具介绍(下篇)。
打补丁成功后,将生成的补丁目录装载到Chrome的扩展程序中,成功安装插件显示如图:
Plugin

在12306官网上使用抢票插件

1、运行前点击Chromex工具目录下的[runjsp.bat],启动Chromex工具。(注:首次运行需登录12306认证,同步缓存数据)
2、在Chrome浏览器中打开12306的车票预订页面,在右上角可以看到一个风火轮(卍),然后就可以开始抢票啦!(注:如果https请求被拦截,请打开一个被拦截的文件,继续访问后刷新页面即可)

展开阅读全文

没有更多推荐了,返回首页