VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > 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
      



  

相关教程