কিভাবে আপনার নিজের ব্রাউজার এক্সটেনশন লিখবেন [উদাহরণ প্রকল্প অন্তর্ভুক্ত]

এই নিবন্ধে আমরা ব্রাউজার এক্সটেনশনগুলি সম্পর্কে কথা বলব - সেগুলি কী, তারা কীভাবে কাজ করে এবং কীভাবে আপনি নিজের তৈরি করতে পারেন৷

আমরা আসলে আমাদের নিজস্ব এক্সটেনশন (সুপার ফান!) লিখে শেষ করব যা আমাদের ক্লিপবোর্ডে যেকোন কোড স্নিপেটকে একটি মাত্র বোতামে ক্লিক করার অনুমতি দেয়।

এই নিবন্ধটি চালিয়ে যেতে:

• আপনাকে জাভাস্ক্রিপ্ট সম্পর্কে প্রাথমিক ধারণা থাকতে হবে।
• আপনার ফায়ারফক্স ব্রাউজার প্রয়োজন (অথবা অন্য কোন ব্রাউজারও কাজ করবে)

একটি ব্রাউজার এক্সটেনশন কি?

একটি ব্রাউজার এক্সটেনশন হল এমন কিছু যা আপনি আপনার ব্রাউজারে যোগ করেন যা আপনার ব্রাউজারের ক্ষমতা বাড়িয়ে আপনার ব্রাউজিং অভিজ্ঞতা বাড়ায়।

উদাহরণ হিসাবে, একটি বিজ্ঞাপন ব্লকার সম্পর্কে চিন্তা করুন যা আপনি আপনার ডিভাইসে ইনস্টল করেছেন। আপনি যখন ওয়েব সার্ফ করেন তখন বিজ্ঞাপনগুলি ব্লক করে এটি আপনার ব্রাউজিং অভিজ্ঞতাকে আরও ভাল করে তোলে৷

কিভাবে আপনার নিজের মৌলিক ব্রাউজার এক্সটেনশন লিখবেন

এখন একটি খুব মৌলিক এক্সটেনশন লিখে শুরু করা যাক।

শুরু করার জন্য, আমরা একটি ফোল্ডার তৈরি করব যার ভিতরে আমরা manifest.json নামে একটি ফাইল তৈরি করব .

একটি ম্যানিফেস্ট ফাইল কি?

একটি ম্যানিফেস্ট ফাইল যেকোন ব্রাউজার এক্সটেনশনে একটি ফাইল থাকা আবশ্যক৷ এই ফাইলটিতে আমাদের এক্সটেনশন যেমন নাম, সংস্করণ এবং আরও অনেক কিছু সম্পর্কে প্রাথমিক ডেটা রয়েছে৷

এখন manifest.json এর ভিতরে ফাইল নিম্নলিখিত স্নিপেট অনুলিপি করুন:

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

এক্সটেনশন ফাইল কিভাবে লোড করবেন

ফায়ারফক্স ব্যবহারকারীদের জন্য, এই পদক্ষেপগুলি অনুসরণ করুন:

ঠিকানা বারে, এটির জন্য অনুসন্ধান করুন:

about:debugging#/runtime/this-firefox

আপনি অস্থায়ী অ্যাড-অন লোড করার একটি বিকল্প দেখতে পাবেন . সেই বিকল্পে ক্লিক করুন এবং manifest.json বেছে নিন ডিরেক্টরি থেকে ফাইল।

Chrome ব্যবহারকারীদের জন্য:

ঠিকানা বারে এটির জন্য অনুসন্ধান করুন:

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 লোড করা 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 কল করে ফাংশন যা আমার টুইটার প্রোফাইলের সাথে লিঙ্কযুক্ত URL সহ একটি নতুন ট্যাব খোলে। এছাড়াও, সক্রিয় কী, সত্যে সেট করা হলে, নতুন তৈরি ট্যাবটিকে বর্তমান ট্যাবে পরিণত করে।

মনে রাখবেন আপনি পটভূমি স্ক্রিপ্টে ব্রাউজার দ্বারা প্রদত্ত API ব্যবহার করতে পারেন। API সম্পর্কে আরও জানতে নিম্নলিখিত নিবন্ধটি পড়ুন:Javacript APIs।

এখন যেহেতু আমরা ব্রাউজার এক্সটেনশনের কিছু মৌলিক বিষয় শিখেছি, আসুন একটি এক্সটেনশন তৈরি করি যা ডেভেলপার হিসেবে আমরা আমাদের দৈনন্দিন জীবনে ব্যবহার করতে পারি।

চূড়ান্ত প্রকল্প

ঠিক আছে, এখন আমরা এমন কিছু লিখতে যাচ্ছি যা আমাদের দৈনন্দিন জীবনে কাজে লাগবে। আমরা একটি এক্সটেনশন তৈরি করব যা আপনাকে স্ট্যাকওভারফ্লো থেকে একক ক্লিকে কোড স্নিপেট কপি করতে দেয়। তাই আমাদের এক্সটেনশন একটি 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 নামে আরেকটি জাভাস্ক্রিপ্ট ফাইল তৈরি করুন একই ডিরেক্টরিতে এবং কোডের নিম্নলিখিত লাইনগুলি যোগ করুন:

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 এর সাইট পরিদর্শন করেছি তখন আমি দেখতে পেয়েছি যে সমস্ত কোড স্নিপেট এই নামের একটি ক্লাসে রাখা হয়েছে৷

এবং তারপরে আমরা সেই সমস্ত উপাদানগুলি লুপ করি এবং সেই উপাদানগুলিতে একটি বোতাম যুক্ত করি। অবশেষে, আমরা শুধু বোতামটি সঠিকভাবে অবস্থান এবং স্টাইল করি (স্টাইলিংটি এখনও নিখুঁত নয় – এটি কেবল একটি শুরু)।

আমরা উপরের প্রক্রিয়াটি ব্যবহার করে যখন আমরা এক্সটেনশন লোড করি এবং 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 সংগ্রহস্থলে পাওয়া যাবে। আপনি যখনই কিছু ভাল স্টাইলিং বা ক্লিপবোর্ডের ইতিহাস এবং অন্যদের মতো একটি নতুন বৈশিষ্ট্য নিয়ে আসবেন তখনই একটি পুল অনুরোধ জানাতে ভুলবেন না৷

শুভ কোডিং!