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

Я уже с 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. Все файлы из примера доступны тут.
Share post

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 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
                Спасибо вам за идею )
              • UFO just landed and posted this here
                • UFO just landed and posted this here
                  0
                  И какой-нибудь календарь на скриншотах, как в первом посте про светофор :-)

                  Only users with full accounts can post comments. Log in, please.