ब्राउज़र एक्सटेंशन ब्राउज़र के ऐड-ऑन हैं जिनका उपयोग साइट में सौंदर्य जोड़ने और इष्टतम उपयोगकर्ता अनुभव प्रदान करने के लिए किया जाता है।
एक्सटेंशन विकास में सामग्री स्क्रिप्ट की अवधारणा डेवलपर्स द्वारा प्राप्त किया जाने वाला एक काफी उपयोगी ज्ञान है क्योंकि इसने ब्राउज़र एक्सटेंशन के उपयोग के मामलों में काफी विस्तार किया है।

इस लेख का उद्देश्य यह बताना है कि सामग्री स्क्रिप्ट क्या हैं और वे कैसे काम करती हैं। एक डेमो प्रोजेक्ट भी होगा जिसमें क्रोम एक्सटेंशन के मूल पर चर्चा की जाएगी और हमारे एक्सटेंशन में एक सरल सामग्री स्क्रिप्ट का उपयोग किया जाएगा। इसके साथ, आइए शुरुआत करें।

सामग्री स्क्रिप्ट को समझना

सबसे पहले, सामग्री स्क्रिप्ट क्या है? सामग्री स्क्रिप्ट जावास्क्रिप्ट कोड हैं जो ब्राउज़र एक्सटेंशन के माध्यम से वेब पेजों के साथ इंटरेक्शन पर वेबपेज को संशोधित करने के लिए निष्पादित होते हैं।

यह वेबपेज दस्तावेज़ ऑब्जेक्ट मॉडल के साथ इंटरैक्ट करके इसे आसानी से प्राप्त करता है। वेब पेज दस्तावेज़ ऑब्जेक्ट मॉडल दिए गए वेब पेज की कच्ची संरचना है। जिस तरीके से क्रोम सामग्री स्क्रिप्ट प्रश्न में वेब पेज को संशोधित करने के लिए कार्य करती है उसे आमतौर पर इंजेक्शन कहा जाता है।

सामग्री स्क्रिप्ट का संक्षिप्त परिचय लेने के बाद, हम इसे अपने वेब पेजों पर लागू करने के लिए आगे बढ़ेंगे। लेकिन उससे पहले, हमें अपना ब्राउज़र एक्सटेंशन सेट करना होगा जो स्क्रिप्ट को पावर देगा।

अपना Chrome एक्सटेंशन सेट करना

क्रोम एक्सटेंशन फ़ाइल सेट करना बहुत सरल है। आगे के संदर्भ निर्माण एक्सटेंशन के लिए, क्रोम एक्सटेंशन दस्तावेज़ीकरण पृष्ठ का लिंक नीचे संलग्न है।
एक आदर्श क्रोम एक्सटेंशन में एक अच्छी तरह से विस्तृत मैनिफ़ेस्ट.जेसन फ़ाइल शामिल होनी चाहिए जो क्रोम एक्सटेंशन के बारे में डिफ़ॉल्ट पृष्ठभूमि जानकारी प्रदान करती है।
साथ ही, निष्पादित की जाने वाली उपयुक्त JS फ़ाइल भी शामिल है। अन्य अतिरिक्त फ़ाइलें (HTML और CSS) एक्सटेंशन को सौंदर्य प्रदान करने में मदद करती हैं।
इसके साथ, आइए हम अपने कंटेंट स्क्रिप्ट इंजेक्शन को शामिल करते हुए अपना एक्सटेंशन बनाएं। हम Chrome एक्सटेंशन बनाकर सामग्री स्क्रिप्ट की शक्ति का वर्णन करेंगे जो हमारे द्वारा नेविगेट किए जाने वाले किसी भी सक्रिय वेब पेज पर एक बटन ओवरलेइंग प्रदर्शित करता है।

मैनिफ़ेस्ट फ़ाइल लिखना

इस अनुभाग में, मेनिफेस्ट फ़ाइल के हिस्सों पर प्रकाश डाला जाएगा और चर्चा की जाएगी। यहां प्रोजेक्ट के लिए मेनिफेस्ट फ़ाइल का कोड है।

{
    "manifest_version": 3,
    "name": "Add Button",
    "version": "1.0",
    "description": "An extension that alerts a response when clicked",
    "permissions": ["activeTab"],
    "content_scripts": [
{
        "matches": [""],
        "js": ["ContentScript.js"],
        "CSS": ["Button.css"]
}
]
}

प्रकट संस्करण: आमतौर पर प्रकट संस्करण का अनुरोध किया जाता है। डिफ़ॉल्ट रूप से, यह 3 पर सेट है। क्योंकि यह संस्करण 2 की तुलना में काफी बेहतर अपग्रेड है।
नाम: एक्सटेंशन का नाम भी मेनिफेस्ट फ़ाइल में टाइप किया गया है। मेरे मामले में, प्रोजेक्ट का नाम ऐड बटन है। इसे उपयोगकर्ता की पसंद के अनुरूप बदला जा सकता है।
क्रोम एक्सटेंशन का संस्करण भी इनपुट किया गया है। हमारे मामले में, यह एक्सटेंशन का पहला संस्करण है इसलिए इसे 1.0 नाम दिया गया है, इस एक्सटेंशन में बाद के सुधार क्रमशः संस्करणों को बढ़ाने के लिए फ़ाइल को संशोधित करने का संकेत दे सकते हैं।
विवरण: एक्सटेंशन क्या करता है इसका विवरण भी एक्सटेंशन के गैर-तकनीकी उपयोगकर्ताओं को क्रोम एक्सटेंशन को विश्वसनीयता प्रदान करता है।

बाद में उठाए गए बिंदु सामग्री स्क्रिप्ट के निर्माण में काफी ठोस हैं।

अनुमतियाँ ऑब्जेक्ट सामग्री स्क्रिप्ट के निष्पादन के लिए मार्ग पर प्रकाश डालता है। यह सामग्री स्क्रिप्ट को अप्रत्याशित टैब और वेब पेजों में चलने से भी रोकता है। यह हमें उन सभी अनुमतियों को सूचीबद्ध करने की अनुमति देता है जिनकी हमारे Chrome एक्सटेंशन को आवश्यकता हो सकती है। कुछ क्रोम एक्सटेंशन को ब्राउज़र स्टोरेज, अन्य क्रोम एपीआई और कुछ संबंधित साइटों तक पहुंच की आवश्यकता हो सकती है। इस परियोजना के लिए हमारे मामले में, हम अपने क्रोम एक्सटेंशन को केवल उपयोग किए जा रहे सक्रिय ब्राउज़र टैब तक सीमित कर रहे हैं। हमारे क्रोम ब्राउज़र के अन्य गैर-उपयोग किए गए हिस्सों से समझौता करने वाले क्रोम एक्सटेंशन के जोखिम को कम करने के लिए इसे रखना महत्वपूर्ण है।

फिर हम अपनी मेनिफेस्ट फ़ाइल में सामग्री स्क्रिप्ट फ़ील्ड को कॉन्फ़िगर करेंगे।
सामग्री स्क्रिप्ट फ़ील्ड उन विभिन्न कोड फ़ाइलों को निर्दिष्ट करती है जिन्हें हम अपने वेब पेज में इंजेक्ट करना चाहते हैं।
इसमें मिलान उप फ़ील्ड शामिल है जो उस वेबपेज यूआरएल को निर्दिष्ट करता है जिस पर हम कार्य करना चाहते हैं। उपयोग में आसानी के लिए, हमने सभी यूआरएल को शामिल कर लिया है, जिससे यह हमारे द्वारा एक्सेस किए जाने वाले सभी वेब पेजों पर काम कर सके। हालाँकि, आप वह URL निर्दिष्ट कर सकते हैं जिसे आप सबफ़ील्ड मान में इंजेक्ट करना चाहते हैं। जैसे www.google.com,

"matches": ["https://*.google.com/*"]
run_at": "document_idle

जेएस फ़ाइलें जिनमें इंजेक्शन कोड होता है, भी निर्दिष्ट हैं। हमारे मामले में,
हमारी JS फ़ाइल का नाम कंटेंट स्क्रिप्ट.जेएस है। हमने इस प्रोजेक्ट को स्टाइल करने में प्रयुक्त सीएसएस फ़ाइल भी निर्दिष्ट की है।

इसके साथ, हमने अपने प्रोजेक्ट के लिए मेनिफेस्ट फ़ाइल का एक लघु कार्यान्वयन किया है। इसके बाद हम अगले अनुभाग में अपना इंजेक्शन कोड लिखेंगे

सामग्री स्क्रिप्ट बनाना

चीज़ों को सरल बनाए रखने की भावना से, हम एक सरल बटन बनाएंगे जिस पर क्लिक करने पर एक चेतावनी संदेश दिखाई देगा। इस बटन से मौजूदा वेबपेज को ओवरले करने की उम्मीद है।
यहाँ नीचे कोड है

// Create a button element
const button = document.createElement("button");

// Set the button's text content
button.textContent = "Click me";

// Set the button's ID
button.id = "clickMe";

// Append the button to the document body
document.body.appendChild(button);

// Add a click event listener to the button
button.addEventListener("click", () => {
  // Show an alert when the button is clicked
  alert("Click event listener was added");

  // Log a message to the console
  console.log("Hello world");
});

स्टाइल को आपकी पसंद के अनुरूप बदला जा सकता है, हालांकि कोड रिपॉजिटरी में एक स्टाइलिंग टेम्पलेट शामिल किया गया है।

यहां इसके कार्यान्वयन की एक तस्वीर है।

यहां कोड शैली वाले स्रोत कोड का लिंक दिया गया है।

उन्नत तकनीकें और उपयोग के मामले

अब तक हमने परियोजना पूरी कर ली है। हालाँकि, किसी के ज्ञान को आगे बढ़ाने के लिए, यहां कुछ उन्नत तकनीकें और सर्वोत्तम प्रथाएं दी गई हैं जिन्हें आप सामग्री स्क्रिप्ट बनाते समय भी लागू कर सकते हैं।

• ब्राउज़र पृष्ठभूमि स्क्रिप्ट के साथ क्रॉस-इंटरैक्शन
• डायनामिक स्क्रिप्टिंग की अनुमति देने के लिए डेटा स्टेट प्रबंधकों का कार्यान्वयन
• अन्य बाहरी एपीआई को एकीकृत करने से डेटा हेरफेर और विश्लेषण की अनुमति मिलती है
• विस्तार प्रदर्शन को अनुकूलित करने के लिए कैशिंग रणनीतियों को नियोजित करना
• सेवा कर्मियों के साथ सामग्री स्क्रिप्ट को एकीकृत करना

निष्कर्ष

आप मेरे ब्लॉग पर भी मेरे साथ बातचीत कर सकते हैं और मेरे अन्य लेख यहां देख सकते हैं। अगली बार तक, कोडिंग जारी रखें!