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

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

खास जानकारी

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

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

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

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

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

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

शुरू करने के लिए, एक्सटेंशन की फ़ाइलों को सेव करने के लिए 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 Web Store पर अपना कोड अपलोड करने से पहले, इन टिप्पणियों को हटाना ज़रूरी है.

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

तो, आपको आइकॉन की ज़रूरत क्यों है? डेवलपमेंट के दौरान आइकॉन का इस्तेमाल करना ज़रूरी नहीं है. हालांकि, अगर आपको अपना एक्सटेंशन 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 एनवायरमेंट में बदलाव कर सकते हैं.

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

{
  "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 नाम की फ़ाइल बनाएं और यह कोड जोड़ें:

function renderReadingTime(article) {
  // If we weren't provided an article, we don't need to render anything.
  if (!article) {
    return;
  }

  const text