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

关于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，使作成的界面风格与其一致。作成的界面下图：

注：点击风火轮（卍）可以显示不同的操作界面，另外无穷大（∞）用来显示距离设定时间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的扩展程序中，成功安装插件显示如图：

在12306官网上使用抢票插件

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