👩‍🏫 🍅 🧜🏼 Creamos una extensión de navegador que verifica los resultados del examen. 👩🏿 👨🏽‍🚀 😶

Como cualquier otro graduado, me preocupan los exámenes. Demasiado depende de los puntos recibidos en el USO, por lo que ahora es difícil pensar en otra cosa. Para no actualizar el sitio check.ege.edu.ru cada dos minutos, decidí escribir una extensión que lo haga por mí y, al mismo tiempo, enviar notificaciones si se verificó uno de los exámenes.

La tarea no es muy difícil, pero hay un momento desagradable. El sitio en el que se publican los resultados requiere que se vuelva a llenar la información sobre el participante, cada vez que se cierra el navegador. Esto no es muy conveniente, así que tuve que improvisar un poco. Se observó que toda la información necesaria se almacena en cookies, por lo que puede guardarlas y actualizarlas cuando sea necesario, sin tener que ingresar los datos nuevamente. Por lo tanto, la lógica de la extensión es la siguiente:

Las extensiones para el navegador están escritas en js, emitidas usando html y css. En general, el desarrollo de la extensión no es muy diferente de la creación del sitio. Por lo general, cualquier extensión tiene el siguiente "esqueleto":

Manifest.json

Este archivo almacena información básica: versión, nombre, descripción, archivos conectados, 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

El código en este archivo se iniciará inmediatamente después de abrir el navegador. Aquí es donde se ubicará la lógica principal de nuestra extensión.

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

Este archivo almacena el diseño de la ventana emergente, que se abre al hacer clic en el icono de extensión. En nuestro caso, esta ventana mostrará una pequeña tabla con los resultados del 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>

En el encabezado, incluimos el archivo popup.js, que se ejecutará cada vez que se haga clic en el icono de la extensión. Aquí están sus contenidos:

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, todo el código ocupa menos de 200 líneas. Espero que esta extensión sea útil no solo para mí. En cualquier caso, durante el desarrollo adquirí experiencia que me ayudará en el futuro.
Aquí está el enlace a la página de extensión en la tienda de Chrome

Creamos una extensión de navegador que verifica los resultados del examen.

Manifest.json

Background.js

Popup.html

More articles: