নিজেই বানান Browser Extensions [Hot Post]

Nill ডিসেম্বর ৩১, ২০২৪

পরিচিতি

আপনার কি কখনও মনে হয়, “ইশ! আমার ব্রাউজারে যদি এমন একটা এক্সটেনশন থাকতো যেটা আমার কাজটা আরও সহজ করে দিতো?” যদি এমন চিন্তা করে থাকেন, তাহলে আজকের এই টিউটোরিয়াল আপনার জন্য। আজকে আমরা শিখবো, কীভাবে JavaScript দিয়ে সহজভাবে একটা ব্রাউজার এক্সটেনশন বানানো যায়।

তো, চা কফি নিয়া বসেন আর মনোযোগ দিয়া পড়েন।

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

ব্রাউজার এক্সটেনশন হইলো এক ধরনের ছোট্ট সফটওয়্যার যেটা আপনার ব্রাউজারের ফাংশনালিটি বাড়াইতে সাহায্য করে।
উদাহরণ:

AdBlocker: বিজ্ঞাপন ব্লক করে।
Grammarly: টাইপিং ভুল ঠিক করে।
Dark Reader: সাইটগুলারে ডার্ক মোডে দেখায়।

আমাদের যেই স্ক্রিপ্ট বা টুল দরকার, সেটা আমরা এক্সটেনশনের মাধ্যমে তৈরি কইরা নিতে পারি।

ব্রাউজার এক্সটেনশন বানাইতে যা লাগবে

একটা ব্রাউজার এক্সটেনশন বানাইতে আপনাকে কিছু ফাইল আর কোডিং স্কিল লাগবে। কিন্তু ভয় পাইয়েন না, আমি সহজভাবে সব ব্যাখ্যা করবো।

ফাইল যেগুলা লাগবে:

Manifest.json: এক্সটেনশনের মেইন ফাইল।
HTML ফাইল: ইউজার ইন্টারফেসের জন্য।
CSS ফাইল: স্টাইলিংয়ের জন্য।
JavaScript ফাইল: মূল কাজের জন্য।

স্টেপ ১: প্রজেক্ট ফোল্ডার তৈরি

প্রথমেই আপনার পিসিতে একটা ফোল্ডার বানান। ফোল্ডারের নাম দিন MyExtension।
এই ফোল্ডারের ভেতরে আপনার সব ফাইল রাখবেন।

স্টেপ ২: Manifest.json তৈরি

এই ফাইলটা হলো এক্সটেনশনের হার্ট। এটা ছাড়া এক্সটেনশন চলবে না।

কোডঃ

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"]
}

এখানে কী হইলো?

manifest_version: এটা ব্রাউজারের জন্য এক্সটেনশনের ভার্সন ডিফাইন করে।
name: আপনার এক্সটেনশনের নাম।
description: এক্সটেনশনের কাজ।
action: কোন ফাইল/ইন্টারফেস চালু হবে সেটা বলে।
permissions: এক্সটেনশন কী কী পারমিশন নিবে।

স্টেপ ৩: Popup.html তৈরি

এখন আপনার এক্সটেনশনের জন্য একটা 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.js তৈরি

এখন popup.js নামে একটা ফাইল বানান। এই ফাইলটা popup.html এ যুক্ত আছে।

কোডঃ

document.getElementById("clickMe").addEventListener("click", function() {
  alert("বাটনে ক্লিক করছেন!");
});

এখানে কী হইলো?

বাটনে ক্লিক করলে একটা অ্যালার্ট দেখাবে।

স্টেপ ৫: আইকন যোগ করা

একটা icon.png ফাইল ডাউনলোড করে MyExtension ফোল্ডারে রাখেন।
এটা আপনার এক্সটেনশনের আইকন হবে।

স্টেপ ৬: ব্রাউজারে এক্সটেনশন লোড করা

Chrome ব্রাউজারে লোড করার নিয়মঃ

Chrome ওপেন করেন।
chrome://extensions/ এই লিংকে যান।
ডান দিক থেকে Developer Mode অন করেন।
Load Unpacked বাটনে ক্লিক করেন।
আপনার 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 এর জন্য জয়েন হতে পারেন আমার টেলিগ্রামে।

My Telegram