查询宝箱当然要有数据源，我们把每次抢到的宝箱都保存记录，这样，我们可以查询一段时间内的“成果”，
我第一个想到的是 写入数据库，一个小巧的数据库，当然选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