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

ফরেক্স ট্রেডিং (Forex Trading) কি? ফরেক্স ট্রেডিং কিভাবে করে জেনে নিন

বর্তমান সময়ে অনলাইন ইনকাম দিন দিন বৃদ্ধি পাচ্ছে। অনলাইন ইনকাম জগতের একটি জনপ্রিয় সেক্টর হলো ফরেক্স ট্রেডিং। হয়তো অনেকেই অনলাইনে ইনকাম করার উপায় খুঁজতে গিয়ে ফরেক্স ট্রেডিং সম্পর্কে শুনেছেন। কিন্তু সেটা নিয়ে বিস্তারিত হয়তো জানেন না। তাই যারা ফরেক্স ট্রেডিং সম্পর্কে জানেন না তাদের জন্য আজকের এই পোস্টটি। আজকের পোস্টের মাধ্যমে আমরা ফরেক্স ট্রেডিং সম্পর্কে বিস্তারিত জানব। তাহলে চলুন শুরু করি… • ফরেক্স ট্রেডিং (Forex Trading) কি? ফরেক্স ট্রেডিং এর ফরেক্স এর মানে হলো ফরেন এক্সচেঞ্জ। যার মানে দাঁড়ায় বিভিন্ন দেশের বৈদেশিক মুদ্রা লেনদেন। সহজ ভাষায় বলতে গেলে, বৈদেশিক মুদ্রা লেনদেন আদান-প্রদান কেই ফরেক্স ট্রেডিং বলে। ২০১৯ সালের এপ্রিল মাসের হিসাব অনুযায়ী বিশ্বব্যাপী প্রতিদিন ৬.৬ ট্রিলিয়ন ফরেন এক্সচেঞ্জ সেটেলমেন্ট করা হয়েছে। এছাড়া ফরেক্স মার্কেটপ্লেস হচ্ছে পৃথিবীর সবচেয়ে বড় ফাইন্যান্সিয়াল মার্কেটপ্লেস। • ফরেক্স ট্রেডিং কিভাবে কাজ করে: ধরুন আপনি বাংলাদেশ থেকে আমেরিকা থেকে একটি প্রোডাক্ট আনতে চাচ্ছেন। কিন্তু সেই প্রোডাক্টের দাম পে করতে হবে ডলারে। কিন্তু আপনার কাছে আছে বাংলাদেশি ...
Post a Comment
Read more

ডাউনলোড করে নিন Uncharted (2022) মুভিটা [HDCAMRip]

কীভাবে একটি ভিডিও গেমের উপর ভিত্তি করে একটি চলচ্চিত্র গেমের চেয়ে বেশি প্রাণহীন হয়? গেমিং জগতের বিরুদ্ধে নক দীর্ঘকাল ধরে হয়েছে যে তাদের মধ্যে মানবিক উপাদানের অভাব রয়েছে, তবে রুবেন ফ্লেশারের “আনচার্টেড” পুরস্কার বিজয়ী ফ্র্যাঞ্চাইজির চেয়ে খালি বোধ করেযার উপর ভিত্তি করে। সবুজ পর্দার বিশেষ প্রভাব এবং পাতলা ট্রেজার-হন্ট প্লটিংয়ের দ্বারা আধিপত্য, “আনচার্টেড”-এ মৌলিকভাবে অ্যাডভেঞ্চারের অনুভূতির অভাব রয়েছে যা Sony গেমগুলিকে সর্বকালের সবচেয়ে প্রিয় কিছুতে পরিণত করেছে। সবচেয়ে চমকপ্রদ বিষয় হল প্রকৃত সিনেমার চেয়ে গেমগুলিকে বিশ্ব নির্মাণ, চরিত্র এবং বর্ণনার পরিপ্রেক্ষিতে কতটা সিনেমাটিক মনে হয়। এটি কিছু ভিডিও গেম অভিযোজনের মতো বিপর্যয়কর নয়, এবং এটি অন্ততপক্ষে এটির পায়ে যথেষ্ট হালকা যে এটির ফ্যান বেসের বুদ্ধিমত্তাকে কখনই অপমান করতে পারে না কারণ এই সিনেমাগুলির অনেকগুলিই করে। যাইহোক, “আনচার্টেড” নাথান ড্রেকের ভিডিও গেম অ্যাডভেঞ্চারের সদিচ্ছাকে নিজের মতো করে তৈরি করতে চায় বলে মনে হয়; এটি কোন ঝুঁকি নেয় না এবং গল্প বলার ক্ষেত্রে একটি খালি ন্যূনতম প্রচেষ্টার মতো অনুভব করে। রজার বিখ্যাতভাব...
Post a Comment
Read more

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

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