Hello World एक्सटेंशन

अपना पहला Hello World एक्सटेंशन बनाकर, Chrome एक्सटेंशन डेवलपमेंट की बुनियादी बातें जानें.

खास जानकारी

आपको "नमस्ते दुनिया" के लिए एक उदाहरण बनाना होगा. इसके बाद, एक्सटेंशन को स्थानीय तौर पर लोड करना होगा, लॉग मिलेंगे, और अन्य सुझाव एक्सप्लोर करने होंगे.

नमस्ते, दुनिया के लोगों

जब उपयोगकर्ता एक्सटेंशन टूलबार आइकॉन पर क्लिक करेगा, तब यह एक्सटेंशन “नमस्ते एक्सटेंशन” दिखाएगा.

हैलो एक्सटेंशन
नमस्ते एक्सटेंशन का पॉप-अप

अपनी एक्सटेंशन फ़ाइलों को सेव करने के लिए नई डायरेक्ट्री बनाकर शुरू करें. अगर आप चाहें, तो GitHub से पूरा सोर्स कोड डाउनलोड करें.

इसके बाद, इस डायरेक्ट्री में manifest.json नाम की एक नई फ़ाइल बनाएं. यह JSON फ़ाइल, एक्सटेंशन की क्षमताओं और कॉन्फ़िगरेशन के बारे में बताती है. उदाहरण के लिए, ज़्यादातर मेनिफ़ेस्ट फ़ाइलों में एक "action" कुंजी होती है, जो यह बताती है कि एक्सटेंशन के ऐक्शन आइकॉन पर क्लिक करने पर, Chrome को उस इमेज का इस्तेमाल पॉप-अप में दिखाने के लिए, एक्सटेंशन के ऐक्शन आइकॉन के तौर पर और एचटीएमएल पेज के तौर पर इस्तेमाल करना चाहिए.

{
  "manifest_version": 3,
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  }
}

अपनी डायरेक्ट्री में आइकॉन डाउनलोड करें. साथ ही, "default_icon" कुंजी में दिए गए नाम से मिलान करने के लिए, उसके नाम को बदलना न भूलें.

पॉप-अप के लिए, hello.html नाम की फ़ाइल बनाएं और यह कोड जोड़ें:

<html>
  <body>
    <h1>Hello Extensions</h1>
  </body>
</html>

एक्सटेंशन के ऐक्शन आइकॉन (टूलबार आइकॉन) पर क्लिक करने पर, अब एक्सटेंशन एक पॉप-अप दिखाता है. इसे स्थानीय तौर पर लोड करके Chrome में इसकी जांच की जा सकती है. पक्का करें कि सभी फ़ाइलें सेव कर ली गई हैं.

पैक न किए गए एक्सटेंशन को लोड करें

पैक नहीं किए गए एक्सटेंशन को डेवलपर मोड में लोड करने के लिए:

  1. नए टैब में, chrome://extensions डालकर, एक्सटेंशन पेज पर जाएं. (डिज़ाइन के मुताबिक, chrome:// यूआरएल लिंक नहीं किए जा सकते.)
    • इसके अलावा, एक्सटेंशन मेन्यू के पहेली बटन पर क्लिक करके मेन्यू में सबसे नीचे मौजूद एक्सटेंशन मैनेज करें को चुनें.
    • या, Chrome मेन्यू पर क्लिक करके ज़्यादा टूल पर कर्सर घुमाएं. इसके बाद, एक्सटेंशन चुनें.
  2. डेवलपर मोड के आगे मौजूद टॉगल स्विच पर क्लिक करके, डेवलपर मोड चालू करें.
  3. पैक नहीं किया गया लोड करें बटन पर क्लिक करें और एक्सटेंशन डायरेक्ट्री चुनें.
    एक्सटेंशन पेज
    एक्सटेंशन पेज (chrome://extensions)

टा-डा! एक्सटेंशन इंस्टॉल हो गया. अगर मेनिफ़ेस्ट में कोई भी एक्सटेंशन आइकॉन शामिल नहीं किया गया है, तो एक्सटेंशन के लिए एक सामान्य आइकॉन बनाया जाएगा.

एक्सटेंशन को पिन करें

डिफ़ॉल्ट रूप से, जब आप अपना एक्सटेंशन स्थानीय रूप से लोड करते हैं, तो वह एक्सटेंशन मेन्यू (पहेली वाले गेम) में दिखेगा. डेवलपमेंट के दौरान अपने एक्सटेंशन को तुरंत ऐक्सेस करने के लिए अपने एक्सटेंशन को टूलबार पर पिन करें.

एक्सटेंशन को पिन करना
एक्सटेंशन को पिन करना

एक्सटेंशन के कार्रवाई आइकॉन (टूलबार आइकॉन) पर क्लिक करें; आपको एक पॉप-अप दिखेगा.

hello वर्ल्ड एक्सटेंशन
Hello World एक्सटेंशन

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

कोड पर वापस जाएं और मेनिफ़ेस्ट में एक्सटेंशन का नाम बदलकर "नमस्ते एक्सटेंशन!" कर दें.

{
  "manifest_version": 3,
  "name": "Hello Extensions of the world!",
  ...
}

फ़ाइल सेव करने के बाद, इस बदलाव को ब्राउज़र में देखने के लिए, आपको एक्सटेंशन को रीफ़्रेश भी करना होगा. एक्सटेंशन पेज पर जाएं और चालू/बंद करें टॉगल के बगल में मौजूद रीफ़्रेश आइकॉन पर क्लिक करें:

एक्सटेंशन को फिर से लोड करना

एक्सटेंशन को फिर से लोड करने का समय

इस टेबल में बताया गया है कि बदलावों को देखने के लिए, किन कॉम्पोनेंट को फिर से लोड करना होगा:

एक्सटेंशन कॉम्पोनेंट एक्सटेंशन को फिर से लोड करना होगा
मेनिफ़ेस्ट हां
सर्विस वर्कर हां
कॉन्टेंट स्क्रिप्ट हां (साथ ही होस्ट पेज)
पॉप-अप नहीं
विकल्प पेज नहीं
अन्य एक्सटेंशन के एचटीएमएल पेज नहीं

कंसोल के लॉग और गड़बड़ियां ढूंढना

कंसोल के लॉग

डेवलपमेंट के दौरान, ब्राउज़र कंसोल लॉग का इस्तेमाल करके अपने कोड को डीबग किया जा सकता है. ऐसे मामले में, हम पॉप-अप के लिए लॉग ढूंढ लेंगे. hello.html में स्क्रिप्ट टैग जोड़कर शुरू करें.

<html>
  <body>
    <h1>Hello Extensions</h1>
    <script src="popup.js"></script>
  </body>
</html>

popup.js फ़ाइल बनाएं और यह कोड जोड़ें:

console.log("This is a popup!")

कंसोल में लॉग इन किए गए इस मैसेज को देखने के लिए:

  1. पॉप-अप खोलें.
  2. पॉप-अप पर राइट क्लिक करें.
  3. जांच करें चुनें.
    पॉप-अप की जांच की जा रही है.
    पॉप-अप की जांच की जा रही है.
  4. DevTools में, कंसोल पैनल पर जाएं.
    DevTools का कोड पैनल
    पॉप-अप की जांच की जा रही है

गड़बड़ी के लॉग

चलिए, अब एक्सटेंशन को तोड़ते हैं. हम popup.js में मौजूद क्लोज़िंग कोटेशन को हटाकर ऐसा कर सकते हैं:

console.log("This is a popup!) // ❌ broken code

एक्सटेंशन पेज पर जाएं और पॉप-अप खोलें. आपको गड़बड़ियां बटन दिखेगा.

गड़बड़ी वाले बटन के साथ एक्सटेंशन पेज

गड़बड़ी के बारे में ज़्यादा जानने के लिए, गड़बड़ियां बटन पर क्लिक करें:

एक्सटेंशन की गड़बड़ी से जुड़ी जानकारी

सर्विस वर्कर, विकल्प पेज, और कॉन्टेंट स्क्रिप्ट को डीबग करने के बारे में ज़्यादा जानने के लिए, एक्सटेंशन डीबग करना देखें.

एक्सटेंशन प्रोजेक्ट तैयार करना

एक्सटेंशन प्रोजेक्ट को कई तरीकों से स्ट्रक्चर किया जा सकता है. हालांकि, इसके लिए आपको सिर्फ़ मैनफ़स्ट.json फ़ाइल को एक्सटेंशन की रूट डायरेक्ट्री में रखना होगा, जैसा कि नीचे दिए गए उदाहरण में दिखाया गया है:

एक्सटेंशन फ़ोल्डर का कॉन्टेंट: Manifest.json, background.js, स्क्रिप्ट फ़ोल्डर, पॉप-अप फ़ोल्डर, और इमेज फ़ोल्डर.

टाइपस्क्रिप्ट का इस्तेमाल करें

अगर VSCode या ऐटम जैसे किसी कोड एडिटर का इस्तेमाल करके डेवलप किया जा रहा है, तो Chrome API के लिए, अपने-आप पूरा होने का फ़ायदा पाने के लिए, एनपीएम पैकेज chrome-types का इस्तेमाल किया जा सकता है. Chromium के सोर्स कोड में बदलाव होने पर, यह एनपीएम पैकेज अपने-आप अपडेट हो जाता है.

🚀 क्या आप बनाने के लिए तैयार हैं?

एक्सटेंशन सीखने की प्रोसेस शुरू करने के लिए, इनमें से कोई भी ट्यूटोरियल चुनें.

एक्सटेंशन आपको क्या सीखने को मिलेगा
हर पेज पर स्क्रिप्ट चलाना हर पेज पर अपने-आप कोई एलिमेंट डालने के लिए.
चालू टैब में स्क्रिप्ट इंजेक्ट करें एक्सटेंशन कार्रवाई पर क्लिक करने के बाद, मौजूदा पेज पर कोड चलाने के लिए.
टैब मैनेज करना ब्राउज़र के टैब मैनेज करने वाला पॉप-अप बनाने के लिए.
सर्विस वर्कर के साथ इवेंट मैनेज करना एक्सटेंशन सर्विस वर्कर, इवेंट को कैसे मैनेज करता है.