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

জনপ্রিয় এনিমে Attack on Titan Season 1 & 2 হিন্দি ডাব | দেখুন ও ডাউনলোড করুন

Attack on Titan (Shingeki no Kyojin) হল এক জনপ্রিয় জাপানি এনিমে, যা বর্তমান সময়ে অনেক জনপ্রিয়। কিছু দিন আগেই এই এনিমেটির সিজন ১ ও ২ এর অফিশিয়াল হিন্দি ডাব রিলিজ হয়েছে। আপনি হিন্দি ডবে এই এনিমেটি দেখতে চান তাহলে এই পোস্টটি আপনার জন্য! এই পোস্টটি থেকে আপনি বিনামূল্য এমিটিকে ডাউনলোড করে দেখতে পারবেন। Attack on Titan Season 1 হিন্দি ডাব Attack on Titan-এর প্রথম সিজনে আমরা দেখি, কীভাবে ইরেন ইয়েগার এবং তার বন্ধুরা ভয়ানক টাইটানদের বিরুদ্ধে লড়াই করে। হঠাৎ এক বিশাল আকারের টাইটান ওয়াল মারিয়া ভেঙে শহরে আক্রমণ চালায়, যা মানবজাতির জন্য এক মারাত্মক হুমকি হয়ে দাঁড়ায়। ইরেন প্রতিজ্ঞা করে, সে সমস্ত টাইটান ধ্বংস করবে এবং মানবতার প্রতিশোধ নেবে। সম্পূর্ণ এনিমেটিকে ডাউনলোড করে বিস্তারির কাহিনি দেখুন। সিজন ১ এর সরাসরি ডাউনলোড লিংক নিচে দিয়ে দিলাম – Pixeldrain Download Link – Zip File (5.30 GB) Mega – Zip FIle Attack on Titan Season 2 হিন্দি ডাব দ্বিতীয় সিজনে গল্প আরও রহস্যময় মোড় নেয়। নতুন নতুন টাইটানদের পরিচয় পাওয়া যায় এবং জানা যায় কিছু পরিচিত চরিত্ররাও আসলে টাইটান রূপান্তরিত। ইরেন ও তার দল মানব...
Post a Comment
Read more

Glutathione – গায়ের রঙ ফর্সা করতে কার্যকারিতা, ব্যবহার এবং সাইড ইফেক্ট সম্পর্কে সবকিছু (Skin health)

আসসালামু আলাইকুম   আজকের আলোচনায় আমরা জানবো Glutathione  এর কার্যকারিতা, ব্যবহার, এবং সাইড ইফেক্ট নিয়ে। আশা করছি আপনাদের জন্য এটি উপকারী হবে।  Glutathione এর কাজ কি? (benefits of glutathione) গ্লুটাথিওয়ন বর্তমান সময়ে, বহুল জনপ্রিয় একটি সাপ্লিমেন্ট ত্বক ফর্সা ও উজ্জ্বল করার জন্য। এছাড়াও গ্লুটাথিওয়ন (Glutathione) নেওয়ার পর শরীরের ইমিউনিটি সিস্টেম বেড়ে যায়, লিভার ডিটক্স (পরিষ্কার হয়) এবং রক্তের বিভিন্ন দুষণ সমস্যা গুলোও ঠিক করে দেয়। দেখা গেছে যে, যাদের মুখের ত্বক, শরীরের অন্যান্য অংশ থেকে, কম উজ্জল হয়ে থাকে তাও এক রকম করে দেয় গ্লুটাথিওয়ন। এক কথায় সারা শরীরের ত্বকের উপর কাজ করে। এছাড়াও আমাদের ত্বক বেশী রোদ্রে যাওয়ার ফলে কালচে (ট্যান) হয়ে যায়, এটাও দ্রুত হিল করে গ্লুটাথিওয়ন। এমনকি শরীরের বিভিন্ন ক্ষত ও দ্রুত সারিয়ে তোলে গ্লুটাথিওয়ন এর পরিমান শরীরে বেশি থাকলে। তবে কসমেটিকস জগতে গ্লুটাথিওয়ন এর একটি ফলাফল হলো স্কিন উজ্জ্বল, ও ২/৩ সেড ফর্সা করা, যার কারনে এটি বহুল পরিচিত। এটি কি সবার জন্য কাজ করে? উত্তর হচ্ছে, অনেকটাই করে। তবে যাদের ত্বক অলরেডি উজ্জ্বল, তাদের ক্ষেত্রে এতট...
Post a Comment
Read more

Capcut এ বাংলাতে লিখতে পারবেন এখন থেকে খুব সহজেই!!

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