একটি ক্রোম এক্সটেনশন তৈরি করা একটি বেশ সহজ প্রক্রিয়া। আপনি কাজ শেষ করলে, আপনি আপনার কম্পিউটারে এটি ব্যবহার করতে পারবেন ব্রাউজারের কাজকাজ উন্নত করার জন্য।
ব্রাউজারের কিছু বেসিক কম্পোনেন্ট রয়েছে যা এক্সটেনশনটি সম্পূর্ণরূপে অপারেশনাল হওয়ার আগে প্রয়োজন। আমরা নিচে এই সব ব্যাখ্যা করব, এর পাশাপাশি কীভাবে আপনার কাস্টম এক্সটেনশনকে আপলোড বা কারো সাথে শেয়ার করা ছাড়াই ক্রোমে কাজ করাবেন।
একটি জটিল ক্রোম এক্সটেনশন বিল্ড করা নিচে আপনি যা দেখবেন তার চেয়ে অনেক বেশি বিস্তারিত প্রক্রিয়া, কিন্তু সাধারণ প্রক্রিয়া একই। পড়তে থাকুন শিখতে কীভাবে আজই ব্যবহার করার মতো একটি ক্রোম এক্সটেনশন তৈরি করবেন।
টিপ: আপনার নিজের এক্সটেনশন কতটা অসাধারণ হতে পারে সেটি দেখতে চাইলে এই অসাধারণ ক্রোম এক্সটেনশনগুলো চেক আউট করুন।
ক্রোম এক্সটেনশন কীভাবে তৈরি করবেন
এই গাইড ব্যবহার করে, আপনি একটি সহজ ক্রোম এক্সটেনশন তৈরি করবেন যা আপনার কিছু প্রিয় ওয়েবসাইট লিস্ট করবে। এটি সম্পূর্ণরূপে কাস্টোমাইজেবল এবং আপডেট করা খুব সহজ।
এখানে আপনার কী করা উচিত:
- একটি ফোল্ডার তৈরি করুন যা এক্সটেনশনটি বানানোর সব ফাইল ধারণ করবে।
- এই এক্সটেনশনটির জন্য বেসিক ফাইলগুলো তৈরি করুন: manifest.json, popup.html, background.html, styles.css।
- popup.html একটি টেক্সট এডিটরে খুলুন এবং তারপর নিচের সব কোডটি সেখানে পেস্ট করুন, নিশ্চিত করুন এটি সেভ করা হয়েছে আপনি কাজ শেষ করলে।
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Favorite Sites</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <ul id="myUL"> <li><a href="https://helpdeskgeek.com/" target="_blank">Help Desk Geek</a></li> <li><a href="https://www.online-tech-tips.com/" target="_blank">Online Tech Tips</a></li> <li><a href="https://thebackroomtech.com/" target="_blank">The Back Room Tech</a></li> </ul> </body> </html>
লিংক এবং লিংক টেক্সট এডিট করার জন্য আপনি স্বতন্ত্র, অথবা আপনি যদি ক্রোম এক্সটেনশনটি ঠিক আমাদের মত বানাতে চান, তবে সব কিছু একই রেখে দিন।
- manifest.json টেক্সট এডিটরে খুলুন এবং নিচের কোডটি কপি/পেস্ট করুন:
{
"update_url": "https://clients2.google.com/service/update2/crx",
"manifest_version": 2,
"name": "Favorite Sites",
"description": "All my favorite websites.",
"version": "1.0",
"icons": {
"16": "icon.png",
"32": "icon.png",
"48": "icon.png",
"128": "icon.png"
},
"background": {
"page": "background.html"
},
"browser_action": {
"default_icon": "icon.png",
"default_title": "Favorite Sites",
"default_popup": "popup.html"
}
}
এই কোডের এডিটযোগ্য অংশগুলো হলো name, description, এবং default_title।
- styles.css খুলুন এবং নিচের কোডটি পেস্ট করুন। এটি পপআপ মেনুকে সাজায় যাতে এটি দেখতে অনেক বেশি আকর্ষণীয় হয় এবং ব্যবহার করতেও সহজ হয়।
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
width: 300px;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px;
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block;
font-family: 'Noto Sans', sans-serif;
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
CSS ফাইলে আপনি অনেক কিছু পরিবর্তন করতে পারেন। আপনার ক্রোম এক্সটেনশন বানানোর পর এই অপশনগুলো নিয়ে এক্সপেরিমেন্ট করুন আপনার পছন্দ অনুযায়ী কাস্টোমাইজ করার জন্য।
- এক্সটেনশনের জন্য একটি আইকন তৈরি করুন এবং নাম দিন icon.png। এটিকে আপনার ক্রোম এক্সটেনশন ফোল্ডারে রাখুন। আপনি উপরের কোডে দেখতে পাচ্ছেন, আপনি আলাদা আলাদা আইকন বানাতে পারেন সেসব সাইজের জন্য: ১৬x১৬ পিক্সেল, ৩২x৩২, এবং niin।
টিপ: গুগলের ক্রোম এক্সটেনশন তৈরি করার বিষয়ে আরও তথ্য রয়েছে। অন্যান্য উদাহরণ এবং অ্যাডভান্সড অপশন রয়েছে যা আমরা এখানে দেখানো সহজ ধাপগুলোর চেয়ে বাইরে।
কাস্টম এক্সটেনশন ক্রোমে কীভাবে অ্যাড করবেন
এখন আপনি ক্রোম এক্সটেনশনটি বানিয়ে ফেলেছেন, এখন এটিকে ব্রাউজারে অ্যাড করার সময় যাতে আপনি আপনার বানানো সব ফাইল আসলে ব্যবহার করতে পারেন। একটি কাস্টম এক্সটেনশন ইনস্টল করা একটি প্রক্রিয়া যা স্বাভাবিক ক্রোম এক্সটেনশন ইনস্টল করার মত নয়।
- ক্রোম মেনু থেকে, More tools > Extensions-এ যান। অথবা, অ্যাড্রেস বারে chrome://extensions/ টাইপ করুন।
- Developer mode-এর পাশের বাটন সিলেক্ট করুন যদি এটি ইতিমধ্যে সিলেক্ট করা না থাকে। এটি একটি স্পেশ্যাল মোড অন করবে যা আপনাকে আপনার নিজের ক্রোম এক্সটেনশন ইম্পোর্ট করতে দেবে।
- সেই পেজের উপরে Load unpacked বাটন ব্যবহার করুন ধাপ ১-এ আপনি যে ফোল্ডার বানিয়েছিলেন সেটি সিলেক্ট করার জন্য।
- যদি কোনো প্রম্পট আসে তবে এক্সেপ্ট করুন। অন্যথায়, আপনার কাস্টম-বিল্ট ক্রোম এক্সটেনশন ব্রাউজারের উপরের ডান কোণে অন্যান্য এক্সটেনশনগুলোর পাশাপাশি দেখাবে।
আপনার ক্রোম এক্সটেনশন এডিট করা
এখন আপনার ক্রোম এক্সটেনশন ব্যবহারযোগ্য, আপনি এটিতে পরিবর্তন আনতে পারেন এটিকে আপনার নিজস্ব করার জন্য।
styles.css ফাইলটি এক্সটেনশনটি কীভাবে দেখাবে সেটি নিয়ন্ত্রণ করে, তাই আপনি ওভারঅল লিস্ট স্টাইল এবং ফন্ট কালার বা টাইপ পরিবর্তন করতে পারেন। W3Schools CSS-এ আপনি যা যা করতে পারেন সেগুলো শিখতে অন্যতম সেরা রিসোর্স।
ওয়েবসাইটগুলো লিস্ট করা অর্ডার পরিবর্তন করতে, বা আরও সাইট যোগ বা বিদ্যমান موارد মুছে ফেলতে, popup.html ফাইলটি এডিট করুন। শুধু URL এবং নামের ওপর আপনার এডিট সীমাবদ্ধ রাখুন। বাকি সব ক্যারেক্টার, যেমন <li> এবং <html>, প্রয়োজনীয় এবং এগুলো পরিবর্তন করা উচিত নয়। W3Schools-এ HTML Tutorial HTML শিখতে একটি ভালো জায়গা।
