谷歌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 相关文章推荐
js判断两个日期是否相等的方法
Sep 10 Javascript
一个判断抢购时间是否到达的简单的js函数
Jun 23 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
Apr 18 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
微信小程序wx.request拦截器使用详解
Jul 09 Javascript
vue中对象数组去重的实现
Feb 06 Javascript
vue实现下拉菜单树
Oct 22 Javascript
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
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
PHP学习笔记之二 php入门知识
2011/01/12 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
php的declare控制符和ticks教程(附示例)
2014/03/21 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
分享php邮件管理器源码
2016/01/06 PHP
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python正则表达式知识汇总
2017/09/22 Python
Python3基于sax解析xml操作示例
2018/05/22 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
Python3转换html到pdf的不同解决方案
2019/03/11 Python
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
企划主管岗位职责
2013/12/12 职场文书
装饰资料员岗位职责
2013/12/30 职场文书
房屋租赁合同解除协议书
2014/10/11 职场文书
教学督导岗位职责
2015/04/10 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书
python 下载文件的几种方式分享
2021/04/07 Python
python批量更改目录名/文件名的方法
2021/04/18 Python
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL