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

除了请假和法定节假日外,其他样式显示都是一样的,每次都要一个个估算这个月的大概工作时间,十分不方便。后来看到公司有人在用一个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
functiongetTimeDiff(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();

View Code

代码说明:监听考勤查询按钮的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"}
]
}

View Code

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

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

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

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

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

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

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

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

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

  

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

  

更多专业前端知识,请上 【猿2048】www.mk2048.com

Google Chrome 扩展程序开发相关推荐

  1. 如何创建自己的 Google Chrome 扩展程序

    如何创建自己的 Google Chrome 扩展程序 如果您是 Google Chrome 用户,您可能已经在浏览器中使用了一些扩展程序. 你有没有想过如何自己建造一个?在本文中,我将向您展示如何从头 ...

  2. Day 29:编写你的第一个 Google Chrome 扩展程序

    今天的<30天学习30种新技术>,我决定去学习如何写一个 Chrome 扩展程序.在做了一些搜索之后,我发现一个 Yeoman 生成器可以用来写 Chrome 扩展程序.我们在这篇要写的扩 ...

  3. chrome扩展程序开发

    首先,明确两个概念的区别:chrome扩展程序和Web Apps.具体参考:http://www.chromi.org/archives/10106 本文只讨论chrome扩展程序. 最好的开发教程莫 ...

  4. Chrome 扩展程序开发 Chrome Extensions

    Chrome扩展程序一般都是由JS.HTML.CSS构成.所需要知道的是开发扩展程序要满足的规则. Chrome插件源码结构: manifest.json: 每一个webapp都会有一个JSON格式的 ...

  5. Google Chrome扩展程序推荐

    一.颜色 选色器 就像它的名字一样,ColorPicker是一个方便的扩展,主要用于从网页上的任何地方挑选颜色的价值.此外,您可以选择一个区域,然后单击调色板,以查看该区域的颜色如何更改,而无需去找任 ...

  6. Chrome扩展程序(插件),用你开发的脚本在浏览器上随心所欲

    Chrome扩展程序(插件),用你开发的脚本在浏览器上随心所欲 Chrome插件的文件结构 Hello_World编写 利用JavaScript实现Hello Everything 灵活运用浏览器的存 ...

  7. 程序员普遍用gmail_使Gmail更好的最佳Chrome扩展程序

    程序员普遍用gmail Gmail is already pretty great, but with the addition of a few carefully selected Google ...

  8. activex for chrome扩展程序 下载”_提升前端开发效率:你应该知道的10个Chrome扩展程序...

    作者 | Chidume Nnamdi 译者 | 王强 策划 | 李俊辰 "进步不是勤奋者的功劳.它是懒惰者在尝试寻找更简单的方法时取得的成果."  --罗伯特·海因莱因 CSSV ...

  9. 推荐一个有趣的Chrome扩展程序-查看任意网站的开发技术栈

    对于前端开发人员来说,目前的前端框架层出不穷,最受欢迎的莫过于所谓的前端框架三驾马车:Angular, React和Vue.在学习的过程中,肯定好奇现在的互联网公司的网站用的何种前端框架来开发的. C ...

最新文章

  1. 031_mysql事务的安全隐患
  2. Spring——AOP
  3. gsonformat安装怎么使用_IDEA中使用GsonFormat
  4. anaconda 更改路径_Anaconda更改Jupyter 默认启动路径
  5. MDS 9148 配置
  6. 傅里叶变换和逆傅里叶变换numpy
  7. 为什么QQ能用网络,而浏览器却不能用网络?
  8. matlab中平均函数用法,matlab中怎样在X的指定范围内求y的平均值
  9. 基于jdk proxy的动态代理模式
  10. 安装 SQL Server Compact Edition 及 与PC 数据同步的部署
  11. 面向对象编程(十)——继承之Super关键字及内存分析
  12. Linux readelf命令
  13. 快讯!分布式调度项目ElasticJob即将重新起航
  14. css盒模型(标准模式和怪异模式)
  15. ios 直播间点赞动画
  16. 2017年总结--心情篇
  17. Laravel + EasyWeChat 微信登陆功能
  18. DNS服务器轮询的验证
  19. Java面试题中高级,nasdocker有啥好玩的
  20. 异常(父类对象ani instanceof是不是 子类Cat 的实例)

热门文章

  1. BPSK调制下(2,1,6)标准卷积码及打孔生成2/3、3/4、4/5、5/6删余码Viterbi译码误码率曲线图(MATLAB实现)
  2. java描边_shape描边设置是否显示四周描边
  3. 语音识别插件_2D动画唇动合成,根据语音自动生成动画人物口型
  4. 问题 1046: [编程入门]自定义函数之数字后移
  5. isinstance和issubclass
  6. 数据分析——pyecharts
  7. 配置gitlab通过smtp发送邮件
  8. ConcurrentHashMap 源码分析
  9. Discuz UCenter 修改手记 - 2014.12.19
  10. startActivityForResult的使用和用法