अपना पहला एक्सटेंशन बनाएं, जो पेज में नया एलिमेंट डालता है.
खास जानकारी
यह ट्यूटोरियल एक ऐसा एक्सटेंशन बनाता है जो किसी भी 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 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 फ़ाइलों के अलावा, दूसरे फ़ाइल फ़ॉर्मैट का भी इस्तेमाल किया जा सकता है.
💡 अलग-अलग साइज़ के ये आइकॉन कहां दिखते हैं?
| आइकॉन का साइज़ | आइकॉन का इस्तेमाल |
|---|---|
| 16x16 | एक्सटेंशन के पेजों और संदर्भ मेन्यू पर फ़ेविकॉन. |
| 32x32 | Windows कंप्यूटर को अक्सर इस साइज़ की ज़रूरत होती है. |
| 48x48 | एक्सटेंशन पेज पर दिखता है. |
| 128x128 | इंस्टॉल करने और Chrome Web Store में दिखता है. |
तीसरा चरण: कॉन्टेंट स्क्रिप्ट का एलान करना
एक्सटेंशन, उन स्क्रिप्ट को चला सकते हैं जो पेज के कॉन्टेंट को पढ़ सकती हैं और उसमें बदलाव कर सकती हैं. इन्हें कॉन्टेंट स्क्रिप्ट कहा जाता है. वे अलग-अलग दुनिया में रहते हैं. इसका मतलब है कि वे अपने होस्ट पेज या अन्य एक्सटेंशन की कॉन्टेंट स्क्रिप्ट से टकराव के बिना, अपने 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>. इनमें '*' वर्ण शामिल हो सकते हैं.
💡 क्या यह एक्सटेंशन अनुमति की चेतावनी दिखाता है?
जब कोई उपयोगकर्ता कोई एक्सटेंशन इंस्टॉल करता है, तो ब्राउज़र उन्हें यह जानकारी देता है कि एक्सटेंशन क्या कर सकता है. कॉन्टेंट स्क्रिप्ट, ऐसी साइटों पर चलाने की अनुमति का अनुरोध करती हैं जो मैच पैटर्न की शर्तों को पूरा करती हैं.
इस उदाहरण में, उपयोगकर्ता को अनुमति से जुड़ी यह चेतावनी दिखेगी:
एक्सटेंशन की अनुमतियों के बारे में ज़्यादा जानने के लिए, अनुमतियों का एलान करना और उपयोगकर्ताओं को चेतावनी देना देखें.
चरण 4: पढ़ने के समय का हिसाब लगाएं और डालें
कॉन्टेंट स्क्रिप्ट, किसी पेज के कॉन्टेंट को पढ़ने और उसमें बदलाव करने के लिए, स्टैंडर्ड डॉक्यूमेंट ऑब्जेक्ट मॉडल (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>शून्य या तय नहीं है, तो Nullish कोएलेसिंग,<heading>को दिखाता है.
जाँचें कि यह काम करता है या नहीं
पुष्टि करें कि आपके प्रोजेक्ट का फ़ाइल स्ट्रक्चर ऐसा दिखता है:
अपना एक्सटेंशन स्थानीय रूप से लोड करें
पैक नहीं किए गए एक्सटेंशन को डेवलपर मोड में लोड करने के लिए, डेवलपमेंट बुनियादी जानकारी में दिया गया तरीका अपनाएं.
कोई एक्सटेंशन या Chrome Web Store का दस्तावेज़ खोलें
यहां कुछ पेज दिए गए हैं, जिन्हें खोलकर यह देखा जा सकता है कि हर लेख को पढ़ने में कितना समय लगेगा.
यह कुछ ऐसा दिखना चाहिए:
💡 संभावित बढ़ोतरी
आज आपने जो कुछ भी सीखा है उसके आधार पर, इनमें से किसी एक को लागू करने की कोशिश करें:
- अन्य Chrome डेवलपर पेजों के साथ काम करने के लिए, Manifest.json में एक और मैच पैटर्न जोड़ें. उदाहरण के लिए, Chrome DevTools या वर्कबॉक्स.
- एक नई कॉन्टेंट स्क्रिप्ट जोड़ें, जो आपके किसी भी पसंदीदा ब्लॉग या दस्तावेज़ साइटों पर, पढ़ने में लगने वाले समय की गिनती करती है.
कम्यूनिटी को बढ़ाते रहें
यह ट्यूटोरियल पूरा करने पर बधाई 🎉. इस सीरीज़ के अन्य ट्यूटोरियल पूरे करके, अपने हुनर को निखारना जारी रखें:
| एक्सटेंशन | आपको क्या सीखने को मिलेगा |
|---|---|
| फ़ोकस मोड | एक्सटेंशन कार्रवाई पर क्लिक करने के बाद, मौजूदा पेज पर कोड चलाने के लिए. |
| टैब मैनेजर | ब्राउज़र के टैब मैनेज करने वाला पॉप-अप बनाने के लिए. |
और जगहों की सैर करना
हमें उम्मीद है कि आपको यह Chrome एक्सटेंशन बनाने में मज़ा आया होगा. साथ ही, हमें उम्मीद है कि हम Chrome के डेवलपमेंट की प्रोसेस को जारी रखेंगे. हमारा सुझाव है कि आप यहां दिए गए लर्निंग पाथ का इस्तेमाल करें:
- डेवलपर की गाइड में, बेहतर एक्सटेंशन बनाने से जुड़े दस्तावेज़ों के दर्जनों अतिरिक्त लिंक दिए गए हैं.
- एक्सटेंशन के पास, ओपन वेब पर उपलब्ध एपीआई के अलावा, बेहतरीन एपीआई का ऐक्सेस भी होता है. Chrome API दस्तावेज़ में हर एपीआई की जानकारी दी जाती है.