根據公司的規定，每月八小時，彈性工作制。所以大家平時來的不太準時，如果有事，下班也就早些回去了。所以一個月下來工作時間可能不夠，但是公司的考勤日歷是這樣的：

除了請假和法定節假日外，其他樣式顯示都是一樣的，每次都要一個個估算這個月的大概工作時間，十分不方便。后來看到公司有人在用一個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-time1function 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(); 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 扩展程序开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。