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

更新時間：2016年01月06日 09:26:37 投稿：hebedich

本文給大家記錄的是一次谷歌Chrome瀏覽器擴展程序的開發(fā)過程，非常的細致，有類似開發(fā)念頭的小伙伴們可以來參考下

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

除了請假和法定節(jié)假日外，其他樣式顯示都是一樣的，每次都要一個個估算這個月的大概工作時間，十分不方便。后來看到公司有人在用一個Chrome擴展程序，可以計算出一個月的工作時間，但是我覺得還是沒有看到我想看的東西，因為除了每個月的累計工作時間外，我還想看到：平均每天工作時長、每一天的工作時長、20點以后的天數(shù)（20點以后下班的可以報銷晚飯的，哈哈……）、22點以后下班的天數(shù)（報銷打車費）……所以我決定還是自己寫一個吧。

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

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

復制代碼代碼如下:

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

但是遇到了問題：一個是$被占用，二是HR系統(tǒng)采用iframe嵌套，并且還有frame嵌套，結構很復雜。而console運行的代碼是在最頂層運行的，后期的chrome擴展插件是運行在內部frame中的，可能這里的JS后面不能直接使用。雖然$被占用的問題可以通過jQuery.noConflict();來解決，但是jquery庫和原來系統(tǒng)的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; //請假天數(shù)
  var workDays = 0; //實際上班天數(shù)
  var workHourEveryday = [];
  var no8h = 0; //未滿8小時天數(shù)
  var over20 = 0; //20點以后下班天數(shù)
  var over21 = 0; //21點以后下班天數(shù)
  var over22 = 0; //22點以后下班天數(shù)
  var over23 = 0; //23點以后下班天數(shù)
  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); //本月工作累計小時數(shù)
  var otherMin = totalMin % 60; //本月工作出小時部分外的分鐘數(shù)
  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 + '天】（除去請假和節(jié)假日，實際有打卡記錄的天數(shù)）</div>\
        <div>請假/外出天數(shù)：' + noworkDays + '天</div>\
        <div>每天工作時間(格式：小時.分鐘)：' + workHourEveryday.join('，') + '</div>\
        <div>未滿8小時天數(shù)：<b style="font-size:15px">' + no8h + '</b>天</div>\
        <div>20點以后下班天數(shù)：<b style="font-size:15px">' + over20 + '</b>天</div>\
        <div>21點以后下班天數(shù)：<b style="font-size:15px">' + over21 + '</b>天</div>\
        <div>22點以后下班天數(shù)：<b style="font-size:15px">' + over22 + '</b>天</div>\
        <div>23點以后下班天數(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();

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

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

　　參考資料：http://open.chrome.#/extension_dev/content_scripts.html（查詢manifest.json的content_scripts節(jié)點的各個屬性說明）

　　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圖片，至此，所有文件都準備完畢，目錄如下：