Google Chrome Extended Program Development Note, chrome Program Development

Google Chrome Extended Program Development Note, chrome Program Development

According to the company's regulations, the work is flexible for eight hours a month. So we usually don't come on time. If something happens, we will go back to work earlier. Therefore, one month's working time may not be enough, but the company's attendance calendar is as follows:

Except for leave and legal holidays, the display of other styles is the same. It is inconvenient to estimate the approximate working hours of the month each time. Later, I saw someone in the company using a Chrome extension program that could calculate a month's work time, But I still didn't think I 'd see what I wanted to see, in addition to the accumulated working hours of each month, I also want to see: average working hours per day, working hours per day, and days after (dinner can be reimbursed after, haha ......) Days after (Reimbursement of taxi fare )...... So I decided to write one by myself.

Step 1: I first wrote a JS method, and then copied and pasted it on the Console of the F12 developer tool to run it.

The company's OA system does not reference the jQuery library, so my first thought was to dynamically reference the jQuery class library, as shown below:

Copy codeThe Code is 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 a problem: one is $ occupied, the other is that the HR system uses iframe nesting, and there is also frame nesting, the structure is very complex. The code running on the console is run on the top layer, and the chrome extension plug-in is run on the internal frame in the later stage. It may not be directly used after the JS here. Although $ is occupied, you can use jQuery. noConflict ();, but the jquery Library and the JS inventory of the original system are in the order of calling, and the jQuery object cannot be accessed in the internal frame. Finally, I decided to abandon jQuery and use native JavaScript.

The JS Code is as follows:

/** Author: Bright rain on * 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 = paipaiparent.frames{'main'{.doc ument. getElementById ('ctl00 _ cphmain_calendarac'); var listAC = mymain. getElementsBy ClassName ('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 for leave var workDays = 0; // actual days for work var workHourEveryday = []; var no8h = 0; // days below 8 hours var over20 = 0; // days after var over21 = 0; // Number of days after var over22 = 0; // Number of days after var over23 = 0; // Number of days after for (var I = 0; I <timeList. length; I ++) {var time = timeList [I]; if (time. remark! = 'None') {noworkDays ++; continue;} if (time. timeSpan = 'brushless cart records') 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 (th IsMin/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 ); // total hours of work this month var otherMin = totalMin % 60; // the number of minutes out of the hour part 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 working duration var html = '<div class = "alectest" style = "background: # cbebfb; padding: 7px;" >\< div> attendance time: <B style = "font-size: 15px; color: red "> '+ myHour +' </B> hour <font color =" red "> '+ otherMin +' </font> minutes (average <font color =" red"> '+ avgHourOneDay +' </font> hour/day) </div> \ <div> reference time: '+ workDays * 8 +' hour ['+ workDays +' Day] (excluding leave and holidays, the actual number of days with a punch record exists) </div> \ <div> Leave/days out: '+ noworkDays +' day </div> \ <div> daily working time (Format: hour. minutes): '+ workHourEveryday. join (',') + '</div> \ <div> days below 8 hours: <B style = "font-size: 15px "> '+ no8h +' </B> days </div> \ <div> days after: <B style =" font-size: 15px "> '+ over20 +' </B> days </div> \ <div> days after: <B style =" font-size: 15px "> '+ over21 +' </B> days </div> \ <div> days after: <B style =" font-size: 15px "> '+ over22 +' </B> days </div> \ <div> days after: <B style =" font-size: 15px "> '+ over23 +' </B> day </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 () {Your parent.frames{'main'your .doc ument. getElementById ('ctl00 _ cphtop_btnquery '). addEventListener ('click', function () {var inter = setInterval (function () {if (%%w.parent.frames%'main'%.doc ument. getElementById ('ctl00 _ cphmain_calendarac') & amp; your parent.frames{'main'}.doc ument. getElementById ('ctl00 _ upmaster '). style. display = 'None') {clearInterval (inter); mydate () ;}, 500) ;}, false) ;} bindBtnClick ();

Code Description: Listen to the click Event of the attendance query button. After loading the attendance information, execute my JS method.

Step 2: Develop Chrome extensions

Reference: http://open.chrome.360.cn/extension_dev/content_scripts.html (query attributes for manifest. json's content_scripts node descriptions)

Manifest. json is required. The final content is as follows:

{"Manifest_version": 2, "name": "Extension Name", "version": "0.1.0", "description": "plug-in description", "icons ": {"48": "icon.png"}, "content_scripts": [{"all_frames": true, "matches": ["http: // *"], "js ": ["haha. js "]," run_at ":" document_end "}]}

In addition, put an icon.png image under the same directory. At this point, all files have been prepared. The directory is as follows:

Open the developer mode of Chrome's extended program list, and enter the parent directory of the above three files in the extension program root directory.

Click package extension.

Note: If you click this button for a long time, it may be that your chrome does not allow third-party unauthenticated extensions. The solution is, right-click the chrome shortcut, and append "enable-easy-off-store-extension-install" to the target input box of "properties". Pay attention to the leading space.

Then try the above steps.

Step 3: prevent Chrome from blocking unofficial extension settings

Chrome will prompt you to suspend unofficial extensions. It will prompt you every time you start it, which is annoying.

Find materials: http://www.itechzero.com/prevent-chrome-shielding-unofficial-extensions-tutorial.html (preventing Chrome from blocking unofficial extensions tutorial)

According to the above information, this problem can be easily solved.

　　

At this point, all the Extensible programs have been completed, and the results are shown as follows:

Articles you may be interested in:

• Json formatting/compression tool Chrome Extension
• Chrome extended learning right-click menu implementation code
• An error is prompted when JavaScript events are dynamically bound to the Chrome extension page.
• Summary of Chrome Web App development