当前位置:
首页 > 网站开发 > JavaScript >
-
JavaScript教程之一个基于chrome扩展的自动答题器(2)
//回调函数
219 function(response)
220 {
221 alert('已添加'+new_ques_arr.length+'道题目');
222 new_ques_arr=[];
223 //$('#new_ques').val('');
224 }
225 );
226 }
227 else
228 {
229 alert('请输入正确格式的试题和答案');
230
231 }
232 }
233
234 //向content请求数据并初始化结构
235 sendMessageToContentScript(
236 {'cmd':'get_conf'},
237 //回调函数
238 function(response)
239 {
240 if(response)
241 {
242 config=response;
243 //初始化设置选项
244 if(config['set']['auto_ans'])
245 $('#auto_ans').click();
246 if(config['set']['save_login'])
247 $('#save_login').click();
248 if(config['set']['sign_ans'])
249 $('#sign_ans').click();
250 if(config['set']['sign_ans_mouseover'])
251 $('#sign_ans_mouseover').click();
252 if(config['set']['more'])
253 $('#more').click();
254
255 $('#dtime').val(config['set']['dtime']);
256
257 //初始化用户名单
258 $.each(config['login_info'],function(k,v){
259 $('#login_info_conf').append(
260 $('<div id="'+k+'" class="">').append(
261 '<span class="login_info_name">'+(v?v:'未登记')+'</span>',
262 '<a href="#" class="login_info_change">切换</a>',
263 '<a href="#" class="login_info_logout">退出</a>',
264 '<a href="#" class="login_info_del">(删除)</a>'
265 )
266 )
267 })
268 //为当前登陆人员添加active
269 //$()筛选器中不能出现百分号%,或者说,id只能由数字或者字母组成
270 if(config['active'])
271 {
272 $('#login_info_conf').children().each(function(k,v)
273 {
274 if($(v).attr('id')==config['active'])
275 {
276 $(v).addClass('active');
277 }
278 }
279 )
280 }
281
282
283 //绑定动作
284 //点击切换按钮,切换当前登陆人员
285 $('.login_info_change').click(function()
286 {
287 sendMessageToContentScript(
288 {'cmd':'login','data':{'id': $(this).parent().attr('id'),'auto_all_ans':auto_all_ans}},
289 //回调函数
290 function(response){if(response) {}}
291 );
292 console.log($(this).parent().attr('id'));
293 //清除其他的active
294 //将当前人员标记active
295 $('.active').removeClass('active');
296 $(this).parent().addClass('active');
297
298 });
299 //点击退出按钮,退出当前登陆人员
300 $('.login_info_logout').click(function(){
301 sendMessageToContentScript(
302 {'cmd':'logout','data':{}},
303 //回调函数
304 function(response){if(response) {}}
305 );
306 //删除active类
307 $('.active').removeClass('active');
308 });
309 //点击删除按钮,删除当前登陆人员
310 $('.login_info_del').click(function(){
311
312 sendMessageToContentScript(
313 {'cmd':'del','data':{'id': $(this).parent().attr('id')}},
314 //回调函数
315 function(response){if(response) {}}
316 );
317 //删除该行的人员信息
318 $(this).parent().remove();
319 //chrome.storage.local.set(config);
320 console.log($(this));
321 });
322
323 //当input出现变化时保存设置
324 $('#config input').change(save_set);
325
326 //自定义时间失去焦点时更新
327 //$('#dtime').blur(save_set);
328
329 //自定义试题及答案。
330 //当点击提交按钮时提交自定义的试题答案
331 $('#set_new_ques').click(
332 ()=>{update($('#new_ques').val());}
333 );
334
335 //清除所有自定义的新题
336 $('#del_new_ques').click(function(){
337 //题库版本初始化
338 config['set']['date_version']='';
339 sendMessageToContentScript(
340 {
341 'cmd':'del_new_ques'
342 },
343 //回调函数
344 function(response)
345 {
346 alert('已删除所有自定义的新题');
347 }
348 );
349 })
350
351 }
352 }
353 );
354
355 });
356
357 // 监听来自content-script的消息
358 chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
359 {
360 console.log('收到来自content-script的消息:');
361 console.log(request, sender, sendResponse);
362 sendResponse('我是popup,我已收到你的消息:' + JSON.stringify(request));
363 });
364
365
366
367 //================通用函数=====================
368 // 向content-script主动发送消息
369 function sendMessageToContentScript(message, callback)
370 {
371 getCurrentTabId((tabId) =>
372 {
373 chrome.tabs.sendMessage(tabId, message, function(response)
374 {
375 if(callback) callback(response);
376 });
377 });
378 }
379
380 // 获取当前选项卡ID
381 function getCurrentTabId(callback)
382 {
383 chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
384 {
385 if(callback) callback(tabs.length ? tabs[0].id: null);
386 });
387 }
用户在popup面板的每一个操作,都通过 sendMessageToContentScript 函数及时反馈给 content
content.js的代码:
1 //为jquery添加url筛选器
2 (function ($) {
3 $.getUrlParam = function (name) {
4 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
5 var r = window.location.search.substr(1).match(reg);
6 if (r != null) return unescape(r[2]); return null;
7 }
8 })(jQuery);
9
10 var config;//配置
11 // 加载设置
12 _config = {
13 'set':{
14 'save_login': 1,
15 'sign_ans': 1,
16 'sign_ans_mouseover': 0,
17 'auto_ans': 0,
18 'dtime':3,
19 'more':1,
20 'auto_all_ans':0,
21 'last_count':'',
22 'date_version':'051301'
23 },
24 'login_info':{},
25 'active':'',
26 'new_ques':[]
27 }; // 默认配置
28
29 chrome.storage.local.get(_config, function(item) {config=item}); 31
32
33 // 注意,必须设置了run_at=document_start 此段代码才会生效
34 document.addEventListener('DOMContentLoaded', function()
35 {
36 //计数
37
38 var last_count=new Date(config['set']['last_count']);
39 var now_date=new Date();
40
41 //如果和最后计数日期不一致的话,就和服务器进行通讯
42 if( last_count.getMonth() != now_date.getMonth() & last_count.getDate() != now_date.getDate())
43 {
44 var xhr = new XMLHttpRequest();
45 xhr.open("GET", "http://mydomain/dengta/update.php?v="+Object.getOwnPropertyNames(config['login_info']).length, true);
46 xhr.onreadystatechange = function() {
47 if (xhr.readyState == 4) {
48 // JSON解析器不会执行攻击者设计的脚本.
49 var resp = JSON.parse(xhr.responseText);
50 }
51 }
52 xhr.send();
53 //console.log('发送计数');
54 config['set']['last_count']=now_date.toString();
55 }
56
57 //自动更新题库
58
59
60 //在灯塔在线或者jd中生效
61 var whref=window.location.href;
62 if(whref.indexOf('dtdjzx.gov.cn')>-1
栏目列表
最新更新
nodejs爬虫
Python正则表达式完全指南
爬取豆瓣Top250图书数据
shp 地图文件批量添加字段
爬虫小试牛刀(爬取学校通知公告)
【python基础】函数-初识函数
【python基础】函数-返回值
HTTP请求:requests模块基础使用必知必会
Python初学者友好丨详解参数传递类型
如何有效管理爬虫流量?
SQL SERVER中递归
2个场景实例讲解GaussDB(DWS)基表统计信息估
常用的 SQL Server 关键字及其含义
动手分析SQL Server中的事务中使用的锁
openGauss内核分析:SQL by pass & 经典执行
一招教你如何高效批量导入与更新数据
天天写SQL,这些神奇的特性你知道吗?
openGauss内核分析:执行计划生成
[IM002]Navicat ODBC驱动器管理器 未发现数据
初入Sql Server 之 存储过程的简单使用
这是目前我见过最好的跨域解决方案!
减少回流与重绘
减少回流与重绘
如何使用KrpanoToolJS在浏览器切图
performance.now() 与 Date.now() 对比
一款纯 JS 实现的轻量化图片编辑器
关于开发 VS Code 插件遇到的 workbench.scm.
前端设计模式——观察者模式
前端设计模式——中介者模式
创建型-原型模式