Browser is cheaper than traffic lights
Since February 25, I envy these owners of traffic lights. In general, monitoring visualization has always been more interesting to me than email or SMS notifications. But it all came down to a separate page with the state of the system, which had to go to check. But after reading the post and realizing that the traffic light is too extravagant tool, an interesting idea appeared - to implement the traffic light in the browser! After all, now almost every few minutes we open the browser for this or that.
Details under the cut.
We implement our own status traffic light in the browser. To do this, we write an extension for Google Chrome - it is quite simple, and the browser is slowly becoming the most popular .
The traffic light will address the specified URL and have 3 colors to display the status:
')
1. Green - URL returns “1”. No problems detected.
2. Orange - Status URL is not available.
3. Red - URL returns “0”. There are problems, pay attention.
Also, we will optionally need a web page accessible via a URL, where current problem descriptions or any additional information will be displayed.
Behind a word is a deed.
Create an empty folder for our extension. We need 3 16x16 icons in different colors, let's call them icon_green.png, icon_red.png, icon_orange.png. Next, create a manifest file: we need permission to access the sites, for simplicity, I gave the extension access to all sites.
We create a script for background polling of the status URL, I used jQuery to simplify XMLHTTPRequest requests, so we include in the background 2 script in order: JQuery and our polling script. Also set the initial icon - orange, set the settings page and pop-up window.
Configure the jQuery ajax-object for error handling, if the URL status is not available - set the orange extension icon and query it again.
Poll timeout 5 seconds + URL response time.
If the URL returns us 1 - we put the icon green, otherwise - red.
The path to the URL status is taken from the local storage of the extension localStorage ['url_status']. When installing an extension, it will be empty - so we will always see an orange circle.
In general, this is the main functionality of the extension, and this is already enough to use it. But we will improve it a little more.
Since, by default, the browser restricts the execution of scripts inside the html extension page - we put the logic into a separate j.js file and enable it.
Here we have 2 functions - when opening we fill our form from the local storage, at the touch of a button - accordingly, we save the settings.
The popup window contains only the frame into which the URL specified in the settings is loaded. Here we also put the logic in a separate js-file.
Our extension is ready! It remains to download it in Google Chrome, for this:
Ours should appear in the list of extensions - I didn’t intentionally create a large icon, leaving it to your imagination :-)
If everything went without errors, we should have an orange circle next to the address bar of the browser. Press the right button-> Settings, fill in the URL status (I remind you that it should return 1 or something else). Click save, and, voila, after 5 seconds, the circle should turn green or red.
When you click on it, a pop-up window will appear, and here you can again express your imagination when creating a web page loaded here. For example, it may be a description of the problem and a link to more detailed information.
Here is such a cheap traffic light!
PS All files from the example are available here .
Details under the cut.
Description of the idea
We implement our own status traffic light in the browser. To do this, we write an extension for Google Chrome - it is quite simple, and the browser is slowly becoming the most popular .
The traffic light will address the specified URL and have 3 colors to display the status:
')
1. Green - URL returns “1”. No problems detected.
2. Orange - Status URL is not available.
3. Red - URL returns “0”. There are problems, pay attention.
Also, we will optionally need a web page accessible via a URL, where current problem descriptions or any additional information will be displayed.
Implementation
Behind a word is a deed.
Create an empty folder for our extension. We need 3 16x16 icons in different colors, let's call them icon_green.png, icon_red.png, icon_orange.png. Next, create a manifest file: we need permission to access the sites, for simplicity, I gave the extension access to all sites.
{ "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" } } We create a script for background polling of the status URL, I used jQuery to simplify XMLHTTPRequest requests, so we include in the background 2 script in order: JQuery and our polling script. Also set the initial icon - orange, set the settings page and pop-up window.
Status polling script
$(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); Configure the jQuery ajax-object for error handling, if the URL status is not available - set the orange extension icon and query it again.
Poll timeout 5 seconds + URL response time.
If the URL returns us 1 - we put the icon green, otherwise - red.
The path to the URL status is taken from the local storage of the extension localStorage ['url_status']. When installing an extension, it will be empty - so we will always see an orange circle.
In general, this is the main functionality of the extension, and this is already enough to use it. But we will improve it a little more.
Settings page
<!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> Since, by default, the browser restricts the execution of scripts inside the html extension page - we put the logic into a separate j.js file and enable it.
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(); Here we have 2 functions - when opening we fill our form from the local storage, at the touch of a button - accordingly, we save the settings.
Pop-up window
<!DOCTYPE html> <html> <head> </head> <body> <iframe style="width: 500px;height:400px;" frameborder="no" scrolling="no"></iframe> <script src="popup.js"></script> </body> </html> The popup window contains only the frame into which the URL specified in the settings is loaded. Here we also put the logic in a separate js-file.
if (localStorage['url_window']) { document.getElementsByTagName('iframe')[0].setAttribute('src',localStorage['url_window']); } Our extension is ready! It remains to download it in Google Chrome, for this:
- Go to Settings-> Tools-> Extensions
- Turn on tick "Developer Mode"
- Click “Download unpacked extension” and specify our folder.
Ours should appear in the list of extensions - I didn’t intentionally create a large icon, leaving it to your imagination :-)
If everything went without errors, we should have an orange circle next to the address bar of the browser. Press the right button-> Settings, fill in the URL status (I remind you that it should return 1 or something else). Click save, and, voila, after 5 seconds, the circle should turn green or red.
When you click on it, a pop-up window will appear, and here you can again express your imagination when creating a web page loaded here. For example, it may be a description of the problem and a link to more detailed information.
Here is such a cheap traffic light!
PS All files from the example are available here .
Source: https://habr.com/ru/post/171505/
All Articles