谷歌Chrome瀏覽器擴(kuò)展程序開發(fā)小記

2019-11-20 10:51:14

字體：大中小

供稿：網(wǎng)友

　　根據(jù)公司的規(guī)定，每月八小時(shí)，彈性工作制。所以大家平時(shí)來(lái)的不太準(zhǔn)時(shí)，如果有事，下班也就早些回去了。所以一個(gè)月下來(lái)工作時(shí)間可能不夠，但是公司的考勤日歷是這樣的：

除了請(qǐng)假和法定節(jié)假日外，其他樣式顯示都是一樣的，每次都要一個(gè)個(gè)估算這個(gè)月的大概工作時(shí)間，十分不方便。后來(lái)看到公司有人在用一個(gè)Chrome擴(kuò)展程序，可以計(jì)算出一個(gè)月的工作時(shí)間，但是我覺得還是沒(méi)有看到我想看的東西，因?yàn)槌嗣總€(gè)月的累計(jì)工作時(shí)間外，我還想看到：平均每天工作時(shí)長(zhǎng)、每一天的工作時(shí)長(zhǎng)、20點(diǎn)以后的天數(shù)（20點(diǎn)以后下班的可以報(bào)銷晚飯的，哈哈……）、22點(diǎn)以后下班的天數(shù)（報(bào)銷打車費(fèi)）……所以我決定還是自己寫一個(gè)吧。

　　第一步，我先寫了一個(gè)JS方法，然后通過(guò)F12開發(fā)者工具的Console復(fù)制粘貼運(yùn)行。

　　公司用的OA系統(tǒng)沒(méi)有引用jQuery庫(kù)，所以我剛開始的想法是想動(dòng)態(tài)引用jQuery類庫(kù)，如下：

復(fù)制代碼代碼如下:

var script = document.createElement("script");
script.src = "document.body.appendChild(script);

但是遇到了問(wèn)題：一個(gè)是$被占用，二是HR系統(tǒng)采用iframe嵌套，并且還有frame嵌套，結(jié)構(gòu)很復(fù)雜。而console運(yùn)行的代碼是在最頂層運(yùn)行的，后期的chrome擴(kuò)展插件是運(yùn)行在內(nèi)部frame中的，可能這里的JS后面不能直接使用。雖然$被占用的問(wèn)題可以通過(guò)jQuery.noConflict();來(lái)解決，但是jquery庫(kù)和原來(lái)系統(tǒng)的JS庫(kù)存在調(diào)用順序的問(wèn)題，而且在內(nèi)部的frame中死活訪問(wèn)不到j(luò)Query這個(gè)對(duì)象。最后我決定放棄使用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; //請(qǐng)假天數(shù)  var workDays = 0; //實(shí)際上班天數(shù)  var workHourEveryday = [];  var no8h = 0; //未滿8小時(shí)天數(shù)  var over20 = 0; //20點(diǎn)以后下班天數(shù)  var over21 = 0; //21點(diǎn)以后下班天數(shù)  var over22 = 0; //22點(diǎn)以后下班天數(shù)  var over23 = 0; //23點(diǎn)以后下班天數(shù)  for (var i = 0; i < timeList.length; i++) {    var time = timeList[i];    if (time.remark != '無(wú)') {      noworkDays++;      continue;    }    if (time.timeSpan == '無(wú)刷卡記錄')      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); //本月工作累計(jì)小時(shí)數(shù)  var otherMin = totalMin % 60; //本月工作出小時(shí)部分外的分鐘數(shù)  var avgHourOneDay = workDays == 0 ? '0.0' : '<b style="font-size:15px">'+(parseInt(myHour / workDays) + '</b>.' + (parseInt((myHour % workDays) * 60 / workDays) + parseInt(otherMin / workDays))); //平均每天工作時(shí)長(zhǎng)  var html = '<div class="alectest" style="background: #cbebfb;padding:7px;">/        <div>出勤時(shí)間：<b style="font-size:15px;color:red">' + myHour + '</b>小時(shí)<font color="red">' + otherMin + '</font>分鐘（平均<font color="red">' + avgHourOneDay + '</font>小時(shí)/天）</div>/        <div>參考時(shí)間：' + workDays * 8 + '小時(shí)【' + workDays + '天】（除去請(qǐng)假和節(jié)假日，實(shí)際有打卡記錄的天數(shù)）</div>/        <div>請(qǐng)假/外出天數(shù)：' + noworkDays + '天</div>/        <div>每天工作時(shí)間(格式：小時(shí).分鐘)：' + workHourEveryday.join('，') + '</div>/        <div>未滿8小時(shí)天數(shù)：<b style="font-size:15px">' + no8h + '</b>天</div>/        <div>20點(diǎn)以后下班天數(shù)：<b style="font-size:15px">' + over20 + '</b>天</div>/        <div>21點(diǎn)以后下班天數(shù)：<b style="font-size:15px">' + over21 + '</b>天</div>/        <div>22點(diǎn)以后下班天數(shù)：<b style="font-size:15px">' + over22 + '</b>天</div>/        <div>23點(diǎn)以后下班天數(shù)：<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();

代碼說(shuō)明：監(jiān)聽考勤查詢按鈕的click事件，考勤信息加載完成后，執(zhí)行我的JS方法。

　　第二步，開發(fā)Chrome擴(kuò)展程序

　　參考資料：http://open.chrome.360.cn/extension_dev/content_scripts.html（查詢manifest.json的content_scripts節(jié)點(diǎn)的各個(gè)屬性說(shuō)明）

　　manifest.json是必須的，最終內(nèi)容如下：

{ "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"  } ]}

另外，在同目錄下放入一個(gè)icon.png圖片，至此，所有文件都準(zhǔn)備完畢，目錄如下：

打開Chrome的擴(kuò)展程序列表的開發(fā)者模式》大包擴(kuò)展程序...，在擴(kuò)展程序根目錄中輸入上面三個(gè)文件所在的父目錄。

點(diǎn)擊【打包擴(kuò)展程序】即可。

說(shuō)明：如果點(diǎn)擊該按鈕長(zhǎng)時(shí)間未能反映，可以能是你的chrome不允許第三方非認(rèn)證的擴(kuò)展程序，解決方案是，點(diǎn)擊chrome快捷方式右鍵》屬性》目標(biāo)輸入框后面追加“ enable-easy-off-store-extension-install”，注意前面的空格。