अपना खुद का ब्राउज़र एक्सटेंशन कैसे लिखें [उदाहरण परियोजना शामिल]

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

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

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

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

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

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

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

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

अब एक बहुत ही बुनियादी विस्तार लिखकर शुरू करते हैं।

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

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

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

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

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

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

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

पता बार में, इसे खोजें:

about:debugging#/runtime/this-firefox

आपको अस्थायी ऐड-ऑन लोड करने . का विकल्प दिखाई देगा . उस विकल्प पर क्लिक करें और manifest.json . चुनें निर्देशिका से फ़ाइल।

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

पता बार में इसे खोजें:

chrome://extensions.

• डेवलपर मोड सक्षम करें और उसमें स्विच करें।
• अनपैक लोड करें बटन पर क्लिक करें और एक्सटेंशन निर्देशिका चुनें।

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

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

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

"matches" इसमें उन डोमेन और उप डोमेन की सूची शामिल है जहां सामग्री स्क्रिप्ट जोड़ी जानी चाहिए और 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 . के साथ सभी तत्वों का चयन करती है टैग।

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

यहां 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 . पर कॉल करता है फ़ंक्शन जो मेरे ट्विटर प्रोफाइल से लिंक होने वाले यूआरएल के साथ एक नया टैब खोलता है। साथ ही, सक्रिय कुंजी, जब सत्य पर सेट होती है, नव निर्मित टैब को वर्तमान टैब बनाती है।

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

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

फाइनल प्रोजेक्ट

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

डेमो

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

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

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

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

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

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)
 //styling the button
 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`
 //end of styling the button
   
   console.log("Appended")
}

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

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

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

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

अब, जब बटन पर क्लिक किया जाता है तो हम चाहते हैं कि पूरा स्निपेट हमारे क्लिप बोर्ड पर कॉपी हो जाए। ऐसा करने के लिए, कोड की निम्न पंक्ति को 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 रिपॉजिटरी में पाए जा सकते हैं। जब भी आप कुछ अच्छी स्टाइल या क्लिपबोर्ड इतिहास और अन्य जैसी नई सुविधा के साथ आते हैं, तो पुल अनुरोध देना न भूलें।

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