谷歌Chrome浏览器扩展程序开发小记


Posted in Javascript onJanuary 06, 2016

根据公司的规定,每月八小时,弹性工作制。所以大家平时来的不太准时,如果有事,下班也就早些回去了。所以一个月下来工作时间可能不够,但是公司的考勤日历是这样的:

谷歌Chrome浏览器扩展程序开发小记

除了请假和法定节假日外,其他样式显示都是一样的,每次都要一个个估算这个月的大概工作时间,十分不方便。后来看到公司有人在用一个Chrome扩展程序,可以计算出一个月的工作时间,但是我觉得还是没有看到我想看的东西,因为除了每个月的累计工作时间外,我还想看到:平均每天工作时长、每一天的工作时长、20点以后的天数(20点以后下班的可以报销晚饭的,哈哈……)、22点以后下班的天数(报销打车费)……所以我决定还是自己写一个吧。

第一步,我先写了一个JS方法,然后通过F12开发者工具的Console复制粘贴运行。

公司用的OA系统没有引用jQuery库,所以我刚开始的想法是想动态引用jQuery类库,如下:

var script = document.createElement("script");

script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js";

document.body.appendChild(script);

但是遇到了问题:一个是$被占用,二是HR系统采用iframe嵌套,并且还有frame嵌套,结构很复杂。而console运行的代码是在最顶层运行的,后期的chrome扩展插件是运行在内部frame中的,可能这里的JS后面不能直接使用。虽然$被占用的问题可以通过jQuery.noConflict();来解决,但是jquery库和原来系统的JS库存在调用顺序的问题,而且在内部的frame中死活访问不到jQuery这个对象。最后我决定放弃使用jQuery,该用原生JavaScript。

JS代码如下:

/*
 * author:清明雨上
 * date:2016-1-5
 */
var mydate = function() {
  //time2-time1
  function getTimeDiff(time1, time2) {
    var st1 = time1.split(':');
    var st2 = time2.split(':');
    return ((st2[0] | 0) * 60 + (st2[1] | 0)) - ((st1[0] | 0) * 60 + (st1[1] | 0) * 1);
  }

  var timeList = [];
  var mymain = window.parent.frames['Main'].document.getElementById('ctl00_cphMain_CalendarAC');
  var listAC = mymain.getElementsByClassName('listAC');
  for (var i = 0; i < listAC.length; i++) {
    var item = listAC[i];
    var t = {};
    t.timeSpan = item.getElementsByTagName('td')[1].innerText;
    t.remark = item.getElementsByTagName('td')[2].innerText;
    timeList.push(t);
  };

  var totalMin = 0;
  var noworkDays = 0; //请假天数
  var workDays = 0; //实际上班天数
  var workHourEveryday = [];
  var no8h = 0; //未满8小时天数
  var over20 = 0; //20点以后下班天数
  var over21 = 0; //21点以后下班天数
  var over22 = 0; //22点以后下班天数
  var over23 = 0; //23点以后下班天数
  for (var i = 0; i < timeList.length; i++) {
    var time = timeList[i];
    if (time.remark != '无') {
      noworkDays++;
      continue;
    }
    if (time.timeSpan == '无刷卡记录')
      continue;

    var splitTime = time.timeSpan.split('~');
    if (splitTime.length == 2) {
      //正常上下班
      var begin = splitTime[0];
      var end = splitTime[1];
      var thisMin = getTimeDiff(begin, end);
      totalMin += thisMin;
      workDays++;
      if (thisMin / 60 < 8) {
        workHourEveryday.push('<font color="red"><b style="font-size:15px">' + parseInt(thisMin / 60) + '</b>.' + thisMin % 60 + '</font>');
        no8h++;
      } else {
        workHourEveryday.push('<b style="font-size:15px">' + parseInt(thisMin / 60) + '</b>.' + thisMin % 60);
        var offworkHour = parseInt(end.split(':')[0]);
        if (offworkHour >= 20) {
          over20++;
        }
        if (offworkHour >= 21) {
          over21++;
        }
        if (offworkHour >= 22) {
          over22++;
        }
        if (offworkHour >= 23) {
          over23++;
        }
      }
    }
  };
  var myHour = parseInt(totalMin / 60); //本月工作累计小时数
  var otherMin = totalMin % 60; //本月工作出小时部分外的分钟数
  var avgHourOneDay = workDays == 0 ? '0.0' : '<b style="font-size:15px">'+(parseInt(myHour / workDays) + '</b>.' + (parseInt((myHour % workDays) * 60 / workDays) + parseInt(otherMin / workDays))); //平均每天工作时长

  var html = '<div class="alectest" style="background: #cbebfb;padding:7px;">\
        <div>出勤时间:<b style="font-size:15px;color:red">' + myHour + '</b>小时<font color="red">' + otherMin + '</font>分钟(平均<font color="red">' + avgHourOneDay + '</font>小时/天)</div>\
        <div>参考时间:' + workDays * 8 + '小时【' + workDays + '天】(除去请假和节假日,实际有打卡记录的天数)</div>\
        <div>请假/外出天数:' + noworkDays + '天</div>\
        <div>每天工作时间(格式:小时.分钟):' + workHourEveryday.join(',') + '</div>\
        <div>未满8小时天数:<b style="font-size:15px">' + no8h + '</b>天</div>\
        <div>20点以后下班天数:<b style="font-size:15px">' + over20 + '</b>天</div>\
        <div>21点以后下班天数:<b style="font-size:15px">' + over21 + '</b>天</div>\
        <div>22点以后下班天数:<b style="font-size:15px">' + over22 + '</b>天</div>\
        <div>23点以后下班天数:<b style="font-size:15px">' + over23 + '</b>天</div>\
       </div>'
  var alectest = mymain.parentNode.getElementsByClassName('alectest');
  if (alectest.length > 0) {
    // mymain.parentNode.removeChild(alectest[0]);
    alectest[0].innerHTML = html;
  } else {
    var div = document.createElement("div");
    div.innerHTML = html;
    var fragement = document.createDocumentFragment();
    while (div.childNodes[0]) {
      fragement.appendChild(div.childNodes[0]);
    }
    mymain.parentNode.insertBefore(fragement, mymain);
  }
  bindBtnClick();
}
var bindBtnClick = function() {
  window.parent.frames['Main'].document.getElementById('ctl00_cphTop_BtnQuery').addEventListener('click', function() {
    var inter = setInterval(function() {
      if (window.parent.frames['Main'].document.getElementById('ctl00_cphMain_CalendarAC') &&
        window.parent.frames['Main'].document.getElementById('ctl00_UpMaster').style.display == 'none') {
        clearInterval(inter);
        mydate();
      }
    }, 500);
  }, false);
}
bindBtnClick();

代码说明:监听考勤查询按钮的click事件,考勤信息加载完成后,执行我的JS方法。

第二步,开发Chrome扩展程序

参考资料:http://open.chrome.360.cn/extension_dev/content_scripts.html(查询manifest.json的content_scripts节点的各个属性说明)

manifest.json是必须的,最终内容如下:

{
 "manifest_version":2,
  "name": "Extension Name", 
 "version": "0.1.0", 
 "description": "插件描述",
 "icons": { "48": "icon.png" },
 "content_scripts": [
  {
   "all_frames" : true,
   "matches": ["http://*"],
   "js": ["haha.js"],
   "run_at": "document_end"
  }
 ]
}

另外,在同目录下放入一个icon.png图片,至此,所有文件都准备完毕,目录如下:

谷歌Chrome浏览器扩展程序开发小记

打开Chrome的扩展程序列表的开发者模式》大包扩展程序...,在扩展程序根目录中输入上面三个文件所在的父目录。

谷歌Chrome浏览器扩展程序开发小记

谷歌Chrome浏览器扩展程序开发小记

点击【打包扩展程序】即可。

说明:如果点击该按钮长时间未能反映,可以能是你的chrome不允许第三方非认证的扩展程序,解决方案是,点击chrome快捷方式右键》属性》目标输入框后面追加“ enable-easy-off-store-extension-install”,注意前面的空格。

谷歌Chrome浏览器扩展程序开发小记

然后再尝试以上步骤就行了。

第三步,防止Chrome屏蔽非官方扩展程序 设置

Chrome会提示暂停非官方扩展程序,每次启动就有提示,很烦人。

谷歌Chrome浏览器扩展程序开发小记

查找资料:http://www.itechzero.com/prevent-chrome-shielding-unofficial-extensions-tutorial.html(防止Chrome屏蔽非官方扩展程序教程)

根据以上资料说明,可以轻松解决这个问题。

至此,该可扩展程序全部完成,结果图如下:

谷歌Chrome浏览器扩展程序开发小记

Javascript 相关文章推荐
Javascript 去除数组的重复元素
May 04 Javascript
关于jquery css的使用介绍
Apr 18 Javascript
JavaScript四种调用模式和this示例介绍
Jan 02 Javascript
js弹出div并显示遮罩层
Feb 12 Javascript
javascript判断office版本示例
Apr 11 Javascript
Node.js的特点和应用场景介绍
Nov 04 Javascript
举例说明如何为JavaScript的方法参数设置默认值
Nov 17 Javascript
AngularJS 中的指令实践开发指南(一)
Mar 20 Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 Javascript
Angularjs实现多图片上传预览功能
Jul 18 Javascript
JS三级联动代码格式实例详解
Dec 30 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
JavaScript类型系统之基本数据类型与包装类型
Jan 06 #Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 #Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
Jan 06 #Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 #Javascript
js判断当前页面用什么浏览器打开的方法
Jan 06 #Javascript
javascript中闭包(Closure)详解
Jan 06 #Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 #Javascript
You might like
初次接触php抽象工厂模式(Elgg)
2010/03/21 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
js 控制图片大小核心讲解
2013/10/09 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
2015/04/07 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
JavaScript计算器网页版实现代码分享
2016/07/15 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
2018/01/08 Javascript
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
移动端图片上传旋转、压缩问题的方法
2018/10/16 Javascript
ES6的异步操作之promise用法和async函数的具体使用
2019/12/06 Javascript
python实现爬虫下载漫画示例
2014/02/16 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
Python反转序列的方法实例分析
2018/03/21 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
Python os.rename() 重命名目录和文件的示例
2018/10/25 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
解决Django migrate不能发现app.models的表问题
2019/08/31 Python
sklearn线性逻辑回归和非线性逻辑回归的实现
2020/06/09 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
俄罗斯在线大型超市:ТутПросто
2021/01/08 全球购物
初一家长会邀请函
2014/01/31 职场文书
事业单位考核材料
2014/05/21 职场文书
预备党员综合考察材料
2014/05/31 职场文书
羽毛球比赛策划方案
2014/06/13 职场文书
三严三实学习心得体会
2014/10/13 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript
JS前端宏任务微任务及Event Loop使用详解
2022/07/23 Javascript