🖐🏾 ✊🏻 👨🏾‍⚕️ Criamos uma extensão do navegador que verifica os resultados do exame 😸 👨🏼‍🏫 🤲

Como qualquer outro graduado, eu me preocupo com os exames. Demasiada depende dos pontos recebidos no USE, então agora é difícil pensar em outra coisa. Para não atualizar o site check.ege.edu.ru a cada dois minutos, decidi escrever uma extensão que fará isso por mim e, ao mesmo tempo, enviar notificações se um dos exames foi verificado.

A tarefa não é muito difícil, mas há um momento desagradável. O site no qual os resultados são publicados exige que as informações sobre o participante, sempre que o navegador for fechado, sejam preenchidas novamente. Isso não é muito conveniente, então tive que improvisar um pouco. Percebeu-se que todas as informações necessárias são armazenadas em cookies, para que você possa simplesmente salvá-las e atualizá-las quando necessário, sem precisar inserir os dados novamente. Assim, a lógica da extensão é a seguinte:

As extensões para o navegador são escritas em js, emitidas usando html e css. Em geral, o desenvolvimento da extensão não é muito diferente da criação do site. Normalmente, qualquer extensão tem o seguinte "esqueleto":

Manifest.json

Este arquivo armazena informações básicas: versão, nome, descrição, arquivos 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

O código neste arquivo será iniciado imediatamente após abrir o navegador. É aqui que a lógica principal da nossa extensão estará localizada

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 arquivo armazena o layout da janela pop-up, que é aberta quando você clica no ícone de extensão. No nosso caso, essa janela exibirá uma pequena tabela com os resultados do exame.

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>

No cabeçalho, incluímos o arquivo popup.js, que será executado sempre que o ícone da extensão for clicado. Aqui está o seu conteúdo:

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 o código ocupa menos de 200 linhas. Espero que esta extensão seja útil não apenas para mim. De qualquer forma, durante o desenvolvimento, adquiri experiência que me ajudará no futuro.
Aqui está o link para a página de extensão na loja do Chrome

Criamos uma extensão do navegador que verifica os resultados do exame

Manifest.json

Background.js

Popup.html

More articles: