Я уже с 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, для этого:
- Заходим в Настройки->Инструменты->Расширения
- Включаем галочку «Режим разработчика»
- Жмем «Загрузить распакованное расширение» и указываем нашу папку
В списке расширений должно появиться наше — я специально не создавал большую иконку, оставив это вашей фантазии :-)
Если все прошло без ошибок, у нас должен появиться оранжевый кружок рядом с адресной строкой браузера. Нажимаем правую кнопку->Настройки, заполняем URL-статуса (напоминаю, что он должен возвращать 1 или что-то другое). Нажимаем сохранить, и, вуаля, через 5 секунд кружочек должен стать зеленым или красным.
При щелчке на него появится всплывающее окно, и тут вы опять можете проявить свою фантазию при создании загружаемой сюда web-странички. К примеру, это может быть описание проблемы и ссылка на более подробную информацию.
Вот такой вот дешевый светофор!
P.S. Все файлы из примера доступны тут.
Автор: arvitaly
