We do the extension for the browser, checking the results of the exam
I, like any other graduate, worry about exams. Too much depends on the points obtained at the Unified State Exam, therefore it is now difficult to think about something else. In order not to update the site check.ege.edu.ru every two minutes, I decided to write an extension that will do it for me, and at the same time send notifications in case some of the exams are checked.
The task is not very difficult, but there is one unpleasant moment. The site on which the results are published requires that information about the participant, each time you close the browser, is filled in again. This is not very convenient, so I had to improvise a bit. It was noted that all the necessary information is stored in cookies, so you can simply save and update them when needed, without having to enter data again. Thus, the logic of the expansion work is as follows:
Browser extensions are written in js, formatted using html and css. In general, the development of the extension is not much different from the creation of the site. Usually any extension has the following "skeleton":
Manifest.json
This file contains basic information: version, name, description, include files, and so on.
')
manifest.json
{ "manifest_version": 2, "name": " ", "description": " check.ege.edu.ru ", "version": "1.0.0", "icons": {"128": "icon.png"}, "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }, "background": { "scripts": ["jquery.js","background.js"], // "persistent": false // Event Pages, , , . alarms setInterval. }, "permissions": [ // "cookies", "tabs", "alarms", "notifications", "storage", "http://check.ege.edu.ru/*", "https://check.ege.edu.ru/*" ], "web_accessible_resources": [ // "icon.png" ] } Background.js
The code in this file will be launched immediately after opening the browser. This is where the main logic of our expansion will be located.
background.js
chrome.alarms.create("1min", { // delayInMinutes: 1, periodInMinutes: 1, }); chrome.alarms.onAlarm.addListener(function(alarm) { if (alarm.name === "1min") { chrome.cookies.getAll({"url": 'http://check.ege.edu.ru'}, function(cookie) { if (cookie.length){ chrome.storage.local.set({'sCookie': cookie}); // cookie , checkUpdates(); // }else{ chrome.storage.local.get(['sCookie'], function(result) { if (!jQuery.isEmptyObject(result)){ // , chrome.cookies.set({ "url": 'http://check.ege.edu.ru', "name": result["sCookie"][0]["name"], "value": result["sCookie"][0]["value"] }, function(){ checkUpdates(); // }); } }); } }); } }); function checkUpdates(){ var myInit = { method: 'GET', credentials: 'include'}; fetch('http://check.ege.edu.ru/api/exam', myInit).then(r => r.text()).then(result => { // var examRes = {}; jQuery.parseJSON(result)['Result']['Exams'].forEach(function(element) { examRes[element['Subject']] = element['TestMark']; // examRes }); chrome.storage.local.get(['examRes'], function(result) { for (var element in result['examRes']){ if (result['examRes'][element] != examRes[element]){ showNotification(element, examRes[element]); chrome.storage.local.set({'examRes': examRes}); // , , // // } } }); }) } function showNotification(subName, mark){ // , chrome.notifications.create('reminder', { type: 'basic', iconUrl: 'icon.png', title: ' !', message: subName + ' - ' + mark }); } Popup.html
This file contains the popup window markup, which opens when you click on the extension icon. In our case, this window will display a small table with the results of the USE.
popup.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> </title> <script type="text/javascript" src="jquery.js"></script> <script src="popup.js"></script> <style> <!-- --> </style> </head> <body> <table border="1" id="mainTable"> <caption><b> </b></caption> <tr> <th></th> <th> </th> </tr> </table> </body> </html> In the title, we connected the popup.js file, which will be executed each time the extension icon is clicked. Here are its contents:
popup.js
chrome.cookies.getAll({"url": 'http://check.ege.edu.ru'}, function(cookie) { // , cookie if (cookie.length){ chrome.storage.local.set({'sCookie': cookie}); createTable(); // , }else{ chrome.storage.local.get(['sCookie'], function(result) { // , , cookie if (!jQuery.isEmptyObject(result)){ chrome.cookies.set({ "url": 'http://check.ege.edu.ru', "name": result["sCookie"][0]["name"], "value": result["sCookie"][0]["value"] }, function(){ // , createTable(); }); }else{ // , check.ege.edu.ru chrome.tabs.create({url : "http://check.ege.edu.ru"}); } }); } }); function createTable(){ var myInit = { method: 'GET', credentials: 'include'}; fetch('http://check.ege.edu.ru/api/exam', myInit).then(r => r.text()).then(result => { // jQuery.parseJSON(result)['Result']['Exams'].forEach(function(element) { if (element['HasResult'] == false){ // , " " $("#mainTable").append('<tr><td>'+element['Subject']+'</td><td> </td></tr>'); }else{ // , $("#mainTable").append('<tr><td>'+element['Subject']+'</td><td>'+element['TestMark']+'</td></tr>'); } }); }) } Total, all code occupies less than 200 lines. I hope that this extension is useful not only for me. In any case, during the development I gained experience that will help me in the future.
Here is the link to the extension page in the chrome store.
Source: https://habr.com/ru/post/455361/
All Articles