🎰 🤕 🙃 Kami membuat ekstensi browser yang memeriksa hasil ujian 🈴 🎧 😏

Seperti lulusan lainnya, saya khawatir tentang ujian. Terlalu banyak tergantung pada poin yang diterima di USE, jadi sekarang sulit untuk memikirkan hal lain. Agar tidak memperbarui situs check.ege.edu.ru setiap dua menit, saya memutuskan untuk menulis ekstensi yang akan melakukan ini untuk saya, dan pada saat yang sama mengirim pemberitahuan jika salah satu ujian diperiksa.

Tugasnya tidak terlalu sulit, tetapi ada satu momen yang tidak menyenangkan. Situs tempat hasil dipublikasikan mensyaratkan bahwa informasi tentang peserta, setiap kali browser ditutup, harus diisi ulang. Ini sangat tidak nyaman, jadi saya harus berimprovisasi sedikit. Terlihat bahwa semua informasi yang diperlukan disimpan dalam cookie, sehingga Anda dapat menyimpan dan memperbaruinya saat diperlukan, tanpa harus memasukkan data lagi. Dengan demikian, logika ekstensi adalah sebagai berikut:

Ekstensi untuk peramban ditulis dalam js, dikeluarkan menggunakan html dan css. Secara umum, pengembangan ekstensi tidak jauh berbeda dengan pembuatan situs. Biasanya, ekstensi apa pun memiliki "kerangka" berikut:

Manifest.json

File ini menyimpan informasi dasar: versi, nama, deskripsi, file yang terhubung, dll.

manifes. 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

Kode dalam file ini akan diluncurkan segera setelah membuka browser. Di sinilah logika utama ekstensi kita akan ditemukan

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

File ini menyimpan tata letak jendela sembulan, yang terbuka ketika Anda mengklik ikon ekstensi. Dalam kasus kami, jendela ini akan menampilkan meja kecil dengan hasil ujian.

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>

Di header, kami menyertakan file popup.js, yang akan dieksekusi setiap kali ikon ekstensi diklik. Berikut isinya:

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, semua kode menempati kurang dari 200 baris. Saya harap ekstensi ini bermanfaat tidak hanya untuk saya. Bagaimanapun, selama pengembangan saya mendapatkan pengalaman yang akan membantu saya di masa depan.
Berikut ini tautan ke halaman ekstensi di toko chrome

Kami membuat ekstensi browser yang memeriksa hasil ujian

Manifest.json

Background.js

Popup.html

More articles: