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

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

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

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

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

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

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

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

 {"manifest_version": 2, "name": "हैलो वर्ल्ड!", "विवरण": "मेरा पहला क्रोम एक्सटेंशन।", "browser_action": {"default_icon": "icon.png", "default_popup": "पॉपअप .html "}, " अनुमतियाँ ": [" activeTab "]}

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

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

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

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

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

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

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

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

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

1. "क्रोम: // एक्सटेंशन" पर नेविगेट करें और ऊपरी-दाएं में चेकबॉक्स को टिककर "डेवलपर मोड" चालू करें।

2. "अनपॅक किए गए एक्सटेंशन लोड करें ..." बटन पर क्लिक करें और एक्सटेंशन की निर्देशिका का चयन करें।

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

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

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

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

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