ক্রোম সহজেই গ্রহের সবচেয়ে জনপ্রিয় ওয়েব ব্রাউজার। Statcounter-এর ডেস্কটপ ব্রাউজার মার্কেট শেয়ার সমীক্ষা অনুযায়ী, 2017 সালের শেষের দিকে ডেস্কটপ ব্রাউজারে ক্রোম বাজারের 65% দখল করেছে।
এই ধরণের বাজার-সংজ্ঞায়িত শক্তির সাথে, Chrome এর জন্য ডিজাইন করা একটি অগ্রাধিকার হয়ে উঠেছে৷ এক্সটেনশনের ক্ষেত্রেও একই কথা:ক্রোম এখন পর্যন্ত এক্সটেনশনের জন্য সবচেয়ে বড় ব্যবহারকারী বেস অফার করে, হাজার হাজার এক্সটেনশন, থিম এবং অ্যাপগুলি Chrome ওয়েব স্টোরে পপুলেট করে৷
আপনি যদি প্রবণতাটি নগদ করতে চান তবে আপনি নিজের মৌলিক ক্রোম এক্সটেনশন তৈরি করতে পারেন৷ আপনার শুধু কিছু বেসিক ওয়েব ডেভেলপমেন্ট স্কিল (HTML, CSS এবং Javascript) এর সাথে সাথে এক চা চামচ JSON এর সবগুলো একসাথে বাঁধতে হবে।
আমরা এই পোস্টে একটি মৌলিক ক্রোম এক্সটেনশন তৈরি করার জন্য প্রয়োজনীয় সবচেয়ে মৌলিক কাঠামো পর্যালোচনা করব। উপলব্ধ সম্ভাবনার একটি গভীর দৃষ্টিভঙ্গি পেতে, Chrome এর বিকাশকারী এক্সটেনশন গাইড দেখুন৷
একটি বেসিক ক্রোম এক্সটেনশন লেখা:মেনিফেস্ট ডেসটিনি
এই টিউটোরিয়ালটির জন্য আমরা একটি মৌলিক ক্রোম এক্সটেনশন তৈরি করব যা ক্লিক করার সময় একটি সাধারণ পপআপ বার্তা প্রদর্শন করে। আমাদের কয়েকটি গুরুত্বপূর্ণ ফাইলের প্রয়োজন হবে:একটি আইকন ("icon.png"), একটি HTML ফাইল ("popup.html") এবং সর্ব-গুরুত্বপূর্ণ ম্যানিফেস্ট ("manifest.json")৷ এই সমস্ত ফাইল আপনার এক্সটেনশনের নামের সাথে একটি ডিরেক্টরির ভিতরে থাকবে। এই ক্ষেত্রে এটিকে "হ্যালো ওয়ার্ল্ড" বলা হয়৷
৷
একটি ক্রোম এক্সটেনশন এর ম্যানিফেস্ট দ্বারা সংজ্ঞায়িত করা হয়। JSON-এর এই স্নিপেটটি Chrome কে কীভাবে এক্সটেনশন ব্যাখ্যা করতে হয়, কোন ফাইলগুলি লোড করতে হয় এবং কীভাবে ব্যবহারকারীর সাথে যোগাযোগ করতে হয় তা দেখায়৷
আমাদের খুব মৌলিক এক্সটেনশনের জন্য ম্যানিফেস্ট ফাইলটি এইরকম দেখায়:
{
"manifest_version": 2,
"name": "Hello World!",
"description": "My first Chrome extension.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
} এই ম্যানিফেস্ট ফাইলটি ব্যবহারকারীর টুলবারে একটি আইকন রাখবে যেটিতে ক্লিক করা হলে, "popup.html" নামের ফাইলের বিষয়বস্তু লোড হবে। বাকি বিষয়বস্তুর উপর নিম্নোক্ত ক্ষুরধার:
manifest_versionআপনি ম্যানিফেস্ট মার্কআপের কোন সংস্করণ নিয়ে কাজ করছেন তা Chrome কে বলে। আধুনিক এক্সটেনশনের জন্য, আপনাকে এটি2.এ সেট করতে হবেnameএক্সটেনশনটি Chrome স্টোর এবং "chrome://extensions।"
এ যে নামটি দেখাবে সেটি প্রদর্শন করে description"chrome://extensions"
-এ প্রদর্শিত বর্ণনামূলক পাঠ্য দেখায় browser actionটুলবারে আইকন লোড করে। এটি এক্সটেনশনকে একটি টুলটিপ, পপআপ বা ব্যাজ প্রদর্শনের মাধ্যমে ব্যবহারকারীর ইনপুটের প্রতিক্রিয়া জানাতেও অনুমতি দেয়। "ব্রাউজার_অ্যাকশন" যা করতে পারে তার একটি সম্পূর্ণ তালিকা দেখুন।default_iconএক্সটেনশনের ডিরেক্টরি থেকে আইকনে যাওয়ার পথ দেখায়।default_popupএক্সটেনশনের আইকনে ক্লিক করা হলে ফাইলের পথ দেখায় যা লোড হবে৷permissionsএক্সটেনশনের কার্যকরী অঞ্চলকে সীমাবদ্ধ করে।activeTabসবচেয়ে সাধারণ, এক্সটেনশনটিকে সামনের-সবচেয়ে ট্যাবে অ্যাক্সেস করার অনুমতি দেয়। একটি এক্সটেনশন অনুরোধ করতে পারে এমন সমস্ত অনুমতির একটি তালিকা Google প্রদান করে৷
৷
আপনি যদি Chrome এক্সটেনশনের ম্যানিফেস্ট ঘোষণা করতে পারে এমন সবকিছুর গভীরে যেতে চান, তাহলে এক্সটেনশন ম্যানিফেস্টে Google-এর ডক্স দেখুন।
একটি মৌলিক ক্রোম এক্সটেনশন লেখা:পপআপগুলি
এখন যেহেতু আমরা আমাদের ম্যানিফেস্ট লিখেছি, আমরা বুঝতে পারি আমাদের এক্সটেনশন কী প্রদর্শন করবে। এটি আমাদের "popup.html" ফাইলের উপর নির্ভর করে, যা এক্সটেনশন লোড হলে প্রদর্শিত হবে৷ এই প্রকল্পের জন্য আমরা যা ব্যবহার করব তা এখানে:
<!doctype html>
<html>
<head>
<title>Hello World</title>
</head>
<style type="text/css">
body {
margin: 5px;
}
h1 {
font-size: 15px;
text-align: center;
}
</style>
<body>
<h1>Hello World!</h1>
</body>
</html>
আপনি দেখতে পাচ্ছেন, এটি CSS দিয়ে স্টাইল করা কিছু পাঠ্য রেন্ডার করবে। আপনি যদি আপনার এক্সটেনশনে জাভাস্ক্রিপ্ট বা বাহ্যিক CSS যোগ করতে চান, তাহলে content_scripts-এর অধীনে ম্যানিফেস্টে স্ক্রিপ্টগুলি ঘোষণা করতে হবে মূল. একবার আপনার ম্যানিফেস্টে এটি উল্লেখ করা হয়ে গেলে, আপনি সেই স্ক্রিপ্টগুলি লোড করতে পারেন যেমন আপনি সাধারণত করেন৷
একটি মৌলিক ক্রোম এক্সটেনশন লেখা:ক্রোমে লোড হচ্ছে
একবার আমরা আমাদের এক্সটেনশনের জন্য মৌলিক কোড লিখলে এবং একটি উপযুক্ত আইকন খুঁজে পেলে, আমরা এটিকে Chrome এ লোড করতে পারি।
1. "chrome://extensions" এ নেভিগেট করুন এবং উপরের ডানদিকে চেকবক্সে টিক দিয়ে "ডেভেলপার মোড" চালু করুন৷
2. "আনপ্যাক করা এক্সটেনশন লোড করুন..." বোতামে ক্লিক করুন এবং এক্সটেনশনের ডিরেক্টরি নির্বাচন করুন৷
3. একবার এক্সটেনশন লোড হয়ে গেলে, আপনি মেনু বারে এর আইকন দেখতে পাবেন৷
4. এর (খুব সহজ) প্রভাব দেখতে এক্সটেনশনটিতে ক্লিক করুন৷
৷
উপসংহার:আপনার ক্রোম এক্সটেনশন প্রসারিত করা
একবার আপনি আপনার এক্সটেনশনের সাথে শেষ হয়ে গেলে এবং প্রকাশের জন্য প্রস্তুত হলে, আপনাকে একটি Chrome বিকাশকারী অ্যাকাউন্ট তৈরি করতে হবে৷ এটি একেবারে সহজবোধ্য প্রক্রিয়া নয়, কিন্তু Google এখানে আপনার Chrome এক্সটেনশন প্রকাশ করার জন্য সম্পূর্ণ নির্দেশনা প্রদান করে।
আপনার ক্রোম এক্সটেনশনের সাথে আপনি স্পষ্টতই আরও অনেক কিছু করতে পারেন, তবে এটি এই পোস্টের সুযোগের বাইরে। আপনি যদি Chrome এক্সটেনশনগুলি যা করতে পারে সে সম্পর্কে আরও জানতে চান, Google এর Chrome বিকাশকারী এক্সটেনশন গাইড দেখুন৷
