ব্রাউজার এক্সটেনশন ডেভেলপমেন্ট: ম্যানিফেস্ট V3 এবং জাভাস্ক্রিপ্ট API

ব্রাউজার এক্সটেনশন হলো ছোট সফটওয়্যার প্রোগ্রাম যা ব্রাউজিং অভিজ্ঞতাকে কাস্টমাইজ করে। এগুলো নতুন বৈশিষ্ট্য যোগ করতে, ওয়েবসাইটের বিষয়বস্তু পরিবর্তন করতে, বিজ্ঞাপন ব্লক করতে এবং আরও অনেক কিছু করতে পারে। ম্যানিফেস্ট V3 এর আগমনের সাথে, এক্সটেনশন তৈরির এবং পরিচালনার পদ্ধতিতে উল্লেখযোগ্য পরিবর্তন এসেছে। এই বিস্তারিত গাইডটি ম্যানিফেস্ট V3 এবং জাভাস্ক্রিপ্ট API ব্যবহার করে ব্রাউজার এক্সটেনশন ডেভেলপমেন্ট নিয়ে আলোচনা করবে, যা আপনাকে আধুনিক ব্রাউজারগুলির জন্য শক্তিশালী এবং নিরাপদ এক্সটেনশন তৈরি করার জ্ঞান প্রদান করবে।

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

ব্রাউজার এক্সটেনশন মূলত মিনি-অ্যাপ্লিকেশন যা একটি ওয়েব ব্রাউজারের মধ্যে চলে। এগুলো ব্রাউজারের কার্যকারিতা বাড়ায় এবং ওয়েব পৃষ্ঠাগুলির সাথে নির্বিঘ্নে একত্রিত হয়। এক্সটেনশনগুলো HTML, CSS, এবং JavaScript এর মতো স্ট্যান্ডার্ড ওয়েব প্রযুক্তি ব্যবহার করে লেখা হয়, যা ওয়েব ডেভেলপারদের জন্য তুলনামূলকভাবে সহজলভ্য করে তোলে।

জনপ্রিয় ব্রাউজার এক্সটেনশনের উদাহরণগুলির মধ্যে রয়েছে:

• অ্যাড ব্লকার: ওয়েব পৃষ্ঠাগুলিতে বিজ্ঞাপন ব্লক করে, ব্রাউজিংয়ের গতি বাড়ায় এবং মনোযোগের বিক্ষেপ কমায়।
• পাসওয়ার্ড ম্যানেজার: পাসওয়ার্ডগুলি নিরাপদে সংরক্ষণ এবং পরিচালনা করে, ওয়েবসাইটে স্বয়ংক্রিয়ভাবে পূরণ করে।
• নোট-নেওয়ার এক্সটেনশন: ব্যবহারকারীদের নোট নিতে এবং সরাসরি ওয়েব পৃষ্ঠা থেকে সেগুলি সংরক্ষণ করতে দেয়।
• প্রোডাক্টিভিটি টুলস: টাস্ক ম্যানেজমেন্ট, সময় ট্র্যাকিং এবং ফোকাস মোডের মতো বৈশিষ্ট্য সরবরাহ করে উৎপাদনশীলতা বাড়ায়।
• ভাষা অনুবাদ টুল: একটি ক্লিকে ওয়েব পৃষ্ঠাগুলিকে বিভিন্ন ভাষায় অনুবাদ করে। উদাহরণ: গুগল ট্রান্সলেট এক্সটেনশন।
• ভিপিএন এক্সটেনশন: ভৌগলিক সীমাবদ্ধতা বাইপাস করতে এবং গোপনীয়তা বাড়ানোর জন্য ইন্টারনেট ট্র্যাফিক প্রক্সি করে।

ম্যানিফেস্ট V3 এর গুরুত্ব

ম্যানিফেস্ট V3 হলো ম্যানিফেস্ট ফাইলের সর্বশেষ সংস্করণ, যা একটি JSON ফাইল যা ব্রাউজারকে এক্সটেনশন সম্পর্কে বর্ণনা করে। এটি এক্সটেনশনের নাম, সংস্করণ, অনুমতি, ব্যাকগ্রাউন্ড স্ক্রিপ্ট এবং অন্যান্য প্রয়োজনীয় মেটাডেটা রূপরেখা দেয়। ম্যানিফেস্ট V3 তার পূর্বসূরি ম্যানিফেস্ট V2 এর তুলনায় বেশ কয়েকটি মূল পরিবর্তন এনেছে, যা মূলত নিরাপত্তা এবং পারফরম্যান্সের উপর দৃষ্টি নিবদ্ধ করে।

ম্যানিফেস্ট V3 এর মূল পরিবর্তনসমূহ:

• সার্ভিস ওয়ার্কার: ম্যানিফেস্ট V3 ব্যাকগ্রাউন্ড পেজগুলোকে সার্ভিস ওয়ার্কার দ্বারা প্রতিস্থাপন করে। সার্ভিস ওয়ার্কার হলো ইভেন্ট-চালিত স্ক্রিপ্ট যা একটি স্থায়ী পেজের প্রয়োজন ছাড়াই ব্যাকগ্রাউন্ডে চলে। এগুলি ব্যাকগ্রাউন্ড পেজের চেয়ে বেশি কার্যকরী এবং কম রিসোর্স-ইনটেনসিভ।
• ডিক্লেয়ারেটিভ নেট রিকোয়েস্ট API: এই API এক্সটেনশনগুলিকে সরাসরি বাধা না দিয়ে নেটওয়ার্ক অনুরোধগুলি পরিবর্তন করতে দেয়। এটি ব্রাউজারে ফিল্টারিং লজিক অফলোড করে নিরাপত্তা এবং পারফরম্যান্স বাড়ায়।
• কঠোর কনটেন্ট সিকিউরিটি পলিসি (CSP): ম্যানিফেস্ট V3 যথেচ্ছ কোড চালানো রোধ করতে কঠোর CSP নিয়ম প্রয়োগ করে, যা নিরাপত্তা আরও বাড়ায়।
• প্রমিজ-ভিত্তিক API: অনেক API এখন প্রমিজ-ভিত্তিক, যা অ্যাসিঙ্ক্রোনাস অপারেশন পরিচালনা করা সহজ করে তোলে।

ম্যানিফেস্ট V3-তে স্থানান্তরের কারণ?

• উন্নত নিরাপত্তা: ম্যানিফেস্ট V3 ব্রাউজার এক্সটেনশনের নিরাপত্তা উন্নত করতে এবং ব্যবহারকারীদের ক্ষতিকারক কোড থেকে রক্ষা করার জন্য ডিজাইন করা হয়েছে।
• উন্নত পারফরম্যান্স: সার্ভিস ওয়ার্কার এবং ডিক্লেয়ারেটিভ নেট রিকোয়েস্ট API উন্নত পারফরম্যান্স এবং কম রিসোর্স ব্যবহারে অবদান রাখে।
• অধিক গোপনীয়তা: ম্যানিফেস্ট V3 ব্যবহারকারীদের তাদের ডেটা এবং গোপনীয়তার উপর আরও নিয়ন্ত্রণ দেওয়ার লক্ষ্য রাখে।

আপনার ডেভেলপমেন্ট এনভায়রনমেন্ট সেট আপ করা

ব্রাউজার এক্সটেনশন ডেভেলপমেন্ট শুরু করার আগে, আপনাকে আপনার ডেভেলপমেন্ট এনভায়রনমেন্ট সেট আপ করতে হবে। এর মধ্যে একটি কোড এডিটর ইনস্টল করা, পরীক্ষার জন্য একটি ব্রাউজার বেছে নেওয়া এবং একটি এক্সটেনশনের মৌলিক ফাইল স্ট্রাকচার বোঝা অন্তর্ভুক্ত।

১. কোড এডিটর

এমন একটি কোড এডিটর বেছে নিন যা আপনি ব্যবহার করতে স্বাচ্ছন্দ্য বোধ করেন। জনপ্রিয় বিকল্পগুলির মধ্যে রয়েছে:

• ভিজ্যুয়াল স্টুডিও কোড (VS Code): একটি বিনামূল্যে এবং শক্তিশালী কোড এডিটর যা জাভাস্ক্রিপ্ট এবং অন্যান্য ওয়েব প্রযুক্তির জন্য চমৎকার সমর্থন প্রদান করে।
• সাবলাইম টেক্সট: একটি দ্রুত এবং কাস্টমাইজযোগ্য কোড এডিটর যার বিভিন্ন ধরণের প্লাগইন রয়েছে।
• অ্যাটম: GitHub দ্বারা তৈরি একটি বিনামূল্যে এবং ওপেন-সোর্স কোড এডিটর।

২. পরীক্ষার জন্য ব্রাউজার

আপনার এক্সটেনশনগুলি পরীক্ষা করার জন্য একটি ব্রাউজার নির্বাচন করুন। ক্রোম এবং ফায়ারফক্স সবচেয়ে জনপ্রিয় পছন্দ, কারণ তারা শক্তিশালী ডেভেলপার টুলস এবং এক্সটেনশন ডেভেলপমেন্টের জন্য সমর্থন প্রদান করে।

৩. বেসিক ফাইল স্ট্রাকচার

একটি ব্রাউজার এক্সটেনশনে সাধারণত নিম্নলিখিত ফাইলগুলি থাকে:

• manifest.json: এই ফাইলে এক্সটেনশনের মেটাডেটা থাকে, যেমন এর নাম, সংস্করণ, অনুমতি এবং ব্যাকগ্রাউন্ড স্ক্রিপ্ট।
• background.js (অথবা সার্ভিস ওয়ার্কার স্ক্রিপ্ট): এই স্ক্রিপ্টটি ব্যাকগ্রাউন্ডে চলে এবং ব্রাউজার অ্যাকশন এবং কনটেক্সট মেনু ক্লিকের মতো ইভেন্টগুলি পরিচালনা করে।
• content.js: এই স্ক্রিপ্টটি ওয়েব পৃষ্ঠাগুলির কনটেক্সটে চলে এবং তাদের বিষয়বস্তু পরিবর্তন করতে পারে।
• popup.html: এই ফাইলটি এক্সটেনশনের পপআপের ইউজার ইন্টারফেস নির্ধারণ করে।
• popup.js: এই স্ক্রিপ্টটি এক্সটেনশনের পপআপের লজিক পরিচালনা করে।
• options.html: এই ফাইলটি এক্সটেনশনের অপশন পেজের ইউজার ইন্টারফেস নির্ধারণ করে।
• options.js: এই স্ক্রিপ্টটি এক্সটেনশনের অপশন পেজের লজিক পরিচালনা করে।
• icons: এগুলি হলো ব্রাউজারের টুলবার এবং এক্সটেনশন ম্যানেজমেন্ট পেজে এক্সটেনশনকে প্রতিনিধিত্ব করতে ব্যবহৃত আইকন।

আপনার প্রথম এক্সটেনশন তৈরি করা: "হ্যালো, ওয়ার্ল্ড!"

আসুন ব্রাউজার এক্সটেনশন ডেভেলপমেন্টের মৌলিক নীতিগুলি প্রদর্শন করার জন্য একটি সহজ "হ্যালো, ওয়ার্ল্ড!" এক্সটেনশন তৈরি করি।

১. একটি ম্যানিফেস্ট ফাইল তৈরি করুন (manifest.json)

একটি নতুন ডিরেক্টরিতে `manifest.json` নামে একটি ফাইল তৈরি করুন এবং নিম্নলিখিত কোডটি যুক্ত করুন:

{
  "manifest_version": 3,
  "name": "Hello, World!",
  "version": "1.0",
  "description": "A simple Hello, World! extension",
  "permissions": [
    "storage"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

ব্যাখ্যা:

• `manifest_version`: ম্যানিফেস্ট ফাইলের সংস্করণ নির্দিষ্ট করে (ম্যানিফেস্ট V3 এর জন্য 3)।
• `name`: এক্সটেনশনের নাম।
• `version`: এক্সটেনশনের সংস্করণ নম্বর।
• `description`: এক্সটেনশনের একটি সংক্ষিপ্ত বিবরণ।
• `permissions`: এক্সটেনশনের প্রয়োজনীয় অনুমতিগুলির একটি অ্যারে (যেমন, "storage")।
• `action`: এক্সটেনশনের পপআপের বৈশিষ্ট্যগুলি নির্ধারণ করে, যার মধ্যে ডিফল্ট পপআপ ফাইল এবং আইকন অন্তর্ভুক্ত।
• `icons`: এক্সটেনশনের আইকনগুলির পাথ নির্দিষ্ট করে।

২. একটি পপআপ ফাইল তৈরি করুন (popup.html)

একই ডিরেক্টরিতে `popup.html` নামে একটি ফাইল তৈরি করুন এবং নিম্নলিখিত কোডটি যুক্ত করুন:

<!DOCTYPE html>
<html>
<head>
  <title>Hello, World!</title>
  <style>
    body {
      width: 200px;
      padding: 10px;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a simple browser extension.</p>
</body>
</html>

এই ফাইলটি এক্সটেনশনের পপআপের ইউজার ইন্টারফেস নির্ধারণ করে, যা "হ্যালো, ওয়ার্ল্ড!" বার্তা প্রদর্শন করবে।

৩. আইকন ইমেজ তৈরি করুন

নিম্নলিখিত আকারগুলির সাথে তিনটি আইকন ইমেজ তৈরি করুন: 16x16, 48x48, এবং 128x128 পিক্সেল। সেগুলোকে আপনার এক্সটেনশন ডিরেক্টরির মধ্যে একটি `images` ডিরেক্টরিতে `icon16.png`, `icon48.png`, এবং `icon128.png` হিসাবে সংরক্ষণ করুন।

৪. আপনার ব্রাউজারে এক্সটেনশনটি লোড করুন

ক্রোম:

1. ক্রোম খুলুন এবং `chrome://extensions` এ যান।
2. উপরের ডান কোণায় "Developer mode" সক্ষম করুন।
3. "Load unpacked" এ ক্লিক করুন এবং আপনার এক্সটেনশন ফাইল ধারণকারী ডিরেক্টরিটি নির্বাচন করুন।

ফায়ারফক্স:

1. ফায়ারফক্স খুলুন এবং `about:debugging#/runtime/this-firefox` এ যান।
2. "Load Temporary Add-on..." এ ক্লিক করুন এবং `manifest.json` ফাইলটি নির্বাচন করুন।

আপনার "হ্যালো, ওয়ার্ল্ড!" এক্সটেনশনটি এখন ইনস্টল হওয়া উচিত এবং ব্রাউজারের টুলবারে দৃশ্যমান হওয়া উচিত। পপআপটি খুলতে এবং "হ্যালো, ওয়ার্ল্ড!" বার্তা দেখতে এক্সটেনশন আইকনে ক্লিক করুন।

জাভাস্ক্রিপ্ট API নিয়ে কাজ করা

ব্রাউজার এক্সটেনশনগুলি জাভাস্ক্রিপ্ট API ব্যবহার করে ব্রাউজার এবং ওয়েব পৃষ্ঠাগুলির সাথে ইন্টারঅ্যাক্ট করতে পারে। এই API গুলি বিভিন্ন কার্যকারিতা অ্যাক্সেস প্রদান করে, যেমন:

• Tabs API: আপনাকে ব্রাউজার ট্যাবগুলি পরিচালনা করতে দেয়, যার মধ্যে ট্যাব তৈরি, আপডেট এবং কোয়েরি করা অন্তর্ভুক্ত।
• Storage API: এক্সটেনশনের মধ্যে স্থায়ীভাবে ডেটা সংরক্ষণ এবং পুনরুদ্ধার করার একটি উপায় প্রদান করে।
• Alarms API: আপনাকে নির্দিষ্ট সময়ে কার্যকর করার জন্য কাজগুলি নির্ধারণ করতে দেয়।
• Notifications API: আপনাকে ব্যবহারকারীকে বিজ্ঞপ্তি প্রদর্শন করতে সক্ষম করে।
• Context Menus API: আপনাকে ব্রাউজারের কনটেক্সট মেনুতে (ডান-ক্লিক মেনু) কাস্টম আইটেম যোগ করতে দেয়।
• Web Request API (ম্যানিফেস্ট V3-তে ডিক্লেয়ারেটিভ নেট রিকোয়েস্ট): আপনাকে নেটওয়ার্ক অনুরোধগুলি আটকাতে এবং পরিবর্তন করতে সক্ষম করে।
• Scripting API: ওয়েব পৃষ্ঠাগুলিতে স্ক্রিপ্ট ইনজেক্ট করার অনুমতি দেয়।

উদাহরণ: Storage API ব্যবহার করা

আসুন একটি এক্সটেনশন তৈরি করি যা Storage API ব্যবহার করে ব্যবহারকারীর নাম সংরক্ষণ এবং পুনরুদ্ধার করে।

১. ম্যানিফেস্ট ফাইল আপডেট করুন (manifest.json)

নিশ্চিত করুন যে আপনার `manifest.json` এর `permissions` অ্যারেতে `"storage"` অন্তর্ভুক্ত আছে:

{
  "manifest_version": 3,
  "name": "Storage Example",
  "version": "1.0",
  "description": "An extension that uses the Storage API",
  "permissions": [
    "storage"
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

২. একটি পপআপ ফাইল তৈরি করুন (popup.html)

আপনার `popup.html` নিম্নলিখিত বিষয়বস্তু দিয়ে তৈরি বা আপডেট করুন:

<!DOCTYPE html>
<html>
<head>
  <title>Storage Example</title>
  <style>
    body {
      width: 250px;
      padding: 10px;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <h1>Storage Example</h1>
  <label for="name">Enter your name:</label>
  <input type="text" id="name">
  <button id="save">Save</button>
  <p id="greeting"></p>
  <script src="popup.js"></script>
</body>
</html>

৩. একটি পপআপ স্ক্রিপ্ট তৈরি করুন (popup.js)

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

document.addEventListener('DOMContentLoaded', () => {
  const nameInput = document.getElementById('name');
  const saveButton = document.getElementById('save');
  const greeting = document.getElementById('greeting');

  // Load the saved name from storage
  chrome.storage.sync.get('name', (data) => {
    if (data.name) {
      nameInput.value = data.name;
      greeting.textContent = `Hello, ${data.name}!`;
    }
  });

  // Save the name to storage when the button is clicked
  saveButton.addEventListener('click', () => {
    const name = nameInput.value;
    chrome.storage.sync.set({ name: name }, () => {
      greeting.textContent = `Hello, ${name}!`;
    });
  });
});

ব্যাখ্যা:

• স্ক্রিপ্টটি `DOMContentLoaded` ইভেন্টের জন্য অপেক্ষা করে যাতে কোড চালানোর আগে DOM পুরোপুরি লোড হয়।
• এটি ইনপুট ফিল্ড, সেভ বাটন এবং গ্রিটিং প্যারাগ্রাফের রেফারেন্স পুনরুদ্ধার করে।
• এটি `chrome.storage.sync.get()` ব্যবহার করে স্টোরেজ থেকে সংরক্ষিত নাম লোড করে।
• এটি `chrome.storage.sync.set()` ব্যবহার করে সেভ বাটনে ক্লিক করা হলে নামটি স্টোরেজে সংরক্ষণ করে।
• এটি সংরক্ষিত বা প্রবেশ করানো নাম দিয়ে গ্রিটিং প্যারাগ্রাফটি আপডেট করে।

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

উদাহরণ: Tabs API ব্যবহার করা

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

১. ম্যানিফেস্ট ফাইল আপডেট করুন (manifest.json)

আপনার `manifest.json` এর `permissions` অ্যারেতে `"tabs"` অনুমতি যোগ করুন:

{
  "manifest_version": 3,
  "name": "Tabs Example",
  "version": "1.0",
  "description": "An extension that uses the Tabs API",
  "permissions": [
    "tabs"
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

২. একটি পপআপ ফাইল তৈরি করুন (popup.html)

আপনার `popup.html` নিম্নলিখিত বিষয়বস্তু দিয়ে তৈরি বা আপডেট করুন:

<!DOCTYPE html>
<html>
<head>
  <title>Tabs Example</title>
  <style>
    body {
      width: 300px;
      padding: 10px;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <h1>Tabs Example</h1>
  <p>Current Tab URL:</p>
  <p id="url"></p>
  <script src="popup.js"></script>
</body>
</html>

৩. একটি পপআপ স্ক্রিপ্ট তৈরি করুন (popup.js)

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

document.addEventListener('DOMContentLoaded', () => {
  const urlDisplay = document.getElementById('url');

  // Get the current tab's URL
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    const tab = tabs[0];
    urlDisplay.textContent = tab.url;
  });
});

ব্যাখ্যা:

• স্ক্রিপ্টটি `DOMContentLoaded` ইভেন্টের জন্য অপেক্ষা করে।
• এটি `chrome.tabs.query()` ব্যবহার করে বর্তমান উইন্ডোতে সক্রিয় ট্যাবটি পেতে।
• এটি ট্যাবের URL পুনরুদ্ধার করে এবং `url` প্যারাগ্রাফে প্রদর্শন করে।

আপনার ব্রাউজারে এক্সটেনশনটি পুনরায় লোড করুন। এখন, যখন আপনি পপআপ খুলবেন, এটি বর্তমান ট্যাবের URL প্রদর্শন করবে।

ব্যাকগ্রাউন্ড স্ক্রিপ্ট এবং সার্ভিস ওয়ার্কার

ম্যানিফেস্ট V3-তে, ব্যাকগ্রাউন্ড স্ক্রিপ্টগুলি সার্ভিস ওয়ার্কার দ্বারা প্রতিস্থাপিত হয়। সার্ভিস ওয়ার্কার হলো ইভেন্ট-চালিত স্ক্রিপ্ট যা একটি স্থায়ী পেজের প্রয়োজন ছাড়াই ব্যাকগ্রাউন্ডে চলে। এগুলি ব্যাকগ্রাউন্ড পেজের চেয়ে বেশি কার্যকরী এবং কম রিসোর্স-ইনটেনসিভ।

সার্ভিস ওয়ার্কারের মূল বৈশিষ্ট্য:

• ইভেন্ট-চালিত: সার্ভিস ওয়ার্কার ব্রাউজার অ্যাকশন, অ্যালার্ম এবং কনটেন্ট স্ক্রিপ্ট থেকে বার্তার মতো ইভেন্টগুলিতে প্রতিক্রিয়া জানায়।
• অ্যাসিঙ্ক্রোনাস: সার্ভিস ওয়ার্কার মূল থ্রেড ব্লক করা এড়াতে অ্যাসিঙ্ক্রোনাস API ব্যবহার করে।
• অলস অবস্থায় বন্ধ হয়ে যায়: যখন সার্ভিস ওয়ার্কার সক্রিয়ভাবে ইভেন্ট পরিচালনা করে না, তখন এটি বন্ধ হয়ে যায়, যা রিসোর্স সংরক্ষণ করে।

উদাহরণ: একটি সার্ভিস ওয়ার্কার ব্যবহার করা

আসুন একটি এক্সটেনশন তৈরি করি যা ব্রাউজার শুরু হলে একটি বিজ্ঞপ্তি প্রদর্শন করে।

১. ম্যানিফেস্ট ফাইল আপডেট করুন (manifest.json)

আপনার `manifest.json` নিম্নলিখিত বিষয়বস্তু দিয়ে আপডেট করুন:

{
  "manifest_version": 3,
  "name": "Service Worker Example",
  "version": "1.0",
  "description": "An extension that uses a service worker",
  "permissions": [
    "notifications"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

ব্যাখ্যা:

• `"background"` প্রপার্টি সার্ভিস ওয়ার্কার স্ক্রিপ্টের (`background.js`) পাথ নির্দিষ্ট করে।
• `"permissions"` অ্যারেতে `"notifications"` অন্তর্ভুক্ত, যা বিজ্ঞপ্তি প্রদর্শনের জন্য প্রয়োজন।

২. একটি সার্ভিস ওয়ার্কার স্ক্রিপ্ট তৈরি করুন (background.js)

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

chrome.runtime.onStartup.addListener(() => {
  // Display a notification when the browser starts
  chrome.notifications.create('startup-notification', {
    type: 'basic',
    iconUrl: 'images/icon48.png',
    title: 'Browser Started',
    message: 'The browser has started.',
  });
});

ব্যাখ্যা:

• স্ক্রিপ্টটি `chrome.runtime.onStartup` ইভেন্টের জন্য অপেক্ষা করে, যা ব্রাউজার শুরু হলে ট্রিগার হয়।
• এটি `chrome.notifications.create()` ব্যবহার করে নির্দিষ্ট বৈশিষ্ট্য সহ একটি বিজ্ঞপ্তি প্রদর্শন করে।

আপনার ব্রাউজারে এক্সটেনশনটি পুনরায় লোড করুন। এখন, যখন আপনি আপনার ব্রাউজার পুনরায় চালু করবেন, আপনি এক্সটেনশন থেকে একটি বিজ্ঞপ্তি দেখতে পাবেন।

কনটেন্ট স্ক্রিপ্ট

কনটেন্ট স্ক্রিপ্ট হলো জাভাস্ক্রিপ্ট ফাইল যা ওয়েব পৃষ্ঠাগুলির কনটেক্সটে চলে। এগুলি ওয়েব পৃষ্ঠাগুলির DOM অ্যাক্সেস এবং পরিবর্তন করতে পারে, যা আপনাকে ওয়েবসাইটগুলির আচরণ এবং চেহারা কাস্টমাইজ করতে দেয়।

কনটেন্ট স্ক্রিপ্টের মূল বৈশিষ্ট্য:

• DOM-এ অ্যাক্সেস: কনটেন্ট স্ক্রিপ্ট ওয়েব পৃষ্ঠাগুলির DOM অ্যাক্সেস এবং ম্যানিপুলেট করতে পারে।
• ওয়েব পেজ স্ক্রিপ্ট থেকে বিচ্ছিন্নতা: কনটেন্ট স্ক্রিপ্ট একটি বিচ্ছিন্ন পরিবেশে চলে, যা ওয়েব পেজ স্ক্রিপ্টের সাথে সংঘাত প্রতিরোধ করে।
• ব্যাকগ্রাউন্ড স্ক্রিপ্টের সাথে যোগাযোগ: কনটেন্ট স্ক্রিপ্ট বার্তা পাঠানোর মাধ্যমে ব্যাকগ্রাউন্ড স্ক্রিপ্টের সাথে যোগাযোগ করতে পারে।

উদাহরণ: একটি কনটেন্ট স্ক্রিপ্ট ব্যবহার করা

আসুন একটি এক্সটেনশন তৈরি করি যা ওয়েব পৃষ্ঠাগুলির পটভূমির রঙ হালকা নীল করে দেয়।

১. ম্যানিফেস্ট ফাইল আপডেট করুন (manifest.json)

আপনার `manifest.json` নিম্নলিখিত বিষয়বস্তু দিয়ে আপডেট করুন:

{
  "manifest_version": 3,
  "name": "Content Script Example",
  "version": "1.0",
  "description": "An extension that uses a content script",
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

ব্যাখ্যা:

• `"content_scripts"` প্রপার্টি ওয়েব পৃষ্ঠাগুলিতে ইনজেক্ট করা হবে এমন কনটেন্ট স্ক্রিপ্টের একটি অ্যারে নির্দিষ্ট করে।
• `"matches"` নির্দিষ্ট করে যে URLগুলিতে কনটেন্ট স্ক্রিপ্ট ইনজেক্ট করা উচিত (`<all_urls>` সমস্ত URL এর সাথে মেলে)।
• `"js"` কনটেন্ট স্ক্রিপ্টের (`content.js`) পাথ নির্দিষ্ট করে।
• `"permissions"` অ্যারেতে `"activeTab"` এবং `"scripting"` অন্তর্ভুক্ত, যা স্ক্রিপ্ট ইনজেক্ট করার জন্য প্রয়োজন।

২. একটি কনটেন্ট স্ক্রিপ্ট তৈরি করুন (content.js)

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

document.body.style.backgroundColor = 'lightblue';

৩. একটি সার্ভিস ওয়ার্কার তৈরি করুন (background.js)

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

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: () => {
      document.body.style.backgroundColor = 'lightblue';
    }
  });
});

ব্যাখ্যা:

• কনটেন্ট স্ক্রিপ্টটি কেবল `body` এলিমেন্টের পটভূমির রঙ হালকা নীল করে দেয়।
• সার্ভিস ওয়ার্কার ক্লিক ইভেন্ট শোনে এবং বর্তমান ট্যাবের মধ্যে একটি ফাংশন কার্যকর করে, যা পটভূমির রঙ পরিবর্তন করে।

আপনার ব্রাউজারে এক্সটেনশনটি পুনরায় লোড করুন। এখন, যখন আপনি যেকোনো ওয়েব পেজ খুলবেন, তখন পটভূমির রঙ হালকা নীল হয়ে যাবে।

ব্রাউজার এক্সটেনশন ডিবাগিং

ব্রাউজার এক্সটেনশন ডিবাগিং ডেভেলপমেন্ট প্রক্রিয়ার একটি অপরিহার্য অংশ। ক্রোম এবং ফায়ারফক্স এক্সটেনশন ডিবাগ করার জন্য চমৎকার ডেভেলপার টুলস প্রদান করে।

Chrome-এ ডিবাগিং:

1. ক্রোম খুলুন এবং `chrome://extensions` এ যান।
2. উপরের ডান কোণায় "Developer mode" সক্ষম করুন।
3. আপনার এক্সটেনশনের জন্য "Inspect views background page" এ ক্লিক করুন। এটি ব্যাকগ্রাউন্ড স্ক্রিপ্টের জন্য ক্রোম ডেভটুলস খুলবে।
4. কনটেন্ট স্ক্রিপ্ট ডিবাগ করতে, যেখানে কনটেন্ট স্ক্রিপ্ট ইনজেক্ট করা হয়েছে সেই ওয়েব পেজটি খুলুন, এবং তারপর সেই পেজের জন্য ক্রোম ডেভটুলস খুলুন। আপনার কনটেন্ট স্ক্রিপ্ট "Sources" প্যানেলে তালিকাভুক্ত থাকা উচিত।

Firefox-এ ডিবাগিং:

1. ফায়ারফক্স খুলুন এবং `about:debugging#/runtime/this-firefox` এ যান।
2. তালিকায় আপনার এক্সটেনশনটি খুঁজুন এবং "Inspect" এ ক্লিক করুন। এটি এক্সটেনশনের জন্য ফায়ারফক্স ডেভেলপার টুলস খুলবে।
3. কনটেন্ট স্ক্রিপ্ট ডিবাগ করতে, যেখানে কনটেন্ট স্ক্রিপ্ট ইনজেক্ট করা হয়েছে সেই ওয়েব পেজটি খুলুন, এবং তারপর সেই পেজের জন্য ফায়ারফক্স ডেভেলপার টুলস খুলুন। আপনার কনটেন্ট স্ক্রিপ্ট "Debugger" প্যানেলে তালিকাভুক্ত থাকা উচিত।

সাধারণ ডিবাগিং কৌশল:

• কনসোল লগিং: কনসোলে বার্তা মুদ্রণ করতে `console.log()` ব্যবহার করুন।
• ব্রেকপয়েন্ট: কোডের এক্সিকিউশন থামাতে এবং ভেরিয়েবল পরিদর্শন করতে আপনার কোডে ব্রেকপয়েন্ট সেট করুন।
• সোর্স ম্যাপ: আপনার কোড মিনিফাইড বা ট্রান্সপাইলড হলেও তার মূল ফর্মে ডিবাগ করতে সোর্স ম্যাপ ব্যবহার করুন।
• এরর হ্যান্ডলিং: ত্রুটি ধরতে এবং লগ করতে এরর হ্যান্ডলিং প্রয়োগ করুন।

আপনার এক্সটেনশন প্রকাশ করা

একবার আপনি আপনার এক্সটেনশন ডেভেলপ এবং পরীক্ষা করে ফেললে, আপনি এটি ক্রোম ওয়েব স্টোর বা ফায়ারফক্স অ্যাড-অনস মার্কেটপ্লেসে প্রকাশ করতে পারেন।

Chrome Web Store-এ প্রকাশ করা:

1. ক্রোম ওয়েব স্টোরে একটি ডেভেলপার অ্যাকাউন্ট তৈরি করুন।
2. আপনার এক্সটেনশনটিকে একটি `.zip` ফাইলে প্যাকেজ করুন।
3. `.zip` ফাইলটি ক্রোম ওয়েব স্টোরে আপলোড করুন।
4. প্রয়োজনীয় মেটাডেটা প্রদান করুন, যেমন এক্সটেনশনের নাম, বিবরণ এবং স্ক্রিনশট।
5. পর্যালোচনার জন্য আপনার এক্সটেনশন জমা দিন।

Firefox Add-ons Marketplace-এ প্রকাশ করা:

1. ফায়ারফক্স অ্যাড-অনস মার্কেটপ্লেসে একটি ডেভেলপার অ্যাকাউন্ট তৈরি করুন।
2. আপনার এক্সটেনশনটিকে একটি `.zip` ফাইলে প্যাকেজ করুন।
3. `.zip` ফাইলটি ফায়ারফক্স অ্যাড-অনস মার্কেটপ্লেসে আপলোড করুন।
4. প্রয়োজনীয় মেটাডেটা প্রদান করুন, যেমন এক্সটেনশনের নাম, বিবরণ এবং স্ক্রিনশট।
5. পর্যালোচনার জন্য আপনার এক্সটেনশন জমা দিন।

প্রকাশনার জন্য সেরা অনুশীলন:

• আপনার এক্সটেনশনের একটি স্পষ্ট এবং সংক্ষিপ্ত বিবরণ লিখুন।
• আপনার এক্সটেনশনের বৈশিষ্ট্যগুলি প্রদর্শন করতে উচ্চ-মানের স্ক্রিনশট এবং ভিডিও সরবরাহ করুন।
• জমা দেওয়ার আগে আপনার এক্সটেনশন পুঙ্খানুপুঙ্খভাবে পরীক্ষা করুন।
• ব্যবহারকারীর পর্যালোচনা এবং প্রতিক্রিয়ার দ্রুত উত্তর দিন।
• আপনার এক্সটেনশনকে সর্বশেষ ব্রাউজার সংস্করণ এবং নিরাপত্তা প্যাচগুলির সাথে আপ-টু-ডেট রাখুন।

নিরাপত্তা সংক্রান্ত বিবেচনা

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

মূল নিরাপত্তা সংক্রান্ত বিবেচনা:

• অনুমতি কমানো: শুধুমাত্র সেই অনুমতিগুলির জন্য অনুরোধ করুন যা আপনার এক্সটেনশনের সত্যিই প্রয়োজন।
• ব্যবহারকারীর ইনপুট যাচাই করা: ক্রস-সাইট স্ক্রিপ্টিং (XSS) আক্রমণ প্রতিরোধ করতে সমস্ত ব্যবহারকারীর ইনপুট স্যানিটাইজ এবং যাচাই করুন।
• HTTPS ব্যবহার করুন: রিমোট সার্ভারের সাথে যোগাযোগ করতে সর্বদা HTTPS ব্যবহার করুন।
• কনটেন্ট সিকিউরিটি পলিসি (CSP): যথেচ্ছ কোড চালানো প্রতিরোধ করতে একটি কঠোর CSP প্রয়োগ করুন।
• নিয়মিত আপনার এক্সটেনশন আপডেট করুন: আপনার এক্সটেনশনকে সর্বশেষ নিরাপত্তা প্যাচগুলির সাথে আপ-টু-ডেট রাখুন।

এই নিরাপত্তা নির্দেশিকাগুলি অনুসরণ করে, আপনি আপনার ব্রাউজার এক্সটেনশনটি ব্যবহারকারীদের জন্য নিরাপদ এবং সুরক্ষিত রাখতে সাহায্য করতে পারেন।

উপসংহার

ম্যানিফেস্ট V3 এবং জাভাস্ক্রিপ্ট API ব্যবহার করে ব্রাউজার এক্সটেনশন ডেভেলপমেন্ট ব্রাউজিং অভিজ্ঞতা কাস্টমাইজ করার এবং ওয়েব ব্রাউজারে নতুন বৈশিষ্ট্য যোগ করার একটি শক্তিশালী উপায় প্রদান করে। এই গাইডে বর্ণিত মূল ধারণা, API এবং সেরা অনুশীলনগুলি বোঝার মাধ্যমে, আপনি শক্তিশালী এবং নিরাপদ এক্সটেনশন তৈরি করতে পারেন যা উৎপাদনশীলতা বাড়ায়, নিরাপত্তা উন্নত করে এবং বিশ্বব্যাপী ব্যবহারকারীদের জন্য একটি উন্নত ব্রাউজিং অভিজ্ঞতা প্রদান করে। ওয়েব যেমন বিকশিত হতে থাকবে, ব্রাউজার এক্সটেনশনগুলি অনলাইন মিথস্ক্রিয়ার ভবিষ্যত গঠনে ক্রমবর্ধমান গুরুত্বপূর্ণ ভূমিকা পালন করবে। ম্যানিফেস্ট V3 এবং জাভাস্ক্রিপ্ট API-এর বিশাল সম্ভার দ্বারা উপস্থাপিত সুযোগগুলি গ্রহণ করে উদ্ভাবনী এবং মূল্যবান এক্সটেনশন তৈরি করুন।