हर पेज पर स्क्रिप्ट चलाएं

अपना पहला एक्सटेंशन बनाएं, जो पेज में एक नया एलीमेंट सम्मिलित करता है.

खास जानकारी

इस ट्यूटोरियल में एक ऐसा एक्सटेंशन बनाया गया है जो किसी भी Chrome एक्सटेंशन को पढ़ने में लगने वाला अनुमानित समय जोड़ता है और Chrome वेब स्टोर दस्तावेज़ पेज.

इस गाइड में, हम इन कॉन्सेप्ट के बारे में बताएंगे:

• एक्सटेंशन मेनिफ़ेस्ट.
• एक्सटेंशन किन साइज़ के आइकॉन का इस्तेमाल करता है.
• कॉन्टेंट स्क्रिप्ट का इस्तेमाल करके, पेजों में कोड डालने का तरीका.
• मैच पैटर्न को इस्तेमाल करने का तरीका.
• एक्सटेंशन की अनुमतियां.

शुरू करने से पहले

इस गाइड में यह माना गया है कि आपको वेब डेवलपमेंट का बेसिक अनुभव है. हमारा सुझाव है कि आप एक्सटेंशन डेवलपमेंट वर्कफ़्लो के बारे में जानकारी देने के लिए नमस्ते दुनिया ट्यूटोरियल.

एक्सटेंशन बनाएं

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

पहला चरण: एक्सटेंशन के बारे में जानकारी जोड़ना

इसके लिए, सिर्फ़ मेनिफ़ेस्ट JSON फ़ाइल ही ज़रूरी है. इसमें पब्लिशर के लिए एक्सटेंशन चुनें. प्रोजेक्ट के रूट में manifest.json फ़ाइल बनाएं और नीचे दिया गया कोड जोड़ें:

{
  "manifest_version": 3,
  "name": "Reading time",
  "version": "1.0",
  "description": "Add the reading time to Chrome Extension documentation articles"
}

इन कुंजियों में एक्सटेंशन के लिए बेसिक मेटाडेटा होता है. वे नियंत्रित करते हैं कि एक्सटेंशन पेज पर और Chrome वेब स्टोर पर प्रकाशित होने पर एक्सटेंशन कैसे दिखाई देगा. इस बारे में ज़्यादा जानने के लिए, "name", "version", और "description" कुंजियां मेनिफ़ेस्ट की खास जानकारी देने वाला पेज.

💡 एक्सटेंशन मेनिफ़ेस्ट के बारे में अन्य तथ्य

• यह प्रोजेक्ट के रूट में होना चाहिए.
• सिर्फ़ "manifest_version", "name", और "version" कुंजियों की ज़रूरत होती है.
• यह डेवलपमेंट के दौरान टिप्पणियों (//) का समर्थन करता है, लेकिन Chrome वेब स्टोर में अपना कोड अपलोड करने से पहले इन्हें निकालना आवश्यक है.

दूसरा चरण: आइकॉन उपलब्ध कराना

आपको आइकॉन की ज़रूरत क्यों है? हालांकि डेवलपमेंट के दौरान आइकॉन का इस्तेमाल करना ज़रूरी नहीं होता, लेकिन इन्हें इस शर्त को पूरा करना ज़रूरी होता है. वे अन्य विंडो में भी दिखते हैं जैसे कि एक्सटेंशन मैनेजमेंट पेज.

एक images फ़ोल्डर बनाएं और आइकॉन को इसके अंदर रखें. आइकॉन को यहां डाउनलोड किया जा सकता है GitHub. इसके बाद, आइकॉन के बारे में जानकारी देने के लिए, हाइलाइट किए गए कोड को अपने मेनिफ़ेस्ट में जोड़ें:

{
  "icons": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  }
}

हम PNG फ़ाइलों का इस्तेमाल करने का सुझाव देते हैं. हालांकि, SVG फ़ाइलों को छोड़कर, अन्य फ़ाइल फ़ॉर्मैट की अनुमति है.

💡 अलग-अलग साइज़ के ये आइकॉन कहां दिखाए जाते हैं?

तीसरा चरण: कॉन्टेंट स्क्रिप्ट का एलान करना

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

जिस कॉन्टेंट स्क्रिप्ट को रजिस्टर किया गया है उसे रजिस्टर करने के लिए, manifest.json में यह कोड जोड़ें content.js.

{
  "content_scripts": [
    {
      "js": ["scripts/content.js"],
      "matches": [
        "https://developer.chrome.com/docs/extensions/*",
        "https://developer.chrome.com/docs/webstore/*"
      ]
    }
  ]
}

"matches" फ़ील्ड में एक या एक से ज़्यादा मैच पैटर्न हो सकते हैं. इनसे ब्राउज़र को ये काम करने की अनुमति मिलती है तय करें कि किन साइटों में कॉन्टेंट स्क्रिप्ट इंजेक्ट करनी हैं. मिलान पैटर्न के तीन हिस्से होते हैं: <scheme>://<host><path>. इनमें '*' शामिल हो सकता है वर्ण

💡 क्या यह एक्सटेंशन, अनुमति से जुड़ी चेतावनी दिखाता है?

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

इस उदाहरण में, उपयोगकर्ता को अनुमति से जुड़ी यह चेतावनी दिखेगी:

एक्सटेंशन की अनुमतियों के बारे में ज़्यादा जानने के लिए, अनुमतियों का एलान करना और उपयोगकर्ताओं को चेतावनी देना देखें.

चौथा चरण: पढ़े जाने के समय का हिसाब लगाना और उसे शामिल करना

कॉन्टेंट स्क्रिप्ट, स्टैंडर्ड डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM) का इस्तेमाल पेज का कॉन्टेंट होता है. एक्सटेंशन सबसे पहले यह जांच करेगा कि पेज में <article> एलिमेंट है या नहीं. इसके बाद, यह इस एलिमेंट में मौजूद सभी शब्दों की गिनती करेगा और एक ऐसा पैराग्राफ़ बना देगा जिसमें सभी शब्द मौजूद हों पढ़ने का समय.

scripts नाम के फ़ोल्डर में content.js नाम की फ़ाइल बनाएं और यह कोड जोड़ें:

const article = document.querySelector("article");

// `document.querySelector` may return null if the selector doesn't match anything.
if (article) {
  const text = article.textContent;
  const wordMatchRegExp = /[^\s]+/g; // Regular expression
  const words = text.matchAll(wordMatchRegExp);
  // matchAll returns an iterator, convert to array to get word count
  const wordCount = [...words].length;
  const readingTime = Math.round(wordCount / 200);
  const badge = document.createElement("p");
  // Use the same styling as the publish information in an article's header
  badge.classList.add("color-secondary-text", "type--caption");
  badge.textContent = `⏱️ ${readingTime} min read`;

  // Support for API reference docs
  const heading = article.querySelector("h1");
  // Support for article docs with date
  const date = article.querySelector("time")?.parentNode;

  (date ?? heading).insertAdjacentElement("afterend", badge);
}

💡 इस कोड में इस्तेमाल किया गया दिलचस्प JavaScript

• सामान्य एक्सप्रेशन का इस्तेमाल सिर्फ़ <article> एलिमेंट में मौजूद शब्दों की गिनती करने के लिए किया जाता है.
• insertAdjacentElement() का इस्तेमाल, एलिमेंट के बाद मौजूद रीडिंग टाइम नोड डालने के लिए किया जाता है.
• classList प्रॉपर्टी, जिसका इस्तेमाल एलिमेंट क्लास एट्रिब्यूट में सीएसएस क्लास के नाम जोड़ने के लिए किया जाता है.
• वैकल्पिक चेनिंग का इस्तेमाल, किसी ऐसी ऑब्जेक्ट प्रॉपर्टी को ऐक्सेस करने के लिए किया जाता है जो तय नहीं या शून्य हो सकती है.
• अगर <date> शून्य या तय नहीं है, तो नलीश कोलेसिंग <heading> लौटाता है.

जांच लें कि यह काम कर रहा है या नहीं

पुष्टि करें कि आपके प्रोजेक्ट की फ़ाइल का स्ट्रक्चर इस तरह दिखता है:

अपने एक्सटेंशन को स्थानीय तौर पर लोड करें

पैक नहीं किए गए किसी एक्सटेंशन को डेवलपर मोड में लोड करने के लिए, डेवलपर मोड में दिया गया तरीका अपनाएं बुनियादी बातें.

कोई एक्सटेंशन या Chrome वेब स्टोर दस्तावेज़ खोलें

यहां दिए गए कुछ पेजों को खोलकर, यह देखा जा सकता है कि किसी लेख को पढ़ने में कितना समय लगेगा.

• 'Chrome वेब स्टोर' में पब्लिश करें
• कॉन्टेंट स्क्रिप्ट के बारे में जानकारी

यह कुछ ऐसा दिखना चाहिए:

○ पैसे चुकाकर ली जाने वाली सेवाओं को बेहतर बनाया जा सकता है

आज आपको मिली जानकारी के आधार पर, इनमें से किसी एक को लागू करें:

• अन्य Chrome डेवलपर की मदद करने के लिए, Manifest.json में एक और मैच पैटर्न जोड़ें पेज, जैसे कि Chrome DevTools या Workbox.
• एक नई कॉन्टेंट स्क्रिप्ट जोड़ें जिससे आपके किसी भी पसंदीदा ब्लॉग को पढ़ने में लगने वाले समय का हिसाब लगाया जा सके या दस्तावेज़ों वाली साइटों पर.

कम्यूनिटी को बढ़ाते रहें

यह ट्यूटोरियल पूरा करने के लिए बधाई 🎉. अन्य टास्क पूरे करके, अपने हुनर को निखारना जारी रखें इस सीरीज़ पर ट्यूटोरियल:

एक्सप्लोर करते रहें

हमें उम्मीद है कि आपको यह Chrome एक्सटेंशन पसंद आया होगा और हम अपने Chrome का इस्तेमाल जारी रखने के लिए उत्साहित हैं सीखने का सफ़र पूरा किया. हमारा सुझाव है कि आप यह लर्निंग पाथ देखें:

• डेवलपर की गाइड में दस्तावेज़ों के हिस्सों के दर्जनों अतिरिक्त लिंक हैं जो कि बेहतर एक्सटेंशन बनाने के लिए प्रासंगिक हैं.
• एक्सटेंशन के पास ओपन वेब पर उपलब्ध एपीआई के अलावा, ज़्यादा दमदार एपीआई का ऐक्सेस होता है. Chrome API से जुड़ा दस्तावेज़, हर एपीआई की जानकारी देता है.