अपना ब्राउज़र एक्सटेंशन बनाएं: नमूना प्रोजेक्ट के साथ चरण-दर-चरण गाइड

इस लेख में हम ब्राउज़र एक्सटेंशन के बारे में बात करेंगे - वे क्या हैं, कैसे काम करते हैं, और आप अपना खुद का कैसे बना सकते हैं।

हम अंत में अपना खुद का एक्सटेंशन (सुपर फन!) लिखेंगे जो हमें किसी भी कोड स्निपेट को एक क्लिक से क्लिपबोर्ड पर कॉपी करने की अनुमति देता है।

इस लेख को जारी रखने के लिए:

• आपको जावास्क्रिप्ट की बुनियादी समझ होनी चाहिए।
• आपको फ़ायरफ़ॉक्स ब्राउज़र की आवश्यकता होगी (या कोई अन्य ब्राउज़र भी काम करेगा)

ब्राउज़र एक्सटेंशन क्या है?

ब्राउज़र एक्सटेंशन वह चीज़ है जिसे आप अपने ब्राउज़र में जोड़ते हैं जो आपके ब्राउज़र की क्षमता को बढ़ाकर आपके ब्राउज़िंग अनुभव को बेहतर बनाता है।

उदाहरण के लिए, एक एड ब्लॉकर के बारे में सोचें जिसे आपने अपने डिवाइस पर इंस्टॉल किया होगा। यह वेब सर्फ करते समय विज्ञापनों को ब्लॉक करके आपके ब्राउज़िंग अनुभव को बेहतर बनाता है।

अपना बेसिक ब्राउज़र एक्सटेंशन कैसे लिखें

अब आइए एक बहुत ही बेसिक एक्सटेंशन लिखना शुरू करते हैं।

शुरू करने के लिए, हम एक फोल्डर बनाएंगे जिसके अंदर हम manifest.json नाम की एक फाइल बनाएंगे।

मैनिफेस्ट फाइल क्या है?

मैनिफेस्ट फाइल किसी भी ब्राउज़र एक्सटेंशन में एक अनिवार्य फाइल होती है। इस फाइल में हमारे एक्सटेंशन के बारे में बुनियादी डेटा होता है जैसे नाम, संस्करण, आदि।

अब manifest.json फाइल के अंदर निम्नलिखित स्निपेट कॉपी करें:

{ "manifest_version": 2, "version": "1.0", "name": "Test" }

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

फ़ायरफ़ॉक्स उपयोगकर्ताओं के लिए, इन चरणों का पालन करें:

एड्रेस बार में, इसके लिए खोजें:

about:debugging#/runtime/this-firefox

आपको Load Temporary Add-on का विकल्प दिखाई देगा। उस विकल्प पर क्लिक करें और डायरेक्टरी से manifest.json फाइल चुनें।

क्रोम उपयोगकर्ताओं के लिए:

एड्रेस बार में इसके लिए खोजें:

chrome://extensions

• डेवलपर मोड सक्षम करें और उस पर स्विच करें।
• Load unpacked बटन पर क्लिक करें और एक्सटेंशन डायरेक्टरी चुनें।

बधाई! आपने एक्सटेंशन को सफलतापूर्वक इंस्टॉल कर लिया है। लेकिन एक्सटेंशन फिलहाल कुछ नहीं करता। अब आइए अपने एक्सटेंशन में कुछ कार्यक्षमता जोड़ते हैं। इसके लिए, हम अपनी manifest.json फाइल को इस तरह संपादित करेंगे:

{ "manifest_version": 2, "version": "1.0", "name": "Test", "content_scripts": [ { "matches": ["<all_urls>"], "js": ["main.js"] } ] }

उपरोक्त कोड में, हमने manifest.json में एक कंटेंट स्क्रिप्ट जोड़ी। कंटेंट स्क्रिप्ट वेब पेज के डॉक्यूमेंट ऑब्जेक्ट मॉडल में हेरफेर कर सकती हैं। हम कंटेंट स्क्रिप्ट का उपयोग करके वेब पेज में JS (और CSS) इंजेक्ट कर सकते हैं।

"matches" में डोमेन और सबडोमेन की सूची होती है जहां कंटेंट स्क्रिप्ट जोड़ी जानी चाहिए और js लोड की जाने वाली JS फाइलों की एक सरणी है।

अब उसी डायरेक्टरी के अंदर एक main.js फाइल बनाएं और निम्नलिखित कोड जोड़ें:

alert("The test extension is up and running")

अब एक्सटेंशन को रीलोड करें और जब आप किसी भी URLs पर जाएंगे तो आपको एक अलर्ट संदेश दिखाई देगा।

कभी भी कोड संपादित करने पर एक्सटेंशन को रीलोड करना न भूलें।

अपने ब्राउज़र एक्सटेंशन को कैसे कस्टमाइज़ करें

अब आइए अपने एक्सटेंशन के साथ कुछ और मज़ा करते हैं।

हम अब एक वेब एक्सटेंशन बनाने जा रहे हैं जो हमारे द्वारा देखे जाने वाले वेबपेज की सभी छवियों को हमारे द्वारा चुनी गई छवि में बदल देता है।

इसके लिए, वर्तमान डायरेक्टरी में कोई भी छवि जोड़ें और main.js फाइल को इस तरह बदलें:

console.log("The extension is up and running"); var images = document.getElementsByTagName('img') for (elt of images){ elt.src = `${browser.runtime.getURL("pp.jpg")}` elt.alt = 'an alt text' }

आइए देखते हैं कि यहां क्या हो रहा है:

var images = document.getElementsByTagName('img')

कोड की यह लाइन वेब पेज में img टैग वाले सभी तत्वों का चयन करती है।

फिर हम एक फॉर लूप का उपयोग करके छवियों की सरणी के माध्यम से लूप करते हैं जहां हम runtime.getURL फ़ंक्शन की मदद से एक URL के साथ सभी img तत्वों के src एट्रिब्यूट को बदलते हैं।

यहां pp.jpg मेरे डिवाइस में वर्तमान डायरेक्टरी में छवि फ़ाइल का नाम है।

हमें अपने कंटेंट स्क्रिप्ट को pp.jpg फ़ाइल के बारे में सूचित करने की आवश्यकता है manifest.json फाइल को इस तरह संपादित करके:

{ "manifest_version": 2, "version": "1.0", "name": "Test", "content_scripts": [ { "matches": ["<all_urls>"], "js": ["main.js"] } ], "web_accessible_resources": [ "pp.jpg" ] }

फिर बस एक्सटेंशन को रीलोड करें और अपनी पसंद का कोई भी URL देखें। अब आपको अपने वर्तमान वर्किंग डायरेक्टरी में मौजूद छवि में बदली हुई सभी छवियां दिखाई देनी चाहिए।

अपने एक्सटेंशन में आइकन कैसे जोड़ें

manifest.json फाइल में निम्नलिखित कोड जोड़ें:

"icons": { "48": "icon-48.png", "96": "icon-96.png" }

अपने एक्सटेंशन में टूलबार बटन कैसे जोड़ें

अब हम आपके ब्राउज़र के टूलबार में स्थित एक बटन जोड़ेंगे। उपयोगकर्ता इस बटन का उपयोग करके एक्सटेंशन के साथ इंटरैक्ट कर सकते हैं।

टूलबार बटन जोड़ने के लिए, manifest.json फाइल में निम्नलिखित लाइनें जोड़ें:

"browser_action":{ "default_icon":{ "19":"icon-19.png", "38":"icon-38.png" } }

सभी छवि फ़ाइलें आपके वर्तमान डायरेक्टरी में मौजूद होनी चाहिए।

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

टूलबार बटन के लिए सुनने की घटनाएं कैसे जोड़ें

शायद हम चाहते हैं कि जब कोई उपयोगकर्ता बटन पर क्लिक करे तो कुछ हो - मान लीजिए हम हर बार बटन क्लिक होने पर एक नया टैब खोलना चाहते हैं।

इसके लिए, हम manifest.json फाइल में फिर से निम्नलिखित जोड़ेंगे:

"background":{ "scripts":["background.js"] }, "permissions":[ "tabs" ]

फिर हम वर्तमान वर्किंग डायरेक्टरी में background.js नाम की एक नई फाइल बनाएंगे और उसमें निम्नलिखित लाइनें जोड़ेंगे:

function openTab(){ var newTab = browser.tabs.create({ url:'https://twitter.com/abhilekh_gautam', active:true }) } browser.browserAction.onClicked.addListener(openTab)

अब एक्सटेंशन को रीलोड करें!

जब भी कोई बटन पर क्लिक करता है, तो यह openTab फ़ंक्शन को कॉल करता है जो मेरे ट्विटर प्रोफाइल से लिंक वाले URL के साथ एक नया टैब खोलता है। साथ ही, सक्रिय कुंजी, जब true पर सेट होती है, तो नए बनाए गए टैब को वर्तमान टैब बना देती है।

ध्यान दें कि आप बैकग्राउंड स्क्रिप्ट में ब्राउज़र द्वारा प्रदान किए गए API का उपयोग कर सकते हैं। API के बारे में अधिक जानकारी के लिए निम्नलिखित लेख देखें: जावास्क्रिप्ट APIs।

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

अंतिम प्रोजेक्ट

ठीक है, अब हम कुछ ऐसा लिखने जा रहे हैं जो हमारे दैनिक जीवन में उपयोगी होगा। हम एक ऐसा एक्सटेंशन बनाएंगे जो आपको स्टैकओवरफ्लो से कोड स्निपेट को एक क्लिक से कॉपी करने की अनुमति देता है। तो हमारा एक्सटेंशन वेबपेज पर एक Copy बटन जोड़ेगा जो कोड को हमारे क्लिपबोर्ड पर कॉपी करता है।

डेमो

सबसे पहले हम एक नया फोल्डर/डायरेक्टरी बनाएंगे, जिसके अंदर हम एक manifest.json फाइल जोड़ेंगे।

फाइल में निम्नलिखित कोड जोड़ें:

{ "manifest_version": 2, "version": "1.0", "name": "copy code", "content_scripts": [ { "matches": ["*://*.stackoverflow.com/*"], "js": ["main.js"] } ] }

content script के अंदर matches को देखें - एक्सटेंशन केवल स्टैकओवरफ्लो के डोमेन और सबडोमेन के लिए काम करेगा।

अब उसी डायरेक्टरी में main.js नाम की एक और जावास्क्रिप्ट फाइल बनाएं और निम्नलिखित कोड लाइनें जोड़ें:

var arr = document.getElementsByClassName("s-code-block") for(let i = 0; i < arr.length; i++){ var btn = document.createElement("button") btn.classList.add("copy_code_button") btn.appendChild(document.createTextNode("Copy")) arr[i].appendChild(btn) // बटन को स्टाइल करना btn.style.position = "relative" if(arr[i].scrollWidth === arr[i].offsetWidth && arr[i].scrollHeight === arr[i].offsetHeight) btn.style.left = `${arr[i].offsetWidth - 70}px` else if(arr[i].scrollWidth != arr[i].offsetWidth && arr[i].scrollHeight === arr[i].offsetWidth) btn.style.left = `${arr[i].offsetWidth - 200}px` else btn.style.left = `${arr[i].offsetWidth - 150}px` if(arr[i].scrollHeight === arr[i].offsetHeight) btn.style.bottom = `${arr[i].offsetHeight - 50}px` else btn.style.bottom = `${arr[i].scrollHeight - 50}px` // बटन को स्टाइल करना समाप्त console.log("Appended") }

सबसे पहले, मैंने s-code-block वर्ग नाम वाले सभी तत्वों का चयन किया - लेकिन क्यों? ऐसा इसलिए है क्योंकि जब मैंने स्टैकओवरफ्लो की साइट का निरीक्षण किया तो मैंने पाया कि सभी कोड स्निपेट उस नाम के एक वर्ग में रखे गए थे।

और फिर हम उन सभी तत्वों के माध्यम से लूप करते हैं और उन तत्वों में एक बटन जोड़ते हैं। अंत में, हम बटन को ठीक से स्थिति और स्टाइल करते हैं (स्टाइलिंग अभी तक सही नहीं है - यह सिर्फ एक शुरुआत है)।

जब हम ऊपर गई प्रक्रिया का उपयोग करके एक्सटेंशन लोड करते हैं और स्टैकओवरफ्लो पर जाते हैं, तो हमें एक कॉपी बटन दिखाई देना चाहिए।

बटन में कार्यक्षमता कैसे जोड़ें

अब, जब बटन पर क्लिक किया जाता है तो हम चाहते हैं कि पूरा स्निपेट हमारे क्लिपबोर्ड पर कॉपी हो जाए। ऐसा करने के लिए, main.js फाइल में निम्नलिखित कोड लाइन जोड़ें:

var button = document.querySelectorAll(".copy_code_button") button.forEach((elm)=>{ elm.addEventListener('click',(e)=>{ navigator.clipboard.writeText(elm.parentNode.childNodes[0].innerText) alert("Copied to Clipboard") }) })

सबसे पहले, हम querySelectorAll का उपयोग करके साइट पर हमारे द्वारा जोड़े गए सभी बटनों का चयन करते हैं। फिर हम क्लिक इवेंट को सुनते हैं जब भी बटन पर क्लिक किया जाता है।

navigator.clipboard.writeText(elm.parentNode.childNodes[0].innerText)

उपरोक्त कोड लाइन कोड को हमारे क्लिपबोर्ड पर कॉपी करती है। जब भी कोई स्निपेट कॉपी होता है तो हम उपयोगकर्ता को Copied to clipboard संदेश के साथ अलर्ट करते हैं और हमारा काम हो गया।

अंतिम शब्द

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

सभी कोड इस GitHub रिपॉजिटरी में पाया जा सकता है। जब भी आप कुछ अच्छी स्टाइलिंग या क्लिपबोर्ड इतिहास जैसी नई सुविधा के साथ आते हैं तो पुल रिक्वेस्ट देना न भूलें।

हैप्पी कोडिंग!