📴 🚶🏾 ✡️ ब्राउज़र ट्रैफिक लाइट से सस्ता है ♓️ 🌦️ 👶🏾

25 फरवरी के बाद से, मैं इन ट्रैफिक लाइट मालिकों से ईर्ष्या करता हूं। सामान्य तौर पर, निगरानी का दृश्य मेरे लिए हमेशा मेल या एसएमएस द्वारा सूचनाओं की तुलना में अधिक दिलचस्प रहा है। लेकिन यह सब सिस्टम की स्थिति के साथ एक अलग पृष्ठ पर आ गया, जिसे सत्यापन के लिए जाना था। लेकिन पोस्ट और इस अहसास को पढ़ने के बाद कि ट्रैफिक लाइट बहुत ज्यादा फालतू उपकरण है, एक दिलचस्प विचार आया - ब्राउज़र में ट्रैफिक लाइट को लागू करने के लिए! दरअसल, अब लगभग हर कुछ मिनट में हम एक या दूसरे ब्राउज़र को खोलते हैं।

कट के तहत विवरण।

विचार का विवरण

हम ब्राउज़र में अपनी स्वयं की स्थिति ट्रैफ़िक लाइट लागू करते हैं। ऐसा करने के लिए, हम Google Chrome के लिए एक एक्सटेंशन लिखेंगे - यह काफी सरल है, और ब्राउज़र धीरे-धीरे सबसे लोकप्रिय हो रहा है ।

ट्रैफ़िक लाइट निर्दिष्ट URL पर जाएगी और स्थिति प्रदर्शित करने के लिए 3 रंग होंगे:

1. हरा - URL "1" देता है। कोई समस्या नहीं मिली।
2. नारंगी - स्थिति URL उपलब्ध नहीं है।
3. लाल - URL "0" देता है। समस्याएं हैं, कृपया ध्यान दें।

इसके अलावा, हमें वैकल्पिक रूप से 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 की पृष्ठभूमि के मतदान के लिए एक स्क्रिप्ट बनाते हैं, मैंने XMLHTTPRequest अनुरोधों को सरल बनाने के लिए JQuery का उपयोग किया है, इसलिए हम पृष्ठभूमि 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);

त्रुटियों को संभालने के लिए jQuery के अजाक्स ऑब्जेक्ट को कॉन्फ़िगर करें, अगर URL की स्थिति उपलब्ध नहीं है - एक्सटेंशन आइकन को नारंगी और फिर से पोल पर सेट करें।

मतदान का समय 5 सेकंड + URL प्रतिक्रिया समय।

यदि URL हमें 1 लौटाता है, तो आइकन को हरे रंग में सेट करें, अन्यथा - लाल।

हम स्थानीय संग्रहण एक्सटेंशन लोकलस्टोरेज ['url_status'] से URL स्टेटस तक रास्ता बनाते हैं। एक्सटेंशन स्थापित करते समय, यह खाली होगा - इसलिए, हम हमेशा एक नारंगी सर्कल देखेंगे।

सामान्य तौर पर, यह विस्तार की मुख्य कार्यक्षमता है, और यह पहले से ही इसका उपयोग करने के लिए पर्याप्त है। लेकिन हम इसे थोड़ा और सुधारेंगे।

सेटिंग्स पेज

 <!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 सेकंड के बाद, सर्कल को हरा या लाल होना चाहिए।

जब आप उस पर क्लिक करते हैं, तो एक पॉप-अप विंडो दिखाई देगी, और यहां लोड किए गए वेब पेज बनाते समय आप फिर से अपनी कल्पना दिखा सकते हैं। उदाहरण के लिए, यह समस्या का विवरण और अधिक विस्तृत जानकारी का लिंक हो सकता है।

यहाँ इतनी सस्ती ट्रैफिक लाइट है!

PS उदाहरण से सभी फाइलें यहां उपलब्ध हैं ।

ब्राउज़र ट्रैफिक लाइट से सस्ता है

विचार का विवरण

कार्यान्वयन

स्थिति पोल स्क्रिप्ट

सेटिंग्स पेज

पॉप अप विंडो

More articles: