क्रोम वेब एक्सटेंशन - कोई पूर्व कोडिंग अनुभव की आवश्यकता नहीं है: 6 कदम

2024 लेखक: John Day | [email protected]. अंतिम बार संशोधित: 2024-01-30 09:19

क्रोम एक्सटेंशन छोटे प्रोग्राम होते हैं जिन्हें उपयोगकर्ताओं के ब्राउज़िंग अनुभव को बेहतर बनाने के लिए बनाया गया है। क्रोम एक्सटेंशन के बारे में अधिक जानकारी के लिए https://developer.chrome.com/extensions पर जाएं।

Chrome वेब एक्सटेंशन बनाने के लिए, कोडिंग की आवश्यकता होती है, इसलिए नीचे दी गई वेबसाइट पर HTML, JavaScript और CSS की समीक्षा करना बहुत उपयोगी है:

www.w3schools.com/default.asp (w3 स्कूल संसाधनों की कोडिंग के लिए एक अच्छी वेबसाइट है)

आप नहीं जानते कि कोड कैसे करें? चिंता न करें, यह ट्यूटोरियल रास्ता तय करने में मदद करेगा।

क्रोम एक्सटेंशन की सबसे अच्छी बात यह है कि इन्हें कस्टमाइज किया जा सकता है। यह केवल एक विशिष्ट चीज नहीं है जिसे किया जा सकता है, इसलिए रचनात्मक बनें।

आपूर्ति

जिन आपूर्तियों की आवश्यकता है वे नीचे हैं:

• टेक्स्ट एडिटर वाला कंप्यूटर (मैं नोटपैड का उपयोग कर रहा हूं)
• गूगल क्रोम

और बस यही!

चरण 1: निर्देशिका बनाएं

सबसे पहले, सभी फाइलों को होल्ड करने के लिए एक फोल्डर बनाएं और इसे 'एक्सटेंशन' नाम दें। बाद में चाहें तो नाम बदला जा सकता है।

चरण 2: मेनिफेस्ट फ़ाइल बनाएं और इसे कोड करें

मेनिफेस्ट फ़ाइल एक्सटेंशन का एक बहुत ही महत्वपूर्ण हिस्सा है। यह विस्तार को बताता है कि वास्तव में क्या करना है और क्या होना है। मेनिफेस्ट फाइलें JSON में फॉर्मेट की जाती हैं। पहला कदम एक टेक्स्ट एडिटर खोलना और एक नई फाइल को 'manifest.json' के रूप में सहेजना है।

अगला नीचे दी गई स्क्रिप्ट टाइप करें:

{

"नाम": "प्रथम एक्सटेंशन", "संस्करण": "1.0", "विवरण": "मैं एक एक्सटेंशन को कोड कर सकता हूं", "manifest_version": 2, "ब्राउज़र_एक्शन": { "डिफ़ॉल्ट_शीर्षक": "पहला एक्सटेंशन" } }

मूल्यों के बाद अल्पविराम याद रखें!

इसे टाइप करने के बाद मेनिफेस्ट फाइल को सेव करें और chrome://extensions पर जाएं (इसके लिए क्रोम को ब्राउजर की तरह इस्तेमाल किया जाना चाहिए)। एक बार क्रोम: // एक्सटेंशन पर, डेवलपर मोड चालू करें। उसके बाद, 'अनपैक्ड लोड करें' बटन दबाएं और 'एक्सटेंशन' फ़ोल्डर चुनें।

ड्रम रोल बजाएं…

वाह! यह एक विस्तार है, सिवाय … अपनी तरह का उबाऊ। यह वास्तव में अभी कुछ भी नहीं करता है, लेकिन जल्द ही यह बहुत अच्छा होगा।

चरण 3: आइकॉन बनाएं और मेनिफेस्ट को अपडेट करें

एक वेबसाइट जो आइकन बनाने के लिए अच्छी तरह से काम करती है, वह है https://www.piskelapp.com/। उपयोग के लिए अन्य ड्राइंग प्रोग्राम भी उपलब्ध हैं। चिह्न वर्गाकार होने चाहिए। यह प्रोजेक्ट 16x16, 32x32, 48x48 और 128x128 आइकन का उपयोग करेगा। एक बार आइकॉन बन जाने के बाद, एक्सटेंशन फोल्डर में 'इमेज' नाम का फोल्डर बनाएं और उस फोल्डर में आइकॉन डाल दें। किसी छवि को उसके आकार के अनुसार नाम देना एक अच्छा विचार हो सकता है। उदाहरण के लिए, 'icon32.png'। नया कोड नीचे है:

{

"नाम": "प्रथम एक्सटेंशन", "संस्करण": "1.0", "विवरण": "मैं एक एक्सटेंशन को कोड कर सकता हूं", "manifest_version": 2, "ब्राउज़र_एक्शन": { "डिफ़ॉल्ट_शीर्षक": "पहला एक्सटेंशन", " default_icon": { "16": "images/icon16.png", "32": "images/icon32.png", "48": "images/icon48.png", "128": "images/icon128-p.webp

मेनिफेस्ट कोड के संदर्भ के लिए, https://developer.chrome.com/extensions/manifest पर जाएं।

चरण 4: एक पॉपअप जोड़ें

इस एक्सटेंशन में एक पॉपअप होगा। पॉपअप एक HTML (हाइपरटेक्स्ट मार्कअप लैंग्वेज) फ़ाइल है, इसलिए पहले HTML, CSS और जावास्क्रिप्ट की मूल बातें सीखना अच्छा है।

सबसे पहले, एक दस्तावेज़ को एक्सटेंशन फ़ोल्डर में 'popup.html' फ़ाइल के रूप में सहेजें।

इसके बाद, मेनिफेस्ट फ़ाइल को संपादित करके 'popup.html' दिखाने के लिए जब इसे क्लिक किया जाता है। नया कोड नीचे है:

{

"नाम": "प्रथम एक्सटेंशन", "संस्करण": "1.0", "विवरण": "मैं एक एक्सटेंशन को कोड कर सकता हूं", "manifest_version": 2, "ब्राउज़र_एक्शन": { "डिफ़ॉल्ट_शीर्षक": "पहला एक्सटेंशन", " default_icon": { "16": "images/icon16.png", "32": "images/icon32.png", "48": "images/icon48.png", "128": "images/icon128-p.webp

अल्पविराम मत भूलना!

अब, यदि निम्न HTML कोड को popup.html में जोड़ा जाता है, तो क्लिक करने पर यह 'Hello World' दिखाएगा।

नमस्ते दुनिया

चरण 5: इसे अच्छा बनाएं और इसे इंटरएक्टिव बनाएं।

यदि एक मूल HTML लाइन टाइप की जाती है, तो वह न्यूनतम हो जाती है। यदि CSS (Cascading Style Sheets) को जोड़ा जाए, तो यह कूलर दिखाई देगा, और यदि JavaScript जोड़ा जाए, तो यह अधिक इंटरैक्टिव हो सकता है। यह ट्यूटोरियल एचटीएमएल, जावास्क्रिप्ट, और सीएसएस को समझाते हुए विस्तार में नहीं जाएगा, लेकिन ऑनलाइन बहुत सारे संसाधन हैं। नीचे सरल 'हैलो वर्ल्ड' कार्यक्रम के लिए कोड है, फिर क्रमशः अधिक रंगीन कार्यक्रम:

नमस्ते दुनिया

नमस्ते दुनिया

# हैलो {पृष्ठभूमि-रंग: # 000000; रंग: #ff0000; सीमा: 8px प्रारंभ #86a3b2; सीमा-त्रिज्या: 50px; ट्रांसफॉर्म: रोटेट (57 डिग्री); पैडिंग: 10px; उपयोगकर्ता-चयन: कोई नहीं; कर्सर: क्रॉसहेयर; ट्रांज़िशन: ट्रांसफ़ॉर्म 2s; } # हैलो: होवर {रूपांतरण: घुमाएं (-417 डिग्री); }

शुरुआत के लिए यह दूसरा उदाहरण बहुत भ्रमित करने वाला हो सकता है। लेकिन, यह आपको यह दिखाने के लिए था कि किसी प्रोग्राम/एक्सटेंशन के लिए CSS कितना महत्वपूर्ण है। अब एक ब्रेक लेने और कुछ HTML5 कोडिंग सीखने और कुछ संदर्भ के लिए developer.chrome.com का उपयोग करने का एक अच्छा समय होगा। इसमें कुछ समय लग सकता है, लेकिन एक बड़ा विस्तार किया जा सकता है।

चरण 6: इसे क्रोम वेब स्टोर पर प्रकाशित करना

अगर किसी ने वास्तव में बहुत बड़ा विस्तार किया है और वे इसे दुनिया के साथ साझा करना चाहते हैं, तो वे इसे प्रकाशित कर सकते हैं। आखिरकार, विस्तार का बिंदु। इस ट्यूटोरियल ने केवल मेनिफेस्ट फ़ाइल को समझाने की कोशिश की, और आप इसका उपयोग कैसे कर सकते हैं, और इसमें सिर्फ एक 'हैलो वर्ल्ड' प्रोग्राम था।

किसी एक्‍सटेंशन को सार्वजनिक करने के लिए सबसे पहले एक्‍सटेंशन फ़ोल्‍डर को ज़िप फ़ाइल में बनाना है। दूसरी बात यह है कि https://chrome.google.com/webstore/category/extensions पर जाएं और Google खाते में लॉग इन करें। फिर, सेटिंग गियर बटन पर क्लिक करें और फिर 'डेवलपर डैशबोर्ड' पर क्लिक करें। ज़िप फ़ाइल अपलोड करने के लिए 'नया आइटम' बटन दबाएं। वहां पहुंचने के बाद, स्टोर सूची, गोपनीयता और मूल्य निर्धारण को संपादित करना आवश्यक है। यदि कोई एक्सटेंशन समीक्षा के लिए सबमिट किया जाता है तो उसे आसानी से प्रकाशित किया जा सकता है।

अब जब एक्सटेंशन समाप्त हो गया है, तो कोड करना जारी रखें!