👨🏼‍🎨 🧘🏿 🎓 نجعل امتداد المتصفح الذي يتحقق نتائج الامتحان 🉑 👩‍🎨 ☝🏿

مثل أي خريج آخر ، أنا قلق بشأن الامتحانات. يعتمد الكثير على النقاط التي يتم تلقيها في USE ، لذلك من الصعب الآن التفكير في شيء آخر. لكي لا أقوم بتحديث الموقع check.ege.edu.ru كل دقيقتين ، قررت أن أكتب ملحقًا سيقوم بذلك لي ، وفي نفس الوقت أرسل إعلامات إذا تم فحص أحد الاختبارات.

المهمة ليست صعبة للغاية ، ولكن هناك لحظة واحدة غير سارة. يتطلب الموقع الذي يتم فيه نشر النتائج إعادة ملء المعلومات الخاصة بالمشارك ، في كل مرة يتم إغلاق المتصفح. هذه ليست مريحة للغاية ، لذلك اضطررت إلى الارتجال قليلاً. لقد لوحظ أن جميع المعلومات الضرورية مخزنة في ملفات تعريف الارتباط ، بحيث يمكنك ببساطة حفظها وتحديثها عند الضرورة ، دون الحاجة إلى إدخال البيانات مرة أخرى. وبالتالي ، فإن منطق التمديد هو كما يلي:

تتم كتابة ملحقات المتصفح في js ، تصدر باستخدام html و css. بشكل عام ، تطوير الامتداد لا يختلف كثيرًا عن إنشاء الموقع. عادةً ما يكون لأي امتداد "الهيكل العظمي" التالي:

الملف manifest.json

يخزن هذا الملف المعلومات الأساسية: الإصدار ، الاسم ، الوصف ، الملفات المتصلة ، إلخ.

الملف 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

سيتم إطلاق الكود الموجود في هذا الملف فور فتح المتصفح. هذا هو المكان الذي يوجد فيه المنطق الرئيسي لتمديدنا

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

يخزن هذا الملف تخطيط النافذة المنبثقة ، والذي يفتح عند النقر على أيقونة الامتداد. في حالتنا ، ستعرض هذه النافذة جدولًا صغيرًا به نتائج الامتحان.

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>

في الرأس ، قمنا بتضمين ملف popup.js ، والذي سيتم تنفيذه في كل مرة يتم فيها النقر على أيقونة الامتداد. وهنا محتوياته:

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

المجموع ، تحتل جميع الشفرات أقل من 200 سطر. آمل أن يكون هذا التمديد مفيدًا ليس فقط بالنسبة لي. على أي حال ، خلال عملية التطوير ، اكتسبت خبرة ستساعدني في المستقبل.
إليك الرابط الخاص بصفحة الامتداد في متجر Chrome

نجعل امتداد المتصفح الذي يتحقق نتائج الامتحان

الملف manifest.json

Background.js

Popup.html

More articles: