# ব্রাউজার এক্সটেনশন প্রকল্প পার্ট ১: ব্রাউজার সম্পর্কে সবকিছু  > স্কেচনোট: [ওয়াসিম চেগাম](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## প্রাক-লেকচার কুইজ [প্রাক-লেকচার কুইজ](https://ff-quizzes.netlify.app/web/quiz/23) ### ভূমিকা ব্রাউজার এক্সটেনশন ব্রাউজারে অতিরিক্ত কার্যকারিতা যোগ করে। তবে একটি তৈরি করার আগে, আপনাকে জানতে হবে ব্রাউজার কীভাবে কাজ করে। ### ব্রাউজার সম্পর্কে এই পাঠের সিরিজে, আপনি একটি ব্রাউজার এক্সটেনশন তৈরি করতে শিখবেন যা Chrome, Firefox এবং Edge ব্রাউজারে কাজ করবে। এই অংশে, আপনি ব্রাউজার কীভাবে কাজ করে তা জানবেন এবং ব্রাউজার এক্সটেনশনের উপাদানগুলো তৈরি করবেন। কিন্তু ব্রাউজার আসলে কী? এটি একটি সফটওয়্যার অ্যাপ্লিকেশন যা ব্যবহারকারীকে সার্ভার থেকে কন্টেন্ট অ্যাক্সেস করতে এবং ওয়েব পেজে প্রদর্শন করতে দেয়। ✅ একটু ইতিহাস: প্রথম ব্রাউজারের নাম ছিল 'WorldWideWeb', যা ১৯৯০ সালে স্যার টিমোথি বার্নার্স-লি তৈরি করেছিলেন।  > কিছু প্রথম দিকের ব্রাউজার, সূত্র: [ক্যারেন ম্যাকগ্রেন](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) যখন একজন ব্যবহারকারী URL (Uniform Resource Locator) ঠিকানা ব্যবহার করে ইন্টারনেটে সংযুক্ত হন, সাধারণত Hypertext Transfer Protocol ব্যবহার করে `http` বা `https` ঠিকানা দিয়ে, ব্রাউজার একটি ওয়েব সার্ভারের সাথে যোগাযোগ করে এবং একটি ওয়েব পেজ নিয়ে আসে। এই পর্যায়ে, ব্রাউজারের রেন্ডারিং ইঞ্জিন এটি ব্যবহারকারীর ডিভাইসে প্রদর্শন করে, যা হতে পারে একটি মোবাইল ফোন, ডেস্কটপ বা ল্যাপটপ। ব্রাউজার কন্টেন্ট ক্যাশ করার ক্ষমতা রাখে যাতে এটি প্রতিবার সার্ভার থেকে পুনরুদ্ধার করতে না হয়। এটি ব্যবহারকারীর ব্রাউজিং কার্যকলাপের ইতিহাস রেকর্ড করতে পারে, 'কুকিজ' সংরক্ষণ করতে পারে, যা ছোট ডেটা যা ব্যবহারকারীর কার্যকলাপ সংরক্ষণ করতে ব্যবহৃত হয়, এবং আরও অনেক কিছু। ব্রাউজার সম্পর্কে একটি গুরুত্বপূর্ণ বিষয় মনে রাখা দরকার যে সব ব্রাউজার একরকম নয়! প্রতিটি ব্রাউজারের নিজস্ব শক্তি এবং দুর্বলতা রয়েছে, এবং একজন পেশাদার ওয়েব ডেভেলপারকে বুঝতে হবে কীভাবে ওয়েব পেজগুলোকে ক্রস-ব্রাউজারে ভালোভাবে পারফর্ম করানো যায়। এর মধ্যে ছোট ভিউপোর্ট যেমন মোবাইল ফোনের, এবং অফলাইনে থাকা ব্যবহারকারীর জন্য সমর্থন অন্তর্ভুক্ত। একটি খুব দরকারী ওয়েবসাইট যা আপনি সম্ভবত আপনার পছন্দের ব্রাউজারে বুকমার্ক করতে চাইবেন তা হলো [caniuse.com](https://www.caniuse.com)। যখন আপনি ওয়েব পেজ তৈরি করছেন, তখন ব্যবহারকারীদের সর্বোত্তম সমর্থন দেওয়ার জন্য caniuse-এর সমর্থিত প্রযুক্তির তালিকা ব্যবহার করা খুবই সহায়ক। ✅ কীভাবে আপনি জানতে পারবেন কোন ব্রাউজার আপনার ওয়েব সাইটের ব্যবহারকারীদের মধ্যে সবচেয়ে জনপ্রিয়? আপনার অ্যানালিটিক্স চেক করুন - আপনি আপনার ওয়েব ডেভেলপমেন্ট প্রক্রিয়ার অংশ হিসেবে বিভিন্ন অ্যানালিটিক্স প্যাকেজ ইনস্টল করতে পারেন, এবং সেগুলো আপনাকে জানাবে কোন ব্রাউজারগুলো সবচেয়ে বেশি ব্যবহৃত হয়। ## ব্রাউজার এক্সটেনশন কেন আপনি একটি ব্রাউজার এক্সটেনশন তৈরি করতে চাইবেন? এটি একটি সুবিধাজনক জিনিস যা ব্রাউজারে সংযুক্ত করা যায় যখন আপনি এমন কাজগুলোর দ্রুত অ্যাক্সেস চান যা আপনি বারবার করেন। উদাহরণস্বরূপ, যদি আপনি বিভিন্ন ওয়েব পেজে রঙ চেক করতে চান, আপনি একটি কালার-পিকার ব্রাউজার এক্সটেনশন ইনস্টল করতে পারেন। যদি আপনি পাসওয়ার্ড মনে রাখতে অসুবিধা করেন, আপনি একটি পাসওয়ার্ড-ম্যানেজমেন্ট ব্রাউজার এক্সটেনশন ব্যবহার করতে পারেন। ব্রাউজার এক্সটেনশন তৈরি করাও মজার। এগুলো সাধারণত সীমিত সংখ্যক কাজ পরিচালনা করে যা তারা ভালোভাবে সম্পাদন করে। ✅ আপনার প্রিয় ব্রাউজার এক্সটেনশনগুলো কী কী? তারা কী কাজ করে? ### এক্সটেনশন ইনস্টল করা তৈরি করার আগে, ব্রাউজার এক্সটেনশন তৈরি এবং ডিপ্লয় করার প্রক্রিয়া দেখে নিন। যদিও প্রতিটি ব্রাউজার এই কাজটি পরিচালনার ক্ষেত্রে কিছুটা ভিন্ন, Chrome এবং Firefox-এ প্রক্রিয়াটি Edge-এর এই উদাহরণের মতো:  > নোট: ডেভেলপার মোড চালু করুন এবং অন্যান্য স্টোর থেকে এক্সটেনশন অনুমতি দিন। মূলত, প্রক্রিয়াটি হবে: - `npm run build` ব্যবহার করে আপনার এক্সটেনশন তৈরি করুন - ব্রাউজারে "Settings and more" বোতাম (উপরের ডানদিকে থাকা `...` আইকন) ব্যবহার করে এক্সটেনশন প্যান-এ যান - যদি এটি একটি নতুন ইনস্টলেশন হয়, `load unpacked` নির্বাচন করুন এবং এর বিল্ড ফোল্ডার থেকে একটি নতুন এক্সটেনশন আপলোড করুন (আমাদের ক্ষেত্রে এটি `/dist`) - অথবা, যদি আপনি ইতিমধ্যে ইনস্টল করা এক্সটেনশনটি পুনরায় লোড করছেন, তাহলে `reload` ক্লিক করুন ✅ এই নির্দেশনাগুলো আপনার তৈরি করা এক্সটেনশনের জন্য প্রযোজ্য; ব্রাউজার এক্সটেনশন স্টোরে প্রকাশিত এক্সটেনশন ইনস্টল করতে, আপনাকে সংশ্লিষ্ট [স্টোরগুলোতে](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) যেতে হবে এবং আপনার পছন্দের এক্সটেনশন ইনস্টল করতে হবে। ### শুরু করুন আপনি একটি ব্রাউজার এক্সটেনশন তৈরি করতে যাচ্ছেন যা আপনার অঞ্চলের কার্বন ফুটপ্রিন্ট প্রদর্শন করবে, আপনার অঞ্চলের শক্তি ব্যবহারের পরিমাণ এবং শক্তির উৎস দেখাবে। এক্সটেনশনে একটি ফর্ম থাকবে যা API কী সংগ্রহ করবে যাতে আপনি CO2 Signal-এর API অ্যাক্সেস করতে পারেন। **আপনার যা দরকার:** - [একটি API কী](https://www.co2signal.com/); এই পেজে আপনার ইমেইল প্রবেশ করান এবং একটি কী আপনার কাছে পাঠানো হবে - [আপনার অঞ্চলের কোড](http://api.electricitymap.org/v3/zones) যা [Electricity Map](https://www.electricitymap.org/map)-এর সাথে সম্পর্কিত (বস্টনে, উদাহরণস্বরূপ, আমি 'US-NEISO' ব্যবহার করি) - [স্টার্টার কোড](../../../../5-browser-extension/start)। `start` ফোল্ডারটি ডাউনলোড করুন; আপনি এই ফোল্ডারে কোড সম্পন্ন করবেন। - [NPM](https://www.npmjs.com) - NPM একটি প্যাকেজ ম্যানেজমেন্ট টুল; এটি লোকালভাবে ইনস্টল করুন এবং আপনার `package.json` ফাইলের তালিকাভুক্ত প্যাকেজগুলো আপনার ওয়েব অ্যাসেটের জন্য ইনস্টল হবে ✅ প্যাকেজ ম্যানেজমেন্ট সম্পর্কে আরও জানুন এই [চমৎকার লার্ন মডিউলে](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon) কোডবেসটি একবার দেখে নিন: dist -|manifest.json (ডিফল্ট সেটিংস এখানে) -|index.html (ফ্রন্ট-এন্ড HTML মার্কআপ এখানে) -|background.js (ব্যাকগ্রাউন্ড JS এখানে) -|main.js (বিল্ট JS) src -|index.js (আপনার JS কোড এখানে) ✅ একবার আপনার API কী এবং অঞ্চল কোড প্রস্তুত হয়ে গেলে, সেগুলো ভবিষ্যতে ব্যবহারের জন্য একটি নোটে সংরক্ষণ করুন। ### এক্সটেনশনের HTML তৈরি করুন এই এক্সটেনশনের দুটি ভিউ রয়েছে। একটি API কী এবং অঞ্চল কোড সংগ্রহ করার জন্য:  এবং দ্বিতীয়টি অঞ্চলের কার্বন ব্যবহারের তথ্য প্রদর্শনের জন্য:  চলুন ফর্মের HTML তৈরি করা শুরু করি এবং CSS দিয়ে এটি স্টাইল করি। `/dist` ফোল্ডারে, আপনি একটি ফর্ম এবং একটি ফলাফল এলাকা তৈরি করবেন। `index.html` ফাইলের ফর্ম এলাকায় নিম্নলিখিত কোড যোগ করুন: ```HTML
``` এটি সেই ফর্ম যেখানে আপনার সংরক্ষিত তথ্য ইনপুট হবে এবং লোকাল স্টোরেজে সংরক্ষিত হবে। এরপর, ফলাফল এলাকা তৈরি করুন; চূড়ান্ত ফর্ম ট্যাগের নিচে কিছু div যোগ করুন: ```HTMLRegion:
Carbon Usage:
Fossil Fuel Percentage: