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

Я уже с 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. Все файлы из примера доступны тут.
Поделиться публикацией
Похожие публикации
Ой, у вас баннер убежал!

Ну. И что?
Реклама
Комментарии 22
  • +9
    Быть может стоит добавить немного скриншотов?
    • 0
      Обязательно добавлю, как только нарисую нормальный выделяющийся красный цвет, а то сейчас какой то мутный.
      • +1
        Добавил немного скриншотов.
      • 0
        красный — 1
        может желтый?
        зеленый — 0

        и почему я не удивлен увидев на гитхабе это:
        Ïóòü ê URL ñòàòóñà
        Ïóòü ê URL âñïëûâàþùåãî îêíà
        • 0
          Желтый на сером фоне хрома мне не нравится, но вы можете использовать его. К примеру, можно красный сделать мигающим. Гитхаб, да, спасибо — поправил.
          • 0
            Ну можно цвет фона белым сделать…
            • 0
              Да можно конечно, только на белом фоне желтый мне еще больше не нравится) И вообще, пост об идее, вот когда продавать начну расширение — обязательно проведу графическую аналитику на высшем уровне!
        • +2
          Мне непонятен выбор цифры «0» как статуса ошибки. По традиции «0» символизирует успех.

          $ cat /usr/include/sysexits.h | grep EX_OK
          #define EX_OK		0	/* successful termination */
          
          • 0
            По аналогии с недотипизированными языками — все приводится к числу, и true — равно 1.

            А так как нас в задаче интересуют только 2 состояния — то и выбор очевиден. А вообще в примере идет проверка только на 1, а все остальное — считается 0 (что конечно не очень правильно :-)
            • +1
              Традиционно 0 означает отсутствие ошибок. Другие цифры — код ошибки.

              Отсутствие ответа или некорректный ответ — это не 0. 0 — это значение типа integer.

              Пожалуй, прежде чем изобретать свое решение, можно ознакомиться с существующими. Традиция с кодом ошибки 0 «Нет ошибок» пришла от Bash, C++, Unix Way…
              • –2
                Не понимаю, почему вы призываете меня использовать традиции c++? И это не традиция, а жестокая необходимость в этих языках. И я уже написал, что в моем примере всего 2 состояния — мне не нужны коды ошибок. Поэтому я отошлю вас к еще более древней «традиции» — к биту и двоичной системе счисления. И всяко человечнее и понятнее, что 1 это горит, горит значит работает, а потухло — значит все сломалось(
                • 0
                  И всяко человечнее и понятнее, что 1 это горит, горит значит работает, а потухло — значит все сломалось(

                  «Человечнее» и «понятнее» — очень субъективные параметры. Человеки разные бывают, некоторые вон до сих пор еще считают, что в километре не 1024 метра…
                  • 0
                    пока два состояния, добавите желтый цвет, на пример, или таймер на месте светофора будет появляться — не надо будет ничего менять, все будет логично
                    • 0
                      Есть необходимое и достаточное решение. Если мне понадобятся другие варианты настройки — я реализую их.

                      Если говорить в контексте данной задачи, то логичным будет в любом случае возвращать JSON и превращать его в объект JavaScript, чем пользоваться конечным набором целых чисел. Таким образом решится и проблема передачи строк (а вдруг нам захочется текста!) и других форматов.

                      Для каждого решения — свой подход и свой инструмент и, ребята, не используйте, пожалуйста, традиции c++ в JavaScript, очень вас прошу.
                      • 0
                        Тогда, если есть строка — должен быть объект — код ошибки, сообщение ошибки, сообщение/объект результата, не считаю правильным в любом из языков состояния передавать в строках
                        • 0
                          Т.е. если у вас есть клиентское приложение, вы будете хранить несколько тысяч строк ошибок на клиенте в браузере? А если еще есть локализация, то умножаем на N-языков. И все это в браузере каждого пользователя? А при изменении одной буквы — синхронизировать все это?
                          • 0
                            Зачем? Есть коды состояний, далее на них вешайте локали сколько угодно. Если приложение отдается с сервера — можно и нужно отдавать определенную локаль
            • +3
              Как автор билд-светофора, отчаянно плюсую!
            • +2
              Нарисовать вам значков, что ли? Чтобы на светофор были похожи.
              • 0
                Вот такие значки нарисовал:
                image
              • 0
                И какой-нибудь календарь на скриншотах, как в первом посте про светофор :-)

                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                Самое читаемое