Google Chrome Browser expansion program development _javascript Tips

According to the company's regulations, eight hours a month, flexible. So we usually come to not very punctual, if something, work will be back early. So one months may not be enough time to work, but the company's attendance calendar is this:

In addition to leave and statutory holidays, the other style shows are the same, each time to estimate the approximate working hours of this month, very inconvenient. Then I saw someone in the company using a Chrome extender, I can calculate one months of work time, but I still do not see what I want to see, because in addition to the cumulative working hours per month, I would like to see: the average daily hours of work, the length of work each day, Days after 20 o'clock (after 20 o ' clock can be reimbursed for dinner, haha ...) ), the number of days after 22 o ' clock (reimbursement of taxi fees) ... So I decided to write one myself.

The first step, I wrote a JS method, and then through the F12 Developer Tool console copy paste run.

The OA system used in the company does not refer to the jquery library, so I just started with the idea of dynamically referencing the JQuery class library as follows:

Copy Code code as follows:

var script = document.createelement ("script");
SCRIPT.SRC = "Http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js";
Document.body.appendChild (script);

But encountered the problem: one is $ is occupied, the second is the HR system with an IFRAME nested, and there are frame nesting, the structure is very complex. The console running code is running at the top level, the later Chrome extension is run in the internal frame, it may not be directly behind the JS. Although the problem of the $ is occupied by Jquery.noconflict (), but the jquery library and the original system of JS inventory in the call order problem, and in the internal frame is dead and alive access to jquery this object. Finally I decided to give up using jquery, the native JavaScript.

The JS code is as follows:

* * Author: qingming rain * 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) * + (St2[1] | 0))-((St1[0] | 0) * + (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; Days of absence var workdays = 0;
  In fact the class days var workhoureveryday = []; var no8h = 0; Days under 8 hours var over20 = 0; After 20 o'clock days after work var over21 = 0; After 21 o'clock days after work var over22 = 0; After 22 o'clock days after work var over23 = 0; Days after 23 o'clock for (var i = 0; i < timelist.length; i++) {VAR time = timelist[i];
      if (Time.remark!= ' None ') {noworkdays++;
    Continue

    if (Time.timespan = = ' no card record ') continue;
    var splittime = time.timeSpan.split (' ~ ');
      if (splittime.length = = 2) {//normal commute 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" > "+ Pars
        Eint (THISMIN/60) + ' </b>. ' + thismin% + ' </font> ');
      no8h++; else {workhoureveryday.push (' <b style= ' font-size:15px ' > ' + parseint (thismin/60) + ' </b>. ' + thism
        in% 60);
        var offworkhour = parseint (End.split (': ') [0]);
        if (Offworkhour >=) {over20++;
        } if (Offworkhour >=) {over21++;
        } if (Offworkhour >=) {over22++;
    }    if (Offworkhour >=) {over23++;
  }
      }
    }
  }; var myhour = parseint (TOTALMIN/60); Cumulative hours of work this month var othermin = totalmin% 60; The number of minutes outside the hours of work this month var avghouroneday = workdays = 0? ' 0.0 ': ' <b style= ' font-size:15px ' > ' + (parseint (myhour/workdays) + ' </b>. ' + (parseint (myhour% workdays) * 60/workdays) + parseint (othermin/workdays)); Average daily work hours long var html = ' <div class= ' alectest ' style= ' background: #cbebfb;p adding:7px; " >\ <div> Attendance Time: <b style= "font-size:15px;color:red" > ' + myhour + ' </b> hour <font color= "Red" > ' + othermin + ' </font> min (average <font color= "red" > ' + avghouroneday + ' </font> hour/day) </div>\ ;d iv> Reference time: ' + workdays * 8 + ' h ' + workdays + ' days ' (excluding leave and holidays, actual clocked days) </div>\ <div> leave/Out days: ' + No Workdays + ' Day </div>\ <div> working hours per day (format: Hours. Minutes): ' + workhoureveryday.join (', ') + ' </div>\ ;d iv> 8-hour days: <b style= "font-size:15px "> ' + no8h + ' </b> Day </div>\ <div>20 Point after work days: <b style=" font-size:15px "> ' + O Ver20 + ' </b> days </div>\ <div>21 point after work days: <b style= "font-size:15px" > ' + over21 + ' </b> Day &L T;/div>\ <div>22 Point after work days: <b style= "font-size:15px" > ' + over22 + ' </b> Day </div>\ &L T;div>23 Point after work days: <b style= "font-size:15px" > ' + over23 + ' </b> day </div>\ </div> ' var alect
  EST = 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 (' ctl0 0_cphmain_calendarac ') && window.parent.frames[' Main '].document.getelementbyid (' Ctl00_upmaster ').
        Style.display = = ' None ') {clearinterval (inter);
      MyDate ();
  }, 500);
}, False); } bindbtnclick ();

Code Description: Monitor Attendance Query button Click event, attendance information after loading completed, the implementation of my JS method.

The second step is to develop the Chrome extension program

Reference: http://open.chrome.360.cn/extension_dev/content_scripts.html (Query Manifest.json content_scripts node for each property description)

Manifest.json is a must, the final content is as follows:

{
 "manifest_version": 2,
  "name": "Extension name", 
 "version": "0.1.0", 
 "description": "Plugin description",
 " Icons ': {"Icon.png"},
 "content_scripts": [
  {
   "all_frames": True,
   "matches": ["http://*"],
   "JS": ["Haha.js"],
   "run_at": "Document_end"
  }
 ]
}

In addition, a icon.png picture is placed in the same directory so that all files are ready and the directory is as follows:

Open the developer mode of the Chrome extender list ..., enter the parent directory where the top three files are located in the Extender root directory.

Click "Package Extender".

Description: If you click the button for a long time does not reflect, can be your chrome does not allow Third-party non-certified extender, the solution is, click on the Chrome shortcut right key properties of the target input box appended after Enable-easy-off-store-extension-install ", pay attention to the preceding spaces.

And then try the above steps on the line.

The third step is to prevent the chrome screen from unofficial extender setup

Chrome will prompt you to pause the unofficial extender, which prompts you every time it starts, annoying.

Find information: http://www.itechzero.com/prevent-chrome-shielding-unofficial-extensions-tutorial.html (Prevent the Chrome Mask Unofficial extender tutorial)

According to the above information, you can easily solve this problem.

　　

At this point, the Extender is complete and the results are as follows: