查询宝箱当然要有数据源,我们把每次抢到的宝箱都保存记录,这样,我们可以查询一段时间内的“成果”,
我第一个想到的是 写入数据库,一个小巧的数据库,当然选mysql啦,如果不想安装其它东西,浏览器自带的IndexedDB,也行,因为Web Sql 不能持久化,所以不用。
先说数据从哪来,每次抢宝箱成功,都会 弹出,”恭喜您,领取了XXXX 个鱼丸”, ” 恭喜您,领取了XXXX 个稳”,然后 查出在 mod-all1.js内,this.appendTips(n),这个n会变动的。
function insertData(_data) { console.log(_data); window.postMessage({"insertSql": _data}, ‘*‘); };
可以在外面定义一个 方法,用window.postMessage传给popup层,popoup 把数据处理后,传给background层,background 写入数据库。
Popup接收
//接收 window.postMessage({"insertSql": _data}, ‘*‘); 类型的消息
window.addEventListener("message", function(e) { if (e.data.hasOwnProperty("insertSql") ) { var data = e.data.insertSql; data.roomId = roomObj.getRoomId(); //房间id data.time = RoomObj.formatDateTime(new Date());//格式化后的当前时间("YYYY-MM-DD HH:mm:ss") }, false);
再用 chrome.runtime.sendMessage(
_data, //数据
function(response) {
}
);
发给 Background层
Background 用chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){}接收,然后用WebSocket 发给后端,后端,我用C#写的,调用 Fleck.dll 内的WebSocketServer 与js对接,拿到数据,写入 数据库。
有些人 不喜欢安装其他东西,也不喜欢运行其它程序,那就只能放入 浏览器IndexedDB内了,但一卸载扩展数据就会丢失,查询大量数据时,也耗时,
background层 加载indexedDB.js
//初始化数据库
1 var request; 2 3 var db; 4 5 function initDB(_name,_version){ 6 7 try { 8 9 if (!window.indexedDB) { 10 11 console.log("browser doesn‘t support indexedDB"); 12 13 } else { 14 15 var name = _name || ‘test‘; 16 17 var version = _version || 2; 18 19 20 21 request = window.indexedDB.open(_name,_version); 22 23 request.onerror = function (event) { 24 25 console.log(‘数据库打开报错‘); 26 27 }; 28 29 request.onsuccess = function (event) { 30 31 db = request.result; 32 33 console.log(‘数据库打开成功‘); 34 35 }; 36 37 //增加数据库版本号时,会触发onupgradeneeded事件(会在onsuccess之前被调用) 38 39 request.onupgradeneeded = function (event) { 40 41 db = event.target.result; 42 43 }; 44 45 } 46 47 } catch(e) { 48 49 console.log(e.message); 50 51 } 52 53 }; 54 55 //初始化 indexedDB 56 57 initDB("DouyuRoom",2); 58 59 request.onupgradeneeded = function(event) { 60 61 db = event.currentTarget.result; 62 63 var objectStore = db.createObjectStore(‘t_treasure‘,{keyPath: ‘id‘,autoIncrement: true }); 64 65 }; 66 67 function Treasure() { 68 69 } 70 71 var treasure = new Treasure(); 72 73 Treasure.add = function(_obj) { 74 75 var tx = db.transaction("t_treasure", ‘readwrite‘); 76 77 var store = tx.objectStore("t_treasure"); 78 79 _obj.time= formatDateTime(new Date()); 80 81 console.log(_obj); 82 83 store.add(_obj); 84 85 }; 86 87 88 89 function time1Lesstime2(d1,d2) 90 91 { 92 93 return d1.replace(/-/g,"").replace(/:/g,"").replace(/ /g,"")< d2.replace(/-/g,"").replace(/:/g,"").replace(/ /g,""); 94 95 }; 96 97 var dataFromIndexDb; 98 99 Treasure.find = function(_s,_e){ 100 101 _s=_s +"00:00:00"; 102 103 _e=_e +"23:59:59"; 104 105 dataFromIndexDb=[]; 106 107 var objectStore = db.transaction(‘t_treasure‘).objectStore(‘t_treasure‘); 108 109 objectStore.openCursor().onsuccess = function (event) { 110 111 var cursor = event.target.result; 112 113 if (cursor) { 114 115 if (time1Lesstime2(_s,cursor.value.time) &&time1Lesstime2(cursor.value.time,_e)){ 116 117 var t= {time:cursor.value.time,roomId: cursor.value.roomId,src_nick:cursor.value.src_nick,award_type:cursor.value.award_type,silver:cursor.value.silver,prop_count:cursor.value.prop_count}; 118 119 // console.log(‘time: ‘ + cursor.value.time); 120 121 dataFromIndexDb.push(t); 122 123 cursor.continue(); 124 125 } 126 127 } else { 128 129 //console.log(‘没有数据了!‘); 130 131 } 132 133 }; 134 135 }; 136 137 function formatDateTime(inputTime) { 138 139 var date = new Date(inputTime); 140 141 var y = date.getFullYear(); 142 143 var m = date.getMonth() + 1; 144 145 m = m < 10 ? (‘0‘ + m) : m; 146 147 var d = date.getDate(); 148 149 d = d < 10 ? (‘0‘ + d) : d; 150 151 var h = date.getHours(); 152 153 h = h < 10 ? (‘0‘ + h) : h; 154 155 var minute = date.getMinutes(); 156 157 var second = date.getSeconds(); 158 159 minute = minute < 10 ? (‘0‘ + minute) : minute; 160 161 second = second < 10 ? (‘0‘ + second) : second; 162 163 return y + ‘-‘ + m + ‘-‘ + d+‘ ‘+h+‘:‘+minute+‘:‘+second; 164 165 };
这样,就会写入 浏览器的IndexedDB ,
至于查询页面,有数据源了,大家各有各的方法显示查询结果,我用的是vue.js 与 组件 | Element ,
原文:https://www.cnblogs.com/likehc/p/9610644.html