कल मैंने खुद से यह सवाल पूछा था: मैं Google क्रोम में अपनी प्रोफ़ाइल को कैसे सुरक्षित कर सकता हूं और आम तौर पर इसमें संग्रहीत सभी डेटा? थोड़ा सा Google, मुझे एक्सटेंशन के एक समूह (जैसे
यह ) से लिंक मिला, जो आपको ब्राउज़र और उसके व्यक्तिगत प्रोफाइल पर एक पासवर्ड सेट करने की अनुमति देता है (यदि आप जानते हैं कि क्रोम मल्टी-प्रोफाइल मोड में कैसे काम करता है) तो यह तार्किक है। मैंने उन्हें स्थापित करना और तुरंत बग्स के लिए परीक्षण करना शुरू कर दिया। और जैसा कि यह निकला, उनमें से कोई भी मल्टी-प्रोफाइल मोड में पर्याप्त रूप से काम नहीं करना चाहता है। वास्तव में सोच के बिना, मैंने अपना खुद का विस्तार लिखने का फैसला किया और उसी समय Google क्रोम एपीआई का पता लगाया।
थोड़ा दस्तावेज पढ़ने और समझने के बाद कि एक्सटेंशन कैसे काम करता है, मुझे काम करना पड़ा।
एक्सटेंशन लिखने का सिद्धांत
कुछ लोगों को लगता है कि सामान्य लोगों की पहुंच से परे विदेशों में विस्तार कुछ है। वास्तव में, इसे लिखने के लिए, बस एक नोटपैड जिसमें यह सब लिखना है और एक ब्राउज़र जिसमें परीक्षण करना है कि क्या लिखा है, पर्याप्त है। इसलिए, क्रोम के लिए किसी भी एक्सटेंशन में निम्नलिखित घटक होते हैं:
- मैनिफेस्ट.जॉन मैनिफ़ेस्ट फ़ाइल, जो एप्लिकेशन की जानकारी रिकॉर्ड करती है;
- एक्सटेंशन में उपयोग की जाने वाली अन्य फाइलें: यह html- पृष्ठ, स्क्रिप्ट, चित्र आदि हो सकती हैं।
समाप्त काम शुरू करने के लिए, आपको बस डेवलपर मोड में
एक्सटेंशन के
पेज पर अपनी रचना को अपलोड करना होगा।
तो, चलो काम करने के लिए जाओ!
एक मैनिफ़ेस्ट फ़ाइल लिखना
मेनिफ़ेस्ट फ़ाइल प्रोजेक्ट के रूट फ़ोल्डर में संग्रहीत है और जैसा कि आप पहले से ही समझ चुके हैं, JSON प्रारूप में सेट किया गया डेटा है। मैनिफेस्टो के प्रकटन पर विचार करें, और उसके बाद मैं प्रत्येक आइटम का अधिक विस्तार से वर्णन करूंगा।
{ "name": "Profile Guard", "description": "Google Chrome profile protection by password", "version": "0.1", "permissions": [ "tabs" ], "background_page": "background.html", "icons": { "48":"images/bigicon.jpg" }, "browser_action": { "default_title": "Profile Guard", "default_icon": "images/icon.png", "popup": "popup.html" } }
और अब, क्रम में:
- नाम , विवरण और संस्करण - विस्तार नाम ही, इसका संक्षिप्त विवरण और संस्करण संख्या;
- अनुमतियाँ - कुछ कार्यों को करने के लिए अतिरिक्त एक्सटेंशन अधिकारों के साथ एक सरणी। यहाँ और पढ़ें इस स्थिति में, विस्तार खुले टैब और ब्राउज़र विंडो के बारे में जान सकता है;
- background_page - मुख्य पृष्ठ जो ब्राउज़र शुरू होने और पृष्ठभूमि में काम करता है;
- प्रतीक - विभिन्न आकारों के प्रतीक का एक सेट;
- Browser_action - टूलबार पर बटन का विवरण। default_title - एक बटन पर मँडराते समय पाठ, एक बटन पर default_icon - आइकन, पॉपअप - html-पेज जो एक क्लिक के बाद पॉपअप में खुलता है;
इन मापदंडों के अलावा, प्रकट फ़ाइल में कई अन्य हो सकते हैं।
पृष्ठभूमि पृष्ठ
बैकग्राउंड पेज यह जांच करेगा कि क्या पासवर्ड सेट है और ब्राउजर खोलने पर उससे निवेदन करें या एक निश्चित प्रोफाइल के साथ विंडो बनाएं। मेरे द्वारा परीक्षण किए गए एक्सटेंशन से मेरा अंतर यह है कि यह बहु-प्रोफ़ाइल मोड में पर्याप्त या कम काम करता है। हमारी प्रोफ़ाइल का पासवर्ड लोकलस्टोरेज ['प्रोफाइल_पासवर्ड'] में संग्रहीत किया जाएगा।
लोकलस्टोरेज एक ऐसी सरणी है जिसमें एक्सटेंशन इस डेटा तक पहुंचने वाले कुछ अन्य एक्सटेंशन के बारे में चिंता किए बिना, अपने स्वयं के कुछ डेटा को स्टोर कर सकता है। प्रत्येक एक्सटेंशन और प्रोफ़ाइल के लिए, यह एक अलग चर है, इसलिए आप अलग-अलग प्रोफाइल पर अलग-अलग पासवर्ड सेट कर सकते हैं।
<html> <head> <title>Profile Guard background page</title> </head> <body onload="pass();"> <script type="text/javascript"> function pass(){ chrome.windows.getAll(function(wins){ if(wins.length==1){ if(localStorage["profile_password"]){ var pass = prompt("Please enter password:",""); if(pass!=localStorage["profile_password"]){ alert("Access denied!"); chrome.windows.getCurrent(function (window){chrome.windows.remove(window.id)}); } } } }); } chrome.windows.onCreated.addListener(function(window){ pass(); }); </script> </body> </html>
पासवर्ड सेट करें और बदलें
हम पॉपअप
popup.html में खुलने वाले पेज पर पासवर्ड सेट और बदल सकते हैं। प्रारंभ में, पासवर्ड सेट नहीं है और सेट किया जा सकता है। बाद में इसे बदला या पूरी तरह से हटाया जा सकता है। संक्षेप में, प्रवेश करने के लिए पासवर्ड के साथ सभी प्रकार की जोड़तोड़। मैं फ़ाइल के स्रोत को बिगाड़ने वाले में धकेलता हूं, मैं विशेष रूप से कुछ भी नहीं समझाऊंगा, मेरी राय में सब कुछ स्पष्ट है।
popup.html फ़ाइल <html> <head> <title>Profile Guard background page</title> <style> body { font-family: sans-serif; background: #f5f5f5; color: #666E79; width: 250px; } div.form { background: white; border: solid 1px #e8e8e8; border-radius: 5px; } h1 { margin:0; padding: 0; font-size: 20px; text-align: center; line-height: 40px; } h2 { margin: 0 10px; padding: 0; font-size: 14px; line-height: 30px; } button { border:solid 1px #5E697C; background: URL(images/button.jpg); color: white; font-size: 13px; line-height: 22px; margin: 10px auto 15px; display: block; border-radius: 4px; cursor: pointer; font-weight: bolder; text-shadow: rgba(0,0,0,0.2) -1px -1px 0px; padding: 1 10px; } button:hover { background: URL(images/hover.jpg); } .newbutton { margin: 15px 0; } .field { padding: 5px 15px; text-align:right; } label { color: #989898; font-weight: bolder; font-size: 12px; float:left; line-height: 25px; } input { width: 135px; text-align:left; } </style> <script> function view(){ if(!localStorage["profile_password"]){ elnewbutton.style.display = "block"; elnewpass.style.display = "none"; elchpass.style.display = "none"; } else { elnewbutton.style.display = "none"; elnewpass.style.display = "none"; elchpass.style.display = "block"; } } function newpass(){ if(!localStorage["profile_password"]){ elnewpass.style.display = "block"; elnewbutton.style.display = "none"; } } function newset(){ if(!localStorage["profile_password"]){ var pass = npass.value; var conf = nconf.value; if(pass){ if(pass!=conf){ alert("Passwords don't match!"); npass.value = ""; nconf.value = ""; } else { localStorage["profile_password"] = pass; view(); alert("Password successfully changed"); } } } } function chset(){ if(localStorage["profile_password"]){ var old = cold.value; var pass = cpass.value; var conf = cconf.value; if(old!=localStorage["profile_password"]){ alert("Old password is entered incorrectly"); cold.value = ""; } else { if(pass){ if(pass!=conf){ cpass.value = ""; cconf.value = ""; alert("Passwords do not match!"); } else { localStorage["profile_password"] = pass; view(); alert("Password successfully changed"); } } } } } function claerpass(){ if(localStorage["profile_password"]){ var old = cold.value; if(!old){ alert("Enter old password first!"); } else { if(old!=localStorage["profile_password"]){ alert("Old password is entered incorrectly"); cold.value = ""; } else { localStorage["profile_password"] = ""; view(); alert("Password successfully deleted"); } } } } </script> </head> <body onload="view();"> <div class="form"> <h1>Profile Guard</h1> </div> <div class="newbutton" id="newbutton"> <button id="elnewbutton" onclick="newpass();">Set new password</button> </div> <div class="newpass form" id="elnewpass" style="display:block;"> <h2>Set password</h2> <div class="field"> <label>Password</label> <input type="password" id="npass" /> </div> <div class="field"> <label>Confirm</label> <input type="password" id="nconf" /> </div> <button id="elnewset" onclick="newset();">Set new password</button> </div> <div class="newpass form" id="elchpass" style="display:block;"> <h2>Password change</h2> <div class="field"> <label>Old password</label> <input type="password" id="cold" /> </div> <div class="field"> <label>Password</label> <input type="password" id="cpass" /> </div> <div class="field"> <label>Confirm</label> <input type="password" id="cconf" /> </div> <button id="elchset" onclick="chset();">Change password</button> <button id="elclear" onclick="claerpass();">Delete password</button> </div> </body> </html>
अंतिम चरण
अंत में, हमें अपनी रचना को पैक करने की आवश्यकता है, इसे एक्सटेंशन पेज पर "एक्सटेंशन पैकेजिंग" बटन पर क्लिक करके किया जा सकता है। आउटपुट पर हमारे एक्सटेंशन के साथ फ़ोल्डर को निर्दिष्ट करते हुए, हमें दो फाइलें मिलती हैं:
.crx - एक्सटेंशन के साथ फाइल,
.rem - गुप्त कुंजी के साथ फाइल। इसके अलावा, आप इसे
क्रोम वेबस्टोर पर अपलोड करके अपनी रचना लोगों के साथ साझा कर सकते हैं, लेकिन इसके लिए आपको Google को $ 5 का शुल्क देना होगा (लेकिन पंजीकरण करते समय यह पहली बार है) कृपया कड़ाई से न्याय न करें, क्योंकि यह मेरा पहला विस्तार है। आप स्रोत
लिंक डाउनलोड कर सकते हैं। मैं पैक्ड एक्सटेंशन नहीं देता, क्योंकि क्रोम में आप केवल वेबस्टोर से एक्सटेंशन इंस्टॉल कर सकते हैं।
अपनी टिप्पणी और कीड़े लिखें।