Браузер дешевле светофора

в 9:05, , рубрики: chrome extensions, Google Chrome, светофор, тестирование, метки: , ,

Я уже с 25 февраля завидую этим владельцам светофора. В целом визуализация мониторинга всегда была для меня интереснее, чем уведомления по почте или смс. Но все сводилось к отдельной страничке с состоянием системы, на которую нужно было заходить для проверки. А вот после прочтения поста и осознания, что светофор слишком экстравагантный инструмент, появилась интересная мысль — реализовать светофор в браузере! Ведь сейчас мы практически каждые несколько минут открываем браузер за тем или иным. Подробности под катом.

Описание идеи

Реализуем собственный статусный светофор в браузере. Для этого напишем расширение для Google Chrome — это достаточно просто, и браузер потихоньку становится самым популярным.

Светофор будет обращаться по указанному URL и иметь 3 цвета для отображения состояния:

1. Зеленый — URL возвращает «1». Проблем не обнаружено.
2. Оранжевый — статусное URL не доступно.
3. Красный — URL возвращает «0». Есть проблемы, обратите внимание.

Также нам опционально понадобится web-страничка, доступная по URL, на которой будут выводиться текущие описания проблем или любая дополнительная информация.

Реализация

За словом — дело.
Создадим пустую папку для нашего расширения. Нам понадобится 3 иконки 16x16 разных цветов, назовем их icon_green.png, icon_red.png, icon_orange.png. Далее создадим файл манифеста: нам понадобится разрешение доступа к сайтам, для упрощения я дал расширению доступ ко всем сайтам.

{
  "manifest_version": 2,
  "name": "Светофор.DevilStudio",
  "version": "1.0",
  "permissions": [ "http://*/*"],
  "background": {
    "scripts": ["jquery.js","background.js"],
    "persistent": false
  },
    "options_page": "options.html",
    "browser_action": {
        "default_popup": "popup.html",
        "default_icon": "icon_orange.png"
    }  
}

Создаем скрипт для фонового опроса статусного URL, я использовал JQuery для упрощения XMLHTTPRequest запросов, поэтому подключаем в в background 2 скрипта по порядку: JQuery и наш опрашивающий скрипт. Также устанавливаем начальную иконку — оранжевой, задаем страничку настроек и всплывающее окно.

Скрипт опроса статуса

$(document).ajaxError(function() {
  chrome.browserAction.setIcon({path: 'icon_orange.png'}); 
  id = setTimeout(status,5000); 
});
function status()
{
    clearTimeout(id);
    $.post(localStorage['url_status'],{},function(data){
        
       if ( data == 1 )
       {
            chrome.browserAction.setIcon({path: 'icon_green.png'});        
       } 
       else
       {
            chrome.browserAction.setIcon({path: 'icon_red.png'});
       }
       id = setTimeout(status,5000);
    });
};
var id = setTimeout(status,5000);

Настраиваем ajax-объект JQuery для обработки ошибок, если URL-статуса недоступно — задаем иконку расширения оранжевой и опрашиваем снова.

Таймаут опроса 5 секунд + время ответа URL.

Если URL вовзращает нам 1 — ставим иконку зеленой, иначе — красной.

Путь к URL-статуса берем из локального хранилища расширения localStorage['url_status']. При установке расширения он будет пустым — поэтому мы будем видеть всегда оранжевый кружочек.

В целом это основной функционал расширения, и этого уже достаточно для его использования. Но улучшим его еще немного.

Страница настроек

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        
        <p>Путь к URL статуса: <input id="url_status" type="text" /></p>
        <p>Путь к URL всплывающего окна: <input id="url_window" type="text" /></p>
        <p><input type="submit" value="Сохранить" id="b" /></p>
        <script src="j.js"></script>   
    </body>
</html>

Так как по умолчанию браузер ограничивает исполнение скриптов внутри html-страницы расширения — вынесем логику в отдельный файл j.js и подключим его.

function restore()
{
    document.getElementById('url_status').value = localStorage['url_status'];
    document.getElementById('url_window').value = localStorage['url_window'];
}
function save()
{
    localStorage['url_status'] = document.getElementById('url_status').value;
    localStorage['url_window'] = document.getElementById('url_window').value;
    
}
document.getElementById('b').onclick=function()
{
  save();  
};
restore();

Здесь у нас 2 функции — при открытии мы заполняем нашу формочку из локального хранилища, при нажатии кнопки — соответственно, сохраняем настройки.

Всплывающее окно

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <iframe style="width: 500px;height:400px;" frameborder="no" scrolling="no"></iframe>
        <script src="popup.js"></script>
    </body>
</html>

Всплывающее окно содержит только фрейм, в который грузится указанный в настройках URL. Здесь мы так же выносим логику в отдельный js-файл.

if (localStorage['url_window'])
{
    document.getElementsByTagName('iframe')[0].setAttribute('src',localStorage['url_window']);   
}

Наше расширение готово! Осталось его загрузить в Google Chrome, для этого:

  1. Заходим в Настройки->Инструменты->Расширения
  2. Включаем галочку «Режим разработчика»
  3. Жмем «Загрузить распакованное расширение» и указываем нашу папку

В списке расширений должно появиться наше — я специально не создавал большую иконку, оставив это вашей фантазии :-)

Если все прошло без ошибок, у нас должен появиться оранжевый кружок рядом с адресной строкой браузера. Нажимаем правую кнопку->Настройки, заполняем URL-статуса (напоминаю, что он должен возвращать 1 или что-то другое). Нажимаем сохранить, и, вуаля, через 5 секунд кружочек должен стать зеленым или красным.

При щелчке на него появится всплывающее окно, и тут вы опять можете проявить свою фантазию при создании загружаемой сюда web-странички. К примеру, это может быть описание проблемы и ссылка на более подробную информацию.

Вот такой вот дешевый светофор!

P.S. Все файлы из примера доступны тут.

Автор: arvitaly

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js