क्रोम एक्सटेंशन कैसे बनाएं

'हमारे वर्तमान जीवन के भीतर, हम अपने मनोरंजन और खोज उद्देश्यों के लिए सोशल मीडिया ऐप्स और Google खोज इंजन का उपयोग करने के लिए अधिक उत्सुक हैं, यानी, 'Google' खोज इंजन के माध्यम से कुछ शैक्षिक विषय पर शोध करें और सामान्य ज्ञान भी प्राप्त करें। कुछ खोजने के लिए Google खोज इंजन का उपयोग करने के लिए, हमारे पास हमारे मोबाइल फोन, लैपटॉप या पर्सनल कंप्यूटर पर पहले से ही कुछ ब्राउज़र होना चाहिए। आज की सदी के सबसे अधिक उपयोग किए जाने वाले और कुशल ब्राउज़रों में से एक 'Google क्रोम' ब्राउज़र है जो विस्तार की उपयोगिता के साथ-साथ कई अच्छी कार्यक्षमताओं के साथ आया है। 'एक्सटेंशन' किसी भी ब्राउज़र में वेबसाइटों और विभिन्न कार्यों को प्रतिबंधित या अनुमति देने के लिए पाया जाने वाला प्लगइन है। ये एक्सटेंशन आमतौर पर इनबिल्ट नहीं आते हैं; जब भी आवश्यक हो आपको प्रत्येक एक्सटेंशन को अपने ब्राउज़र में अलग से जोड़ना होगा। यदि आप तकनीक के थोड़े विशेषज्ञ हैं, तो आप कुछ चरणों में एक्सटेंशन बनाने और जोड़ने के लिए मेनिफेस्ट JSON फ़ाइलों के उपयोग के बारे में जान सकते हैं। इसलिए, यह लेख Google क्रोम ब्राउज़र पर एक नया एक्सटेंशन बनाने के लिए उन सभी चरणों को कवर करेगा।

एक्सटेंशन बनाने की विधि पर एक नज़र डालने से पहले, आपको यह सुनिश्चित करना होगा कि आपका Google क्रोम ब्राउज़र पहले ही लॉन्च हो चुका है और 'Google' खोज इंजन में कोई पृष्ठभूमि नहीं है। आप देख सकते हैं कि नीचे संलग्न छवि में खोज इंजन 'Google.com' के लिए कोई पृष्ठभूमि नहीं है, यानी केवल सफेद पृष्ठभूमि।

एक्सटेंशन फ़ोल्डर जोड़ें

अपने विंडोज सिस्टम के ऐप्स से अपना विजुअल स्टूडियो कोड टूल जल्दी से खोलें। विजुअल स्टूडियो कोड को ठीक से खोलने और इसे हमारे उपयोग के लिए सक्षम करने में 1 मिनट तक का समय लग सकता है। इसे ठीक से लॉन्च करने और उपयोग के लिए तैयार होने के बाद, हमने नीचे दिखाए गए शीर्ष टास्कबार पर 'फ़ाइल' मेनू सूची के माध्यम से पहले से जेनरेट किए गए फ़ोल्डर 'एक्सटेंशन' को जोड़ा है। 'एक्सटेंशन' फ़ोल्डर बनाने के बाद, हमने इसमें 'इमेज' नाम का एक और फ़ोल्डर जोड़ा है जिसमें ब्राउज़र पर एक्सटेंशन के लिए एक आइकन के रूप में उपयोग की जाने वाली छवियां शामिल हैं। इसके साथ ही, हमने एक नया एक्सटेंशन बनाने और उसे ब्राउज़र में जोड़ने के लिए एक “manifest.json” फ़ाइल और “script.js” नाम की एक जावास्क्रिप्ट फ़ाइल जोड़ी है। 'Google' की पृष्ठभूमि को बदलने के लिए एक एक्सटेंशन बनाने और उसका उपयोग करने के लिए JSON में काम करना शुरू करने के लिए मेनिफेस्ट.json फ़ाइल पर डबल क्लिक करके शुरू करते हैं।

मेनिफेस्ट फ़ाइल बनाएँ

मेनिफेस्ट.जेसन फ़ाइल में, आपको नीचे दिखाया गया 'JSON' कोड जोड़ना चाहिए। यह कोड हमारे Google क्रोम ब्राउज़र में एक एक्सटेंशन बनाने और जोड़ने के लिए वास्तविक कॉन्फ़िगरेशन स्क्रिप्ट है। यह JSON कोड वैरिएबल मेनिफेस्ट संस्करण के लिए '2' के रूप में आरंभीकरण के साथ शुरू किया गया है और एक एक्सटेंशन का नाम बनाया जाना है, अर्थात, 'पृष्ठभूमि बदलें'। इसके बाद, हमने 'विवरण' चर के भीतर अपने विस्तार के लिए संक्षिप्त विवरण जोड़ा।

इसके साथ ही, हमने एक्सटेंशन के संस्करण को '1.0' के रूप में जोड़ा है। 'एक्सटेंशन' के लिए सभी बुनियादी कॉन्फ़िगरेशन बनाए जाने के बाद, हमें एक्सटेंशन के लिए आइकन के रूप में उपयोग किए जाने वाले छवि आइकन में पथ जोड़ने की आवश्यकता है। चर 'ब्राउज़र' को Google क्रोम ब्राउज़र के शीर्ष टास्कबार के लिए एक्सटेंशन आइकन सेट करने के लिए परिभाषित किया गया है, यानी, जहां सभी एक्सटेंशन विशेष या सभी साइटों के लिए भविष्य में उपयोग के लिए सक्षम करने के बाद प्रदर्शित होते हैं। इसके बाद हमने अलग-अलग साइज की तीन इमेज फाइल्स में पाथ ऐड किया है ताकि ब्राउजर हर बार अलग-अलग फाइल्स का इस्तेमाल कर सके।

इसके साथ ही, Google क्रोम के शीर्ष टास्कबार से 'एक्सटेंशन' आइकन पर क्लिक करने के बाद प्रदर्शित होने वाली छवि को प्रदर्शित करने के लिए 'पेज_एक्शन' चर का उपयोग किया गया है। छवियों के लिए प्रत्येक पुनः लोड पर आइकन के रूप में उपयोग किए जाने के लिए इसके तीन अलग-अलग पथ मानों के साथ, इसके भीतर 'Default_icon' चर का उपयोग किया गया है। इस उद्देश्य के लिए तीन अलग-अलग छवि फ़ाइलों का उपयोग किया जाता है। अंतिम content_scripts वेरिएबल इसमें कुल 2 नए वेरिएबल लेता है, यानी मैच और CSS। 'मिलान' चर में इस नए एक्सटेंशन के उपयोग के बाद वेबसाइट को बदलने का पथ शामिल है। इसके साथ ही, वेरिएबल 'CSS' में एक्सटेंशन के लिए आवेदन करने के बाद Google.com की स्टाइलिंग के लिए उपयोग की जाने वाली CSS फ़ाइल का नाम होता है, यानी एक्सटेंशन को सक्षम करने पर प्रत्येक पुनः लोड के बाद Google.com को स्टाइल करना। अब जब यह कोड पूर्ण हो गया है और उपयोग के लिए तैयार है, तो बस इसे जल्दी से सहेजें और 'main.css' फ़ाइल की ओर बढ़ें।

Main.css CSS फ़ाइल के भीतर, हम अपने मेनिफेस्ट फ़ाइल एक्सटेंशन को बनाने के लिए स्टाइल जोड़ रहे हैं। स्टाइल को html 'बॉडी' टैग का उपयोग करके लागू किया जाएगा, अर्थात, मैनिफ़ेस्ट फ़ाइल के पूर्ण 'बॉडी' क्षेत्र पर लागू किया जाएगा। हम खोज इंजन से एक छवि फ़ाइल के 'यूआरएल' का उपयोग करके Google.com के लिए नई पृष्ठभूमि सेट कर रहे हैं। अब, किसी भी चीज़ से पहले अपना कोड सेव करें।

आवश्यक कोड, यानी, मेनिफेस्ट.जेसन और मेन.सीएसएस फ़ाइल को पूरा करने के बाद, हमें नए टैब में यूआरएल क्रोम: // एक्सटेंशन के माध्यम से Google क्रोम ब्राउज़र पर एक्सटेंशन उपयोगिता को खोलना होगा। एक्सटेंशन उपयोगिता क्षेत्र खोला गया है। इसके डेवलपर मोड से, आपको अपने स्थानीय सिस्टम से अनपैक्ड 'एक्सटेंशन' फ़ोल्डर को लोड करने की आवश्यकता है ताकि इसे नीचे की छवि में प्रदर्शित 'लोड अनपैक्ड' बटन के माध्यम से एक एक्सटेंशन बनाया जा सके। जैसा कि दिखाया गया है, एक्सटेंशन को क्रोम ब्राउज़र में प्रभावशाली ढंग से जोड़ा गया है। इसे पूरी तरह से काम करने के लिए त्रुटियों को दूर करें।

'एक्सटेंशन' आइकन से, टास्कबार पर प्रदर्शित करने के लिए 'पृष्ठभूमि बदलें' एक्सटेंशन चुनें, यानी 'सी' आइकन एक्सटेंशन।

Google.com को पुनः लोड करने के बाद, इस एक्सटेंशन का उपयोग करके इसकी पृष्ठभूमि अपडेट हो गई।

निष्कर्ष

विंडोज सिस्टम में ब्राउज़र के उपयोग की व्याख्या से शुरू करते हुए, हमने किसी भी ब्राउज़र में एक्सटेंशन के महत्व पर भी चर्चा की है। एक्सटेंशन की संक्षिप्त व्याख्या के बाद, हमने Google क्रोम ब्राउज़र के लिए एक एक्सटेंशन बनाने के लिए मेनिफेस्ट JSON फ़ाइल का उपयोग करने की विधि और 'Google.com' खोज इंजन के लिए पृष्ठभूमि बदलने के लिए इसका उपयोग करने का तरीका समझाया है। Google क्रोम पर एक्सटेंशन लोड करने के बाद, हम इसकी पृष्ठभूमि बदलने के लिए Google.com पर इसका उपयोग कर रहे हैं।