Skip to main content

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

পরিচিতি

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

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

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

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

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

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

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

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

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

  1. Manifest.json: এক্সটেনশনের মেইন ফাইল।
  2. HTML ফাইল: ইউজার ইন্টারফেসের জন্য।
  3. CSS ফাইল: স্টাইলিংয়ের জন্য।
  4. 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"]
}

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

  1. manifest_version: এটা ব্রাউজারের জন্য এক্সটেনশনের ভার্সন ডিফাইন করে।
  2. name: আপনার এক্সটেনশনের নাম।
  3. description: এক্সটেনশনের কাজ।
  4. action: কোন ফাইল/ইন্টারফেস চালু হবে সেটা বলে।
  5. 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 ব্রাউজারে লোড করার নিয়মঃ

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

Telegram IconMy Telegram

শুভ কামনা!

The post নিজেই বানান Browser Extensions [Hot Post] appeared first on Trickbd.com.



source https://trickbd.com/web-development/3014709

Comments

Post a Comment

Popular posts from this blog

আবারো ফেইসবুকে নিন আনলিমিটেড ফলোয়ার

আসসালামু আলাইকুম। সবাই আমার সালাম নিবেন। আশা করি আপনারা সবাই আল্লাহর রহমতে ভালো আছেন। আমি ও ভালো আছি। তো বন্ধুরা আমি আপনাদের কাছে নিয়ে এসেছি এমন একটি এপ যার মাধ্যম আপনারা আপনার আইডিতে যত চান ফলোয়ার বাড়াতে পারবেন। তো শুরু করা যাক…. ফেসবুক হচ্ছে বিশ্বের সর্ব বৃহৎ সামাজিক যোগাযোগ মাধ্যম ওয়েবসাইট। ইন্টারনেট ব্যবহার করে অথচ তার ফেসবুক একাউন্ট নেই এমন মানুষ খুঁজে পাওয়া দুষ্কর। আমরা কম বেশি সবাই ফেসবুক ব্যবহার করে থাকি। আর সবাই চেষ্টা করি আমাদের ভার্চুয়াল লাইফটাকে সবার থেকে ভিন্ন ভাবে উপস্থাপন করতে। আর তার জন্য কতো কিছুই না করি! কিভাবে ফ্যান, ফলোয়ার বাড়ানো যায় কিংবা নিজের ফেসবুক প্রফাইলটাকেও চেষ্টা করি একটু ভিন্ন রূপে সাজাতে। আপনি অবশ্যই ফেসবুক অটো ফলোয়ারের কথা শুনেছেন! আর এই সামান্য কিছু ফেসবুক অটো লাইক, ফেসবুক অটো ফ্রেন্ড রিকুয়েস্ট, ফেসবুকে অটো কমেন্ট, ফেসবুক পেজে অটো লাইক কিংবা অটো ফলোয়ার নিতে অনেকেই আবার নিজের স্বাধের ফেসবুক আইডিটি তুলে দেয় থার্ড পার্টি কোনো ওয়েবসাইটের হাতে। তবে আজকে আমি আপনাদের কে শিখাবো কিভাবে আপনার ফেসবুকে প্রফাইলে আনলিমিটেড ফলোয়ার নিবেন। তবে এটা কোনো অনিরাপদ উপ...
Post a Comment
Read more

Google account এ ক্রেডিট কার্ড add করে নিয়ে নিন এক মাসের YouTube Premium

আসসালামু আলাইকুম। আশা করি সবাই ভালো আছেন। বেশি কথা বলে চলুন শুরু করা যাক। প্রথমে ক্রেডিট কার্ড সম্পর্কে জেনে নেই। ক্রেডিট কার্ড হল একটি বিশেষ ধরনের পরিশোধ ব্যবস্থার অংশ হিসেবে ব্যবহৃত প্লাস্টিক কার্ড, যা ওই পরিশোধ ব্যবস্থার ব্যবহারকারীদেরকে ইস্যু করা হয়। এই ট্রিকটি ব্যাবহার করার জন্য আপনাকে কার্ডের তিনটি জিনিস জানতে হবে। ১.কার্ডের নাম্বার ২. এক্সপাইরি ডেট ৩. সিকিউরিটি নাম্বার তাহলে শুরু করা যাক : ১. প্রথমে ক্রেডিট কার্ড জেনারেট করব। ক্রেডিট কার্ড জেনারেট করার বিন জানা জরুরি। এখানে আমি YouTube premium নেওয়ার জন্য বিন দিলাম। BIN YOUTUBE | BIN: 511114211037xxxx | FECHA: 05/25 | CVV: rnd | IP: INDIA ২.বিন পাবার পর ক্রেডিট কার্ড জেনারেট করা জন্য আমরা https://namso-gen.com/ যাব।সেখানে উপরের খালি বক্সে বিন বসাব, এক্সপাইরি ডেট বসাব, তারপর জেনারেট এ ক্লিক করব। (এখানে Quantity আপনার ইচ্ছে মত বসাতে পারেন।) এরপর সব কপি করে নিবেন। ৩. এরপর https://ift.tt/2VEQvZR এ যাবেন। সেখানে খালি বক্সে কপি করা কার্ড গুলো পেষ্ট করে স্টার্ট এ ক্লিক করবেন। সেখানে লাইভ,ডেড, আননউন ভাবে আলাদা...
Post a Comment
Read more

২০ টি দারুন Android Customization Tips, Tricks & Hacks!

আসসালামু আলাইকুম, কেমন আছেন সবাই? আশা করছি মহান আল্লাহর রহমতে আলহামদুলিল্লাহ অনেক ভালোই আছেন। Android Tips & Tricks নিয়ে তেমন পোস্ট করা হয়নি আমার দ্বারা। তাই ভাবলাম এটা নিয়ে একটি পোস্ট করেই ফেলি। আজ থেকে কয়েক বছর আগেও Trickbd থেকে শুরু করে YouTube, Facebook সব জায়গাতেই Android User রা প্রচুর Customization, Tricks ব্যবহার করতো। কিন্তু এখন আর এগুলো করতে খুব একটা দেখা যায়না। কারন এখন Android এ অনেক ভালো ভালো Feature দেওয়াই থাকে। তবুও এমন অনেক ফিচারই রয়েছে যেগুলো Hidden থাকে, নয়তোবা অনেকেই এগুলো সম্পর্কে জানে না। এমনই ২০ টি android customization tips & tricks নিয়ে হাজির হলাম। বিশেষ করে যারা জানেন না তাদের জন্যেই পোস্টটি করা। আর যারা জানেন তারা Ignore করেন। আমার কোনো সমস্যা নেই। আমরা সবাই জানি Android এ ব্যবহার করার জন্য প্রচুর Tricks আছে। সেটা যে কারনেই ব্যবহার করা হোক না কেন। Android এ যেসব Features আছে তা নিয়ে নিয়ে বই লেখা যাবে তবুও শেষ করা যাবে না। ইউটিউবে এ নিয়ে প্রচুর ভিডিও আছে। এই পোস্টে যা আপনার এন্ড্রয়েড ব্যবহার করার স্বাদ আরো বাড়িয়ে দিবে। আমি জানি এই মুহূর্তে যার...
Post a Comment
Read more