আপনার নিজস্ব ব্রাউজার এক্সটেনশন তৈরি করুন: নমুনা প্রজেক্টসহ ধাপে ধাপে গাইড

এই আর্টিকেলে আমরা ব্রাউজার এক্সটেনশন সম্পর্কে আলোচনা করব – এটি কী, কীভাবে কাজ করে, এবং আপনি কীভাবে নিজের এক্সটেনশন বানাতে পারেন।

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

এই আর্টিকেলের সাথে চলতে रहने کے लिए:

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

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

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

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

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

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

শুরুতে, একটি ফোল্ডার তৈরি করুন এবং তার ভিতরে 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-এ একটি কন্টেন্ট স্ক্রিপ্ট যোগ করেছি। কন্টেন্ট স্ক্রিপ্ট ওয়েব পেজের ডকুমেন্ট অবজেক্ট মডেল (DOM) ম্যানিপুলেট করতে পারে। কন্টেন্ট স্ক্রিপ্ট ব্যবহার করে আমরা একটি ওয়েব পেজে জাভাস্ক্রিপ্ট (এবং CSS) ইনজেক্ট করতে পারি।

"matches" এ কন্টেন্ট স্ক্রিপ্ট যেখানে যোগ হবে সেই ডোমেন এবং সাবডোমেনের তালিকা থাকে, আর js হল লোড হওয়া জাভাস্ক্রিপ্ট ফাইলগুলোর অ্যারে।

এখন একই ডিরেক্টরিতে main.js নামে একটি ফাইল তৈরি করুন এবং নিচের কোডটি যোগ করুন:

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

এখন এক্সটেনশনটি রিলোড করুন এবং যেকোনো URL ভিজিট করলে একটি অ্যালার্ট মেসেজ দেখবেন।

কোড এডিট করার সময় এক্সটেনশনটি রিলোড করা ভুলবেন না।

আপনার ব্রাউজার এক্সটেনশন কাস্টমাইজ করার উপায়

এখন এক্সটেনশনের সাথে আরও মজা করি।

আমরা এখন একটি ওয়েব এক্সটেনশন তৈরি করব যা আমরা যে ওয়েবপেজে যাব সেখানে সব ইমেজ পরিবর্তন করে আমাদের পছন্দের একটি ইমেজ দেখাবে।

এজন্য, বর্তমান ডিরেক্টরিতে যেকোনো একটি ইমেজ যোগ করুন এবং 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 ট্যাগ वाले এলিমেন্ট সিলেক্ট করে।

তারপর আমরা একটি ফর লুপ ব্যবহার করে images অ্যারেতে লুপ চালাই এবং সব img এলিমেন্টের src অ্যাট্রিবিউট পরিবর্তন করি 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-এ। এছাড়া active কীটি true সেট করলে নতুন তৈরি ট্যাবটি করেন্ট ট্যাব হয়ে যায়।

নোট করুন যে ব্যাকগ্রাউন্ড স্ক্রিপ্টে ব্রাউজার tarafından প্রদত্ত API-গুলো ব্যবহার করা যায়। API-র আরও জানতে এই আর্টিকেলটি দেখুন: JavaScript 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) //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 ক্লাস নামওয়ালা সব এলিমেন্ট সিলেক্ট করেছি – কিন্তু কেন? কারণ স্ট্যাকওভারফ্লোর সাইট ইন্সপেক্ট করলে আমি দেখলাম সব কোড স্নিপেটই এই ক্লাস নামের মধ্যে রাখা আছে।

তারপর আমরা সেই সব এলিমেন্টের মাধ্যমে লুপ চালিয়ে প্রতিটিতে একটি বাটন অ্যাপেন্ড করেছি। শেষে, বাটনটি সঠিকভাবে পজিশন এবং স্টাইল করেছি (স্টাইলিং এখনো পারফেক্ট নয় – এটি শুধু একটি শুরু)।

উপরোক্ত প্রক্রিয়া অনুযায়ী এক্সটেনশনটি লোড করলে এবং স্ট্যাকওভারফ্লো ভিজিট করলে একটি কপি বাটন দেখতে পাবেন।

বাটনে ফাংশনালিটি যোগ করার উপায়

এখন, বাটনে ক্লিক করলে পুরো স্নিপেটটি ক্লিপবোর্ডে কপি হোক। এর জন্য 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 রিপোজিটরিতে পাওয়া যাবে। ভালো স্টাইলিং বা নতুন ফিচার যেমন ক্লিপবোর্ড হিস্টরি ইত্যাদি চিন্তা করলে পুল রিকোয়েস্ট দিতে ভুলবেন না।

হ্যাপি কোডিং!