Описание идеи
Реализуем собственный статусный светофор в браузере. Для этого напишем расширение для Google Chrome — это достаточно просто, и браузер потихоньку становится самым популярным.
Светофор будет обращаться по указанному URL и иметь 3 цвета для отображения состояния:
1. Зеленый — URL возвращает «1». Проблем не обнаружено.
2. Оранжевый — статусное URL не доступно.
3. Красный — URL возвращает «0». Есть проблемы, обратите внимание.
Также нам опционально понадобится web-страничка, доступная по URL, на которой будут выводиться текущие описания проблем или любая дополнительная информация.
Реализация
За словом — дело.
Создадим пустую папку для нашего расширения. Нам понадобится 3 иконки 16×16 разных цветов, назовем их 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. Все файлы из примера доступны тут.
ссылка на оригинал статьи http://habrahabr.ru/post/171505/
Добавить комментарий