Hello World एक्सटेंशन

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

खास जानकारी

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

नमस्कार दुनिया

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

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

अपनी एक्सटेंशन फ़ाइलों को सेव करने के लिए एक नई डायरेक्ट्री बनाकर शुरुआत करें. अगर आप चाहें, तो पूरा 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 World एक्सटेंशन

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

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

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

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

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

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

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

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

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

कंसोल लॉग

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

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

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

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

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

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

गड़बड़ी लॉग

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

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

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

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

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

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

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

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

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

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

TypeScript का इस्तेमाल करें

अगर आपको VSCode या Atom जैसे किसी कोड एडिटर का इस्तेमाल करके डेवलप करना है, तो npm का इस्तेमाल किया जा सकता है पैकेज Chrome-प्रकार Chrome के लिए अपने आप पूरा होने की सुविधा का लाभ उठाएं एपीआई. Chromium का सोर्स कोड होने पर, यह एनपीएम पैकेज अपने-आप अपडेट हो जाता है बदलाव.

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

एक्सटेंशन लर्निंग का इस्तेमाल शुरू करने के लिए, इनमें से कोई एक ट्यूटोरियल चुनें.

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