बेसिक क्रोम एक्सटेंशन कैसे लिखें और बनाएं

क्रोम ग्रह पर सबसे लोकप्रिय वेब ब्राउज़र है। स्टेटकाउंटर के डेस्कटॉप ब्राउज़र मार्केट शेयर सर्वेक्षण के अनुसार, 2017 के अंत तक डेस्कटॉप ब्राउज़रों में क्रोम की 65% बाजार हिस्सेदारी है।

उस तरह की बाजार-परिभाषित शक्ति के साथ, क्रोम के लिए डिज़ाइन करना प्राथमिकता बन गया है। यही एक्सटेंशन के लिए भी लागू होता है: क्रोम एक्सटेंशन के लिए अब तक का सबसे बड़ा उपयोगकर्ता आधार प्रदान करता है, जिसमें दसियों हज़ार एक्सटेंशन, थीम और ऐप्स क्रोम वेब स्टोर को आबाद करते हैं।

यदि आप इस ट्रेंड को भुनाना चाहते हैं, तो आप अपना खुद का बेसिक क्रोम एक्सटेंशन बना सकते हैं। आपको बस कुछ बुनियादी वेब डेवलपमेंट स्किल्स (HTML, CSS और जावास्क्रिप्ट) के साथ-साथ इसे एक साथ बांधने के लिए एक चम्मच JSON की आवश्यकता होगी।

हम इस पोस्ट में एक बेसिक क्रोम एक्सटेंशन बनाने के लिए आवश्यक सबसे बुनियादी संरचना की समीक्षा करेंगे। उपलब्ध संभावनाओं के गहन दृश्य के लिए, क्रोम के डेवलपर एक्सटेंशन गाइड को देखें।

बेसिक क्रोम एक्सटेंशन लिखना: मैनिफेस्ट डेस्टिनी

इस ट्यूटोरियल के लिए हम एक बेसिक क्रोम एक्सटेंशन बनाएंगे जो क्लिक करने पर एक साधारण पॉपअप संदेश प्रदर्शित करता है। हमें कुछ महत्वपूर्ण फ़ाइलों की आवश्यकता होगी: एक आइकन ("icon.png"), एक HTML फ़ाइल ("popup.html") और महत्वपूर्ण मैनिफेस्ट ("manifest.json")। ये सभी फ़ाइलें आपके एक्सटेंशन के नाम के साथ एक डायरेक्टरी के अंदर रहेंगी। इस मामले में इसे "Hello World" कहा जाता है।

एक क्रोम एक्सटेंशन उसके मैनिफेस्ट द्वारा परिभाषित किया जाता है। JSON का यह स्निपेट क्रोम को दिखाता है कि एक्सटेंशन की व्याख्या कैसे करें, कौन सी फ़ाइलें लोड करें, और उपयोगकर्ता के साथ कैसे इंटरैक्ट करें।

हमारे बहुत बेसिक एक्सटेंशन के लिए मैनिफेस्ट फ़ाइल इस तरह दिखती है:

{ "manifest_version": 2, "name": "Hello World!", "description": "My first Chrome extension.", "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }, "permissions": [ "activeTab" ] }

यह मैनिफेस्ट फ़ाइल उपयोगकर्ता के टूलबार में एक आइकन डालेगी, जिसे क्लिक करने पर "popup.html" नाम की फ़ाइल की सामग्री लोड होगी। बाकी सामग्री पर निट्टी-ग्रिट्टी निम्नलिखित है:

• manifest_version क्रोम को बताता है कि आप मैनिफेस्ट मार्कअप के किस संस्करण के साथ काम कर रहे हैं। आधुनिक एक्सटेंशन के लिए, आपको इसे 2. पर सेट करना होगा।
• name वह नाम प्रदर्शित करता है जो एक्सटेंशन क्रोम स्टोर और "chrome://extensions" में दिखाएगा।
• description "chrome://extensions" पर प्रदर्शित वर्णनात्मक टेक्स्ट दिखाता है।
• browser action आइकन को टूलबार में लोड करता है। यह एक्सटेंशन को टूलटिप, पॉपअप या बैज प्रदर्शित करके उपयोगकर्ता इनपुट का जवाब देने की अनुमति भी देता है। "browser_action" क्या कर सकता है इसकी पूरी सूची देखें।
• default_icon एक्सटेंशन की डायरेक्टरी से आइकन का पथ दिखाता है।
• default_popup उस फ़ाइल का पथ दिखाता है जो एक्सटेंशन के आइकन पर क्लिक करने पर लोड होगी।
• permissions एक्सटेंशन के कार्यात्मक क्षेत्र को सीमित करता है। activeTab सबसे आम है, जो एक्सटेंशन को सबसे आगे वाले टैब तक पहुंचने की अनुमति देता है। गूगल उन सभी अनुमतियों की सूची प्रदान करता है जो एक एक्सटेंशन अनुरोध कर सकता है।

यदि आप क्रोम एक्सटेंशन के मैनिफेस्ट द्वारा घोषित की जा सकने वाली हर चीज में गहराई से जाना चाहते हैं, तो एक्सटेंशन मैनिफेस्ट पर गूगल के डॉक्स देखें।

बेसिक क्रोम एक्सटेंशन लिखना: पॉपअप्स

अब जब हमने अपना मैनिफेस्ट लिख लिया है, तो हम यह पता लगा सकते हैं कि हमारा एक्सटेंशन क्या प्रदर्शित करेगा। यह हमारे "popup.html" फ़ाइल पर निर्भर करता है, जो एक्सटेंशन लोड होने पर प्रदर्शित होगा। यहां हम इस प्रोजेक्ट के लिए उपयोग करेंगे:

<!doctype html> <html> <head> <title>Hello World</title> </head> <style type="text/css"> body { margin: 5px; } h1 { font-size: 15px; text-align: center; } </style> <body> <h1>Hello World!</h1> </body> </html>

जैसा कि आप देख सकते हैं, यह CSS के साथ स्टाइल किए गए कुछ टेक्स्ट को रेंडर करेगा। यदि आप अपने एक्सटेंशन में जावास्क्रिप्ट या बाहरी CSS जोड़ना चाहते हैं, तो इसके लिए मैनिफेस्ट में content_scripts कुंजी के तहत स्क्रिप्ट घोषित करने की आवश्यकता होती है। एक बार जब आपके पास मैनिफेस्ट में इसका संदर्भ होता है, तो आप उन स्क्रिप्ट्स को सामान्य रूप से लोड कर सकते हैं।

बेसिक क्रोम एक्सटेंशन लिखना: क्रोम में लोड करना

एक बार जब हमने अपने एक्सटेंशन के लिए बेसिक कोड लिख लिया और एक उपयुक्त आइकन ढूंढ लिया, तो हम इसे क्रोम में लोड कर सकते हैं।

1. "chrome://extensions" पर जाएं और ऊपरी-दाएं कोने में चेकबॉक्स को टिक करके "Developer Mode" चालू करें।

2. "Load unpacked extension..." बटन पर क्लिक करें और एक्सटेंशन की डायरेक्टरी चुनें।

3. एक बार एक्सटेंशन लोड हो जाने पर, आप इसे मेनू बार में इसका आइकन देखेंगे।

4. इसका (बहुत सरल) प्रभाव देखने के लिए एक्सटेंशन पर क्लिक करें।

निष्कर्ष: अपने क्रोम एक्सटेंशन का विस्तार

एक बार जब आप अपने एक्सटेंशन के साथ समाप्त हो जाते हैं और प्रकाशित करने के लिए तैयार होते हैं, तो आपको एक क्रोम डेवलपर अकाउंट बनाना होगा। यह बिल्कुल सीधी प्रक्रिया नहीं है, लेकिन गूगल यहां आपके क्रोम एक्सटेंशन को प्रकाशित करने के लिए पूर्ण निर्देश प्रदान करता है।

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