|
Login | Signup |
আপনার কি কখনও মনে হয়, “ইশ! আমার ব্রাউজারে যদি এমন একটা এক্সটেনশন থাকতো যেটা আমার কাজটা আরও সহজ করে দিতো?” যদি এমন চিন্তা করে থাকেন, তাহলে আজকের এই টিউটোরিয়াল আপনার জন্য। আজকে আমরা শিখবো, কীভাবে JavaScript দিয়ে সহজভাবে একটা ব্রাউজার এক্সটেনশন বানানো যায়।
তো, চা কফি নিয়া বসেন আর মনোযোগ দিয়া পড়েন।
ব্রাউজার এক্সটেনশন হইলো এক ধরনের ছোট্ট সফটওয়্যার যেটা আপনার ব্রাউজারের ফাংশনালিটি বাড়াইতে সাহায্য করে।
উদাহরণ:
আমাদের যেই স্ক্রিপ্ট বা টুল দরকার, সেটা আমরা এক্সটেনশনের মাধ্যমে তৈরি কইরা নিতে পারি।
একটা ব্রাউজার এক্সটেনশন বানাইতে আপনাকে কিছু ফাইল আর কোডিং স্কিল লাগবে। কিন্তু ভয় পাইয়েন না, আমি সহজভাবে সব ব্যাখ্যা করবো।
প্রথমেই আপনার পিসিতে একটা ফোল্ডার বানান। ফোল্ডারের নাম দিন MyExtension।
এই ফোল্ডারের ভেতরে আপনার সব ফাইল রাখবেন।
এই ফাইলটা হলো এক্সটেনশনের হার্ট। এটা ছাড়া এক্সটেনশন চলবে না।
MyExtension ফোল্ডারে একটা manifest.json নামে ফাইল বানান। তারপর নিচের কোডটা কপি করে এতে পেস্ট করেন।
{ "manifest_version": 3, "name": "My First Extension", "version": "1.0", "description": "এটা আমার প্রথম ব্রাউজার এক্সটেনশন।", "icons": { "48": "icon.png" }, "action": { "default_popup": "popup.html", "default_icon": "icon.png" }, "permissions": ["storage", "activeTab"] }
এখন আপনার এক্সটেনশনের জন্য একটা popup.html ফাইল বানান। এই ফাইলটা হলো ইউজার ইন্টারফেস।
<!DOCTYPE html> <html> <head> <title>My Extension</title> <style> body { font-family: Arial, sans-serif; padding: 20px; text-align: center; } button { padding: 10px 20px; margin-top: 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #0056b3; } </style> </head> <body> <h1>My First Extension</h1> <button id="clickMe">Click Me!</button> <script src="popup.js"></script> </body> </html>
এখন popup.js নামে একটা ফাইল বানান। এই ফাইলটা popup.html এ যুক্ত আছে।
document.getElementById("clickMe").addEventListener("click", function() { alert("বাটনে ক্লিক করছেন!"); });
একটা icon.png ফাইল ডাউনলোড করে MyExtension ফোল্ডারে রাখেন।
ব্যস! আপনার এক্সটেনশন এখন ব্রাউজারে দেখা যাবে।
আপনার এক্সটেনশনে ডেটা সেভ করার জন্য Chrome এর স্টোরেজ API ইউজ করতে পারেন।
chrome.storage.sync.set({key: "value"}, function() { console.log("ডেটা সেভ হইছে!"); }); chrome.storage.sync.get("key", function(data) { console.log("সেভ করা ডেটা:", data.key); });
এক্সটেনশনে background.js নামে একটা ফাইল অ্যাড করে ব্যাকগ্রাউন্ড প্রসেস চালাতে পারেন।
Manifest.json এ এটা অ্যাড করেনঃ
"background": { "service_worker": "background.js" }
background.js এ কোডঃ
chrome.runtime.onInstalled.addListener(function() { console.log("এক্সটেনশন ইনস্টল হইছে!"); });
JavaScript দিয়ে ব্রাউজার এক্সটেনশন বানানো এত সহজ ব্যাপার না। কিন্তু একবার শুরু করলে এটা আর কঠিন লাগবে না। আশা করি এই টিউটোরিয়াল আপনার উপকারে আসবে। যদি কোন জায়গায় বুঝতে সমস্যা হয়, তাইলে কমেন্ট করে জানাইয়েন। নতুন আইডিয়া নিয়া আবারও হাজির হব।
যেকোনো ধরনের কাস্টম প্লাগিন বা Browser Extension এর জন্য জয়েন হতে পারেন আমার টেলিগ্রামে।
শুভ কামনা!
 |
Tanver Hossain
author
Always try to amuse people by your ability. Create an ultimate chaos on human hearts. Prove it you are a predecessor of Hazrat Muhammad (S). |
You must be logged in to post a comment.
My Telegram
Nice
শুকরিয়া।
Getting Back to our old Trickbd..
Topic & explanation onk valo cilo vai, emon type er post continue korle valo hoy vai..! ☺️🥀💝💝
আপনাদের এমন সুন্দর মতামত এর জন্যই লেখা। ধন্যবাদ।
ব্রাউজার এক্সটেনশন হইলো এক ধরনের ছোট্ট সফটওয়্যার🤮
যা ব্রাউজারের অভ্যন্তরীণ ফাংশনালিটিকে কাজে লাগিয়ে সক্রিয় ভাবে ইনপুট ও আউটপুট প্রসেস করে।
🤮
Onek shundor post. Old Trickbd er feel pailam bohu din por.
ধন্যবাদ আসিফ ভাই আপনার সুন্দর মন্তব্যের জন্য। ট্রিকবিডির বয়স হয়েছে কিন্তু গুণে ঝং লাগেনি।
Super! Carry on, Bro
আপনাকে সাধুবাদ জানাই।
tutorial with easy explanation.
carry on brother 🤍
শুকরিয়া ভাই, আপনাদের অনুপ্রেরণায় লিখতে উৎসাহ জোগায়।