Расширение для решу егэ

Делаем расширение для браузера, проверяющее результаты ЕГЭ

Я, как и любой другой выпускник, переживаю по поводу экзаменов. От баллов, полученных на ЕГЭ зависит слишком многое, поэтому сейчас трудно думать о чем то другом. Чтобы не обновлять сайт check.ege.edu.ru каждые две минуты, я решил написать расширение, которое будет делать это за меня, а заодно присылать уведомления, в случае, если какой-то из экзаменов проверили.

Задача не очень сложная, но есть один неприятный момент. Сайт, на котором публикуются результаты, требует, чтобы информация о участнике, при каждом закрытии браузера, заполнялась заново. Это очень не удобно, поэтому пришлось немного по-импровизировать. Было замечено, что вся необходимая информация хранится в файлах cookie, поэтому можно просто сохранять и обновлять их когда потребуется, без необходимости вводить данные заново. Таким образом, логика работы расширения такова:

Расширения для браузера пишутся на js, оформляются с помощью html и css. В целом, разработка расширения мало чем отличается от создания сайта. Обычно любое расширение имеет следующий «скелет»:

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

Код, находящийся в этом файле будет запущен сразу после открытия браузера. Именно здесь будет находится основная логика нашего расширения

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 окна, которое открывается при нажатии на иконку расширения. В нашем случае, в этом окне будет отображаться небольшая таблица с результатами ЕГЭ.

<!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, который будет исполняться при каждом нажатии на иконку расширения. Вот его содержимое:

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 store

ЧАСТО ЗА­ДА­ВА­Е­МЫЕ ВОПРОСЫ

Большая часть проблем будет решена, если вы отключите блокировщики рекламы, которые нарушают работоспособность скриптов сайта.
На всякий случай проверьте, сохраняется ли проблема, если использовать другой браузер. Если нет — прочтите список часто задаваемых вопросов. Если и это не помогло — задайте свой вопрос внизу страницы.

Как отключить блокировщики рекламы?
Ответ: Обычно иконка в левом верхнем углу экрана. Нажмите на него, выберите «не использовать на этом сайте» или «Отключить».

 Общие вопросы

Ответ: Размещение заданий, каталогов, решений на сторонних сайтах не разрешается. Вы можете размещать ссылки на задания, варианты и курсы, созданные в разделах «Учителю» и «Школа».

Ответ: Задать свой в группе в ВКонтакте.

Ответ: Писать в форму «Сообщить об ошибке», она есть у каждого задания.

Ответ: О копировании формул в Ворд рекомендуем связаться с Майкрософтом.

Ответ: Проверьте настройки профиля (ссылка под меню слева).

Ответ: Снимите в вашем браузере установку автозаполнения полей.

Ответ: Не заходите в течение года, удалится автоматически.

Ответ: Не предусмотрено.

Ответ: Авторизуйтесь через ВК, войдите в профиль, введите адрес электронной почты. Система автоматически объединит учетные записи.

Ответ: в профиле (ссылка под левым меню).

Ответ: Шкала ЕГЭ приведена во вкладке «Об экзамене».

Ответ: Задания основного каталога соответствуют спецификации и демонстрационным версиям экзаменов текущего года. Многие задания взяты из экзаменационных материалов предыдущих лет. Их список можно увидеть на странице «Варианты».

 Ученику

Общие вопросы

Ответ: В разделе «Моя статистика», войдя в систему под своим логином.

Ответ: Завершите тестирование. Система сама выведет решения.

Ответ: За задания, оцениваемые несколькими баллами, начислена часть баллов.

Ответ: Варианты, составленные учителем в разделе «Учителю», появятся в его списках автоматически после того, как вы решите вариант и нажмете кнопку «Сохранить».

Ответ: Не отправится.

Ответ: Продолжить решение из раздела «Моя статистика».

Что-то не работает или работает некорректно

Ответ: Вы зашли под другим логином.

Ответ: Ошибка в номере или открываете со страницы другого предмета.

 Учителю

Что-то не работает или работает некорректно

Ответ: Скорее всего, заходите под другим логином.

Ответ: Учащиеся должны сначала зарегистрироваться на портале. Вам вносить их в списки необязательно, они окажутся в списках автоматически, после того, как выполнят любую заданную им работу, созданную учителем в разделе «Учителю».

Ответ: Проверьте, в том ли разделе вы находитесь (пример: журнал по базовой математике смотрите в базовой математике).

Как удалить, восстановить, переименовать?

Ответ: Переместите в архив.

Ответ: Найти ученика на странице со списком учащихся и удалить оттуда. Из журнала пропадет автоматически.

Ответ: Открыть список помещенных в архив и нажать кнопку восстановления.

Ответ: Восстановите из архива работ и учащихся.

Ответ: Кликните по имени учащегося, переименуйте его.

Составление вариантов (работ для учащихся)

Ответ: Используйте инструкции в разделе «Учителю».

Ответ: В «параметрах теста».

Ответ: Нажать на кнопку, чтобы выбрать тему, затем на иконку у работы, чтобы присоединить её к теме.

Созданные работы, работа над ошибками

Ответ: В разделе «Учителю» можно создавать свои собственные задания, ответы на них нельзя будет найти нигде. В то же время, выполняя работу дома, ученики могут спросить совета у родственника, репетитора или одноклассника.

Ответ: В любое время в параметрах теста.

Ответ: По созданным в разделе «Учителю» работам» можно посмотреть решения, кликнув по работе и фамилии ученика.

Ответ: В классном журнале кликнуть по номеру работы, появится сводная таблица по каждому ученику и каждому заданию, и будет вычислен средний балл по каждому заданию.

Ответ: Пользуйтесь сервисом «Индивидуальный профиль учащихся» в разделе «Учителю».

Ответ: Работы над ошибками проверяются автоматически. Информация о том, что работа над ошибками сделана, отображается в «Списке созданных работ и статистика» иконкой.

Ответ: Ссылка находится на странице ученика «Моя статистика».

Группы (классы), классный журнал

Ответ: См. подробную инструкцию в разделе «Учителю».

Ответ: Создать группу на странице «Учащиеся и группы учащихся», в списке учащихся найти нужного и, кликнув по иконке, перенести в созданную группу.

Ответ: Он создается автоматически.

Ответ: Восстановите ученика из архива работ и учащихся.

Ответ: Найти ученика на странице со списком учащихся и удалить оттуда. Из журнала пропадет автоматически.

Ответ: скройте отображение ненужных работ на странице «Список созданных работ и статистика по работам».

Ответ: Проверьте, не зашли ли вы под другим логином.

Ответ: Нажмите кнопку «Перевести» у названия группы (класса) на странице «Управление учащимися и группами учащихся».

Расширение для портала Решу ЕГЭ, которое убирает надоедливые уведомления в правом нижнем углуРасширение для портала Решу ЕГЭ, которое убирает надоедливые уведомления в правом нижнем углу

Reviews of Расширение РешуЕГЭ extension

Similar extension