🐇 🧚🏻 🖼️ Nous faisons une extension de navigateur qui vérifie les résultats de l'examen ✌️ ☀️ ✌🏻

Comme tout autre diplômé, je m'inquiète des examens. Trop dépend des points reçus à l'USE, donc maintenant il est difficile de penser à autre chose. Afin de ne pas mettre à jour le site check.ege.edu.ru toutes les deux minutes, j'ai décidé d'écrire une extension qui le fera pour moi, et en même temps d'envoyer des notifications si l'un des examens était coché.

La tâche n'est pas très difficile, mais il y a un moment désagréable. Le site sur lequel les résultats sont publiés nécessite que les informations sur le participant, à chaque fermeture du navigateur, soient renseignées. Ce n'est pas très pratique, j'ai donc dû improviser un peu. Il a été remarqué que toutes les informations nécessaires sont stockées dans des cookies, vous pouvez donc simplement les enregistrer et les mettre à jour si nécessaire, sans avoir à saisir à nouveau les données. Ainsi, la logique de l'extension est la suivante:

Les extensions pour le navigateur sont écrites en js, émises en utilisant html et css. En général, le développement de l'extension n'est pas très différent de la création du site. Habituellement, toute extension a le "squelette" suivant:

Manifest.json

Ce fichier stocke des informations de base: version, nom, description, fichiers connectés, etc.

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

Le code de ce fichier sera lancé immédiatement après l'ouverture du navigateur. C'est là que se situera la logique principale de notre extension

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

Ce fichier stocke la disposition de la fenêtre contextuelle, qui s'ouvre lorsque vous cliquez sur l'icône d'extension. Dans notre cas, cette fenêtre affichera un petit tableau avec les résultats de l'examen.

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>

Dans l'en-tête, nous avons inclus le fichier popup.js, qui sera exécuté à chaque fois que l'icône d'extension est cliquée. Voici son contenu:

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

Au total, tous les codes occupent moins de 200 lignes. J'espère que cette extension me sera utile non seulement. En tout cas, au cours du développement, j'ai acquis une expérience qui m'aidera à l'avenir.
Voici le lien vers la page d'extension dans le Chrome Store

Nous faisons une extension de navigateur qui vérifie les résultats de l'examen

Manifest.json

Background.js

Popup.html

More articles: