Пишем расширение для браузера Chrome
Ну не написал об этом только ленивый 😉
Задача: написать «Оповещалку» о проблемах в сети и серверах, которая тянет данные с Zabbix.
Первым делом создаем файл manifest.json:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
{ "name": "Уведомления Zabbix от НОС", "version": "1.0.0.1", "manifest_version": 2, "icons": { "32": "z_red.png" }, "browser_action": { "default_title": "Уведомления Zabbix от НОС", "default_icon" : "z_red.png", "default_popup": "popup.html" }, "background": { "scripts": ["jquery.min.js","main.js"], "persistent": false }, "permissions": [ "https://*/*", "http://*/*", "alarms", "notifications" ], "content_security_policy": "script-src 'self'; object-src 'self'", "web_accessible_resources": [ "z_red.png", "jquery.min.js", "main.js", "notification.html", "popup_main.js", "config.js", "notify.mp3", "notify.wav", "notify.ogg" ] } |
В нем прописываем все файлы которые будут использоваться нашим расширение, ресурсы куда оно будет ходить и какие манипуляции может совершать.
В background перечисляются скрипты, которые будут автоматически запускаться при старте браузера (ну и собственно расширения).
defalut_popup — скрипт который будет запускаться при нажатии на иконку расширения.
А далее.. ну собственно обычное программирование на JavaScript + HTML. Привожу исходные коды каждого файла.. Чуть ниже расскажу как это расширение установить..
main.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
/* * (с) 2011-2015 Грибов Павел * http://грибовы.рф * * Если исходный код найден в сети - значит лицензия GPL v.3 * * В противном случае - код собственность ГК Яртелесервис, Мультистрим, Телесервис, Телесервис плюс * */ $(document).ready(function() { function zab_getCookie(name) { var matches = document.cookie.match(new RegExp( "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)" )); return matches ? decodeURIComponent(matches[1]) : undefined; } document.addEventListener('DOMContentLoaded', function () { var links = document.getElementsByTagName("a"); for (var i = 0; i < links.length; i++) { (function () { var ln = links[i]; var location = ln.href; ln.onclick = function () { chrome.tabs.create({active: true, url: location}); }; })(); } }); gc=""; setInterval(function() { cq="";//обнуляем потенциальные куки.. $("#zabbix_mod_win").html("На текущий момент проблем в работе сети не наблюдается.."); $.get('http://wedqwe.wedqwed.ru/getcurdashboard.php?login='+localStorage["noc_name"]).done( function(data){ obj_for_load=JSON.parse(data); ht=""; $("#zabbix_mod_win").html(ht); zx=0; for (i in obj_for_load) { ht=ht+"Группа:"+obj_for_load[i]["group_name"]+",хост:"+obj_for_load[i]["hosterr"]+",поясн.:"+obj_for_load[i]["description"]+"\n"; cq=cq+obj_for_load[i]["triggerid"]; zx++; }; $("#zabbix_mod_win").html(ht); if (zx=0){$("#zabbix_mod_win").html("На текущий момент проблем в работе сети не наблюдается..");ht="";} if (gc!=cq){ var audio = new Audio('/notify.mp3'); audio.play(); var notification = new Notification('Внимание!', { //icon: 'z_red.png', type: 'basic', icon :'https://nwdwedwe.ru/photos/04124415101812002452.jpg', body: "У НОС есть новые сообщения для вас!\n", }); notification.onclick = function() { window.open('/popup.html',"Статус Zabbix","menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes") }; localStorage["bd"]=ht; }; gc=cq; console.log(data); }); }, 8000); }); |
Что делаем: скрипт висит фоново и с перидичностью 8 секунд проверяет «А есть ли что новенькое на сервере?» Если есть — выпехивает уведомление в трей браузера. При нажатии на уведомление: открывает страницу с подробным описанием проблем.
popup.htm
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <!-- (с) 2011-2015 Грибов Павел http://грибовы.рф Если исходный код найден в сети - значит лицензия GPL v.3 В противном случае - код собственность ГК Яртелесервис, Мультистрим, Телесервис, Телесервис плюс --> <html> <head> <title>Оповещения Zabbix для НОС</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="jquery.min.js"></script> <script src="popup_main.js"></script> </head> <body> <div id="zabbix_mod_win"></div> </body> </html> |
popup_main.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
/* * (с) 2011-2015 Грибов Павел * http://грибовы.рф * * Если исходный код найден в сети - значит лицензия GPL v.3 * * В противном случае - код собственность ГК Яртелесервис, Мультистрим, Телесервис, Телесервис плюс * */ document.addEventListener('DOMContentLoaded', function () { var links = document.getElementsByTagName("a"); for (var i = 0; i < links.length; i++) { (function () { var ln = links[i]; var location = ln.href; ln.onclick = function () { chrome.tabs.create({active: true, url: location}); }; })(); } }); function getproblem(){ $.get('http://цйувцу.йцувйцу.ru/getcurdashboard.php?login='+localStorage["noc_name"]).done( function(data){ obj_for_load=JSON.parse(data); ht="<table class='table table-striped table-hover table-condensed'>"; ht=ht+"<thead><tr><th>Группа</th><th>Хост</th><th>Проблема</th><th>Время</th><th>Приоритет</th><th>Комментарий</th><tr></thead><tbody>"; $("#zabbix_mod_win").html(""); for (i in obj_for_load) { pd="success"; if (obj_for_load[i]["prinum"]=="0"){pd="success";}; if (obj_for_load[i]["prinum"]=="1"){pd="info";}; if (obj_for_load[i]["prinum"]=="2"){pd="warning";}; if (obj_for_load[i]["prinum"]=="3"){pd="error";}; if (obj_for_load[i]["prinum"]=="4"){pd="error";}; if (obj_for_load[i]["prinum"]=="5"){pd="error";}; ht=ht+"<tr class="+pd+"><td>"+obj_for_load[i]["group_name"]+"</td><td>"+obj_for_load[i]["hosterr"]+"</td><td>"+obj_for_load[i]["description"]+"</td><td>"+obj_for_load[i]["lastchange"]+"</td><td>"+obj_for_load[i]["priority"]+"</td><td>"+obj_for_load[i]["comment"]+"</td></tr>"; }; ht=ht+"</tbody></table>"; ht=ht+'<a target="_blank" href="https://цйувцйу.цувйцув.ru">Перейти в НОС</a> <a href="/config.html">Настроить фильтры</a>'; $("#zabbix_mod_win").html(ht); }); }; $(document).ready(function() { getproblem(); }); |
Эти два скрипта: при нажатии на иконку расширения выводим табличку с текущими проблемами.
Код конечно не полный.. Но общий принцип понятен.