Chrome浏览器——抢票插件的制作与插件工具(上)
来源:互联网 发布:免费数据恢复大师 编辑:程序博客网 时间:2024/04/28 00:57
关于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请求被拦截,请打开一个被拦截的文件,继续访问后刷新页面即可)
- Chrome浏览器——抢票插件的制作与插件工具(上)
- Chrome浏览器——抢票插件的制作与插件工具(下)
- 科学上网工具 CHROME 浏览器插件——红杏
- 常用的Chrome浏览器插件
- chrome浏览器的二维码插件
- chrome浏览器的二维码插件
- 火狐浏览器与google Chrome浏览器插件
- 谷歌浏览器Chrome上安装插件
- cVim—Chrome上更强大的vim插件
- Chrome——我的Chrome插件
- 使用浏览器——Chrome浏览器插件使用
- 制作chrome插件
- Chrome插件制作
- chrome 浏览器在线翻译插件
- chrome浏览器插件编写
- chrome浏览器插件开发
- chrome浏览器插件
- Chrome浏览器护眼插件
- uImage zImage
- Button
- javascipt数据类型
- Hibernate中lazy属性作用
- Android中的MVP
- Chrome浏览器——抢票插件的制作与插件工具(上)
- 代码获取go当前版本号
- 基于CTP的国内期货程序化交易之报单流程讲解
- 连接池连接sql步骤
- Linux中的文本搜索工具grep与egrep的用法
- 免费个人博客搭建教程(详细-图文)--Hexo+OSChina
- 数据结构和算法-01
- 使用【key-value】代替【if-else】
- maven五:查找jar包坐标,选择jar包版本