◀️ ✖️ 👨🏽‍🏭 Wir machen eine Browser-Erweiterung, die die Ergebnisse der Prüfung überprüft 🖐️ 🧘🏻 🤣

Wie jeder andere Absolvent mache ich mir Sorgen um Prüfungen. Zu viel hängt von den Punkten ab, die bei der NUTZUNG erhalten wurden. Daher ist es jetzt schwierig, über etwas anderes nachzudenken. Um die Site check.ege.edu.ru nicht alle zwei Minuten zu aktualisieren, habe ich beschlossen, eine Erweiterung zu schreiben, die dies für mich erledigt , und gleichzeitig Benachrichtigungen zu senden, wenn eine der Prüfungen überprüft wurde.

Die Aufgabe ist nicht sehr schwierig, aber es gibt einen unangenehmen Moment. Die Website, auf der die Ergebnisse veröffentlicht werden, erfordert, dass die Informationen über den Teilnehmer bei jedem Schließen des Browsers erneut ausgefüllt werden. Das ist nicht sehr praktisch, deshalb musste ich ein bisschen improvisieren. Es wurde festgestellt, dass alle erforderlichen Informationen in Cookies gespeichert sind, sodass Sie sie bei Bedarf einfach speichern und aktualisieren können, ohne die Daten erneut eingeben zu müssen. Somit ist die Logik der Erweiterung wie folgt:

Erweiterungen für den Browser werden in js geschrieben und mit HTML und CSS ausgegeben. Im Allgemeinen unterscheidet sich die Entwicklung der Erweiterung nicht wesentlich von der Erstellung der Site. Normalerweise hat jede Erweiterung das folgende "Skelett":

Manifest.json

Diese Datei speichert grundlegende Informationen: Version, Name, Beschreibung, verbundene Dateien usw.

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

Der Code in dieser Datei wird sofort nach dem Öffnen des Browsers gestartet. Hier befindet sich die Hauptlogik unserer Erweiterung

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

Diese Datei speichert das Layout des Popup-Fensters, das geöffnet wird, wenn Sie auf das Erweiterungssymbol klicken. In unserem Fall wird in diesem Fenster eine kleine Tabelle mit den Ergebnissen der Prüfung angezeigt.

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 die Kopfzeile haben wir die Datei popup.js aufgenommen, die jedes Mal ausgeführt wird, wenn auf das Erweiterungssymbol geklickt wird. Hier sind die Inhalte:

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>'); } }); }) }

Insgesamt belegt der gesamte Code weniger als 200 Zeilen. Ich hoffe, dass diese Erweiterung nicht nur für mich nützlich ist. Auf jeden Fall habe ich während der Entwicklung Erfahrungen gesammelt, die mir in Zukunft helfen werden.
Hier ist der Link zur Erweiterungsseite im Chrome Store

Wir machen eine Browser-Erweiterung, die die Ergebnisse der Prüfung überprüft

Manifest.json

Background.js

Popup.html

More articles: