Google Chrome 擴展程序開發

時間 2019-11-24

原文原文鏈接

　　根據公司的規定，每個月八小時，彈性工做制。因此你們平時來的不太準時，若是有事，下班也就早些回去了。因此一個月下來工做時間可能不夠，可是公司的考勤日曆是這樣的：html

除了請假和法定節假日外，其餘樣式顯示都是同樣的，每次都要一個個估算這個月的大概工做時間，十分不方便。後來看到公司有人在用一個Chrome擴展程序，能夠計算出一個月的工做時間，可是我以爲仍是沒有看到我想看的東西，由於除了每月的累計工做時間外，我還想看到：平均天天工做時長、每一天的工做時長、20點之後的天數（20點之後下班的能夠報銷晚飯的，哈哈……）、22點之後下班的天數（報銷打車費）……因此我決定仍是本身寫一個吧。jquery

　　第一步，我先寫了一個JS方法，而後經過F12開發者工具的Console複製粘貼運行。ajax

　　公司用的OA系統沒有引用jQuery庫，因此我剛開始的想法是想動態引用jQuery類庫，以下：chrome

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。json

JS代碼以下：api

/*
 * 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();

View Code

代碼說明：監聽考勤查詢按鈕的click事件，考勤信息加載完成後，執行個人JS方法。app

　　第二步，開發Chrome擴展程序ide

　　參考資料：http://open.chrome.360.cn/extension_dev/content_scripts.html （查詢manifest.json的content_scripts節點的各個屬性說明）工具

　　manifest.json是必須的，最終內容以下：this

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