क्रोम ग्रह पर आसानी से सबसे लोकप्रिय वेब ब्राउज़र है। स्टेटकाउंटर के डेस्कटॉप ब्राउजर मार्केट शेयर सर्वे के मुताबिक, क्रोम 2017 के अंत तक डेस्कटॉप ब्राउजर में बाजार का 65% हिस्सा ले चुका है।
उस प्रकार की बाज़ार-परिभाषित शक्ति के साथ, Chrome के लिए डिज़ाइन करना प्राथमिकता बन गया है। एक्सटेंशन के लिए भी यही होता है:क्रोम वेब स्टोर में हजारों एक्सटेंशन, थीम और ऐप्स के साथ क्रोम एक्सटेंशन के लिए अब तक का सबसे बड़ा उपयोगकर्ता आधार प्रदान करता है।
यदि आप इस प्रवृत्ति को भुनाना चाहते हैं, तो आप अपना खुद का मूल क्रोम एक्सटेंशन बना सकते हैं। आपको बस कुछ बुनियादी वेब विकास कौशल (एचटीएमएल, सीएसएस और जावास्क्रिप्ट) के साथ-साथ जेएसओएन के एक चम्मच की आवश्यकता होगी ताकि इसे एक साथ जोड़ा जा सके।
हम इस पोस्ट में मूल क्रोम एक्सटेंशन बनाने के लिए आवश्यक सबसे बुनियादी संरचना की समीक्षा करेंगे। उपलब्ध संभावनाओं को गहराई से देखने के लिए, Chrome की डेवलपर एक्सटेंशन मार्गदर्शिका देखें।
बेसिक क्रोम एक्सटेंशन लिखना:मेनिफेस्ट डेस्टिनी
इस ट्यूटोरियल के लिए हम एक बुनियादी क्रोम एक्सटेंशन बनाएंगे जो क्लिक करने पर एक साधारण पॉपअप संदेश प्रदर्शित करता है। हमें कुछ महत्वपूर्ण फाइलों की आवश्यकता होगी:एक आइकन ("icon.png"), एक HTML फ़ाइल ("popup.html") और सभी महत्वपूर्ण मेनिफेस्ट ("manifest.json")। ये सभी फ़ाइलें आपके एक्सटेंशन के नाम वाली निर्देशिका के अंदर रहेंगी। इस मामले में इसे "हैलो वर्ल्ड" कहा जाता है।
क्रोम एक्सटेंशन को उसके मेनिफेस्ट द्वारा परिभाषित किया जाता है। 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वह नाम प्रदर्शित करता है जो एक्सटेंशन क्रोम स्टोर और "क्रोम:// एक्सटेंशन" में दिखाई देगा।description"क्रोम:// एक्सटेंशन" पर प्रदर्शित वर्णनात्मक पाठ दिखाता है।browser actionआइकन को टूलबार में लोड करता है। यह एक्सटेंशन को टूलटिप, पॉपअप या बैज प्रदर्शित करके उपयोगकर्ता इनपुट का जवाब देने की भी अनुमति देता है। “ब्राउज़र_एक्शन” जो कुछ भी कर सकता है उसकी पूरी सूची देखें।default_iconएक्सटेंशन की निर्देशिका से आइकन का पथ दिखाता है।default_popupफ़ाइल का पथ दिखाता है जो एक्सटेंशन के आइकन पर क्लिक करने पर लोड हो जाएगा।permissionsविस्तार के कार्यात्मक क्षेत्र को सीमित करता है।activeTabसबसे आम है, जो एक्सटेंशन को सबसे सामने वाले टैब तक पहुंचने की अनुमति देता है। Google उन सभी अनुमतियों की एक सूची प्रदान करता है जिनका एक एक्सटेंशन अनुरोध कर सकता है।
अगर आप क्रोम एक्सटेंशन के मेनिफेस्ट द्वारा घोषित हर चीज में गहराई से जाना चाहते हैं, तो एक्सटेंशन मेनिफेस्ट पर Google के दस्तावेज़ देखें।
बुनियादी Chrome एक्सटेंशन लिखना:पॉपअप
अब जब हमने अपना मेनिफेस्ट लिख लिया है, तो हम यह पता लगा सकते हैं कि हमारा एक्सटेंशन क्या प्रदर्शित करेगा। यह हमारी “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>
जैसा कि आप देख सकते हैं, यह सीएसएस के साथ स्टाइल किए गए कुछ टेक्स्ट प्रस्तुत करेगा। यदि आप अपने एक्सटेंशन में Javascript या बाहरी CSS जोड़ना चाहते हैं, जिसके लिए content_scripts के अंतर्गत, मैनिफेस्ट में स्क्रिप्ट घोषित करने की आवश्यकता है चाबी। एक बार जब आपके पास मैनिफेस्ट में संदर्भित हो, तो आप उन स्क्रिप्ट को लोड कर सकते हैं जैसे आप सामान्य रूप से करते हैं।
बुनियादी Chrome एक्सटेंशन लिखना:Chrome में लोड हो रहा है
एक बार जब हम अपने एक्सटेंशन के लिए मूल कोड लिख लेते हैं और एक उपयुक्त आइकन मिल जाता है, तो हम उसे क्रोम में लोड कर सकते हैं।
1. "क्रोम:// एक्सटेंशन" पर नेविगेट करें और ऊपरी-दाईं ओर स्थित चेकबॉक्स पर टिक करके "डेवलपर मोड" चालू करें।
2. "अनपैक्ड एक्सटेंशन लोड करें..." बटन पर क्लिक करें और एक्सटेंशन की निर्देशिका चुनें।
3. एक बार एक्सटेंशन लोड हो जाने पर, आपको मेनू बार में उसका आइकन दिखाई देगा।
4. एक्सटेंशन का (बहुत सरल) प्रभाव देखने के लिए उस पर क्लिक करें।
निष्कर्ष:अपने क्रोम एक्सटेंशन का विस्तार करना
एक बार जब आप अपने एक्सटेंशन के साथ समाप्त कर लेते हैं और प्रकाशित करने के लिए तैयार हो जाते हैं, तो आपको एक क्रोम डेवलपर खाता बनाना होगा। यह बिल्कुल सीधी प्रक्रिया नहीं है, लेकिन Google आपके Chrome एक्सटेंशन को यहां प्रकाशित करने के लिए संपूर्ण निर्देश प्रदान करता है।
स्पष्ट रूप से आप अपने क्रोम एक्सटेंशन के साथ बहुत कुछ कर सकते हैं, लेकिन यह कुछ हद तक इस पोस्ट के दायरे से बाहर है। यदि आप उन सभी चीजों के बारे में अधिक जानना चाहते हैं जो क्रोम एक्सटेंशन कर सकते हैं, तो Google की क्रोम डेवलपर एक्सटेंशन गाइड देखें।