🧔🏾 ❌ 🥡 我们制作了一个浏览器扩展程序，用于检查考试结果 👨🏿‍🤝‍👨🏾 👩🏾‍🤝‍👨🏻 👪

像其他毕业生一样，我担心考试。太多的内容取决于USE的观点，因此现在很难考虑其他事情。为了不每两分钟更新一次站点check.ege.edu.ru ，我决定编写一个扩展程序来为我完成此操作，同时如果其中一项考试被检查，则发送通知。

任务不是很困难，但是有一个不愉快的时刻。发布结果的网站要求每次关闭浏览器时都要重新填写有关参与者的信息。这不是很方便，所以我不得不即兴创作。注意到所有必要信息都存储在cookie中，因此您可以在需要时简单地保存和更新它们，而无需再次输入数据。因此，扩展的逻辑如下：

浏览器扩展使用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: