ক্রোম গ্রহের সবচেয়ে জনপ্রিয় ওয়েব ব্রাউজার। Statcounter-এর ডেস্কটপ ব্রাউজার মার্কেট শেয়ার সার্ভে অনুযায়ী, ২০১৭ শেষে ক্রোম ডেস্কটপ ব্রাউজারের ৬৫% মার্কেট শেয়ার দখল করল।

এই রকম মার্কেট-ডিফাইনিং পাওয়ারের সাথে, ক্রোমের জন্য ডিজাইন করা একটি প্রায়োরিটি হয়ে উঠেছে। এক্সটেনশনের জন্যও একই কথা: ক্রোম এক্সটেনশনের জন্য সবচেয়ে বড় ইউজার বেস অফার করে, দশ হাজার হাজার এক্সটেনশন, থিম এবং অ্যাপ ক্রোম ওয়েব স্টোরে পড়ে আছে।

আপনি যদি ট্রেন্ডে অংশগ্রহণ করতে চান, তবে আপনি নিজের বেসিক ক্রোম এক্সটেনশন বানাতে পারেন। আপনার কয়েকটু বেসিক ওয়েব ডেভেলপমেন্ট স্কিল (HTML, CSS এবং JavaScript) এবং সবকিছু বাঁধতে এক চামচ JSON লাগবে।

এই পোস্টে আমরা একটি বেসিক ক্রোম এক্সটেনশন বানাতে প্রয়োজনীয় সবচেয়ে বেসিক স্ট্রাকচার রিভিউ করব। গভীর দৃষ্টিভঙ্গি পাওয়ার জন্য, Chrome-এর Developer Extension Guide চেক আউট করুন।

বেসিক ক্রোম এক্সটেনশন লেখা: Manifest Destiny

এই টিউটোরিয়ালে আমরা একটি বেসিক ক্রোম এক্সটেনশন বানাবো যা ক্লিক করলে একটি সিম্পল পপ-আপ মেসেজ দেখাবে। আমাদের কয়েকটু গুরুত্বপূর্ণ ফাইল লাগবে: একটি আইকন ("icon.png"), একটি HTML ফাইল ("popup.html") এবং সবচেয়ে গুরুত্বপূর্ণ ম্যানিফেস্ট ("manifest.json")। এই সব ফাইল আপনার এক্সটেনশনের নামের একটি ডিরেক্টরির ভিতরে থাকবে। এই কেসে সেটি "Hello World" নামে।

একটি ক্রোম এক্সটেনশন এর ম্যানিফেস্ট দ্বারা ডিফাইন হয়। JSON-এর এই স্নিপেটটি ক্রোমকে বলে এক্সটেনশনটি কীভাবে ইন্টারপ্রেট করবে, কোন ফাইলগুলো লোড করবে, এবং ইউজারের সাথে কীভাবে ইন্টারঅ্যাক্ট করবে।

আমাদের খুব বেসিক এক্সটেনশনের জন্য ম্যানিফেস্ট ফাইলটি এ렇게 দেখবে:

{ "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" নামে ফাইলের কন্টেন্ট লোড করবে। বাকি কন্টেন্টের নিতিগ্রানulada (nitty-gritty) নিচে:

• manifest_version ক্রোমকে বলে আপনি ম্যানিফেস্ট মার্কআপের কোন ভার্সন ব্যবহার করছেন। মডার্ন এক্সটেনশনের জন্য, আপনাকে এটি 2-এ সেট করতে হবে।
• name ক্রোম স্টোর এবং "chrome://extensions"-এ এক্সটেনশনটি যে নাম দেখাবে সেটি।
• description "chrome://extensions"-এ দেখানো বর্ণনামূলক টেক্সট।
• browser_action আইকনটি টুলবারে লোড করে। এটি এক্সটেনশনকে ইউজার ইনপুটে রেসপন্স দিতে দেয় টুলটিপ, পপ-আপ বা ব্যাজ দিয়ে। "browser_action" যা যা করতে পারে তার সম্পূর্ণ তালিকা দেখুন।
• default_icon এক্সটেনশনের ডিরেক্টরি থেকে আইকন পাথ।
• default_popup এক্সটেনশনের আইকন ক্লিক করলে যেই ফাইল লোড হবে তার পাথ।
• permissions এক্সটেনশনের ফাংশনাল রিজন সীমাবদ্ধ করে। activeTab সবচেয়ে কমন, যা এক্সটেনশনকে সামনে থাকা ট্যাব অ্যাক্সেস করতে দেয়। গুগল একটি এক্সটেনশন কী কী পারমিশন চাইতে পারে তার সম্পূর্ণ তালিকা দিয়েছে।

আপনি যদি একটি ক্রোম এক্সটেনশনের ম্যানিফেস্ট যা যা ডিক্লেয়ার করতে পারে সেটি গভীরে জানতে চান, তবে গুগলের এক্সটেনশন ম্যানিফেস্ট ডকস চেক আউট করুন।

বেসিক ক্রোম এক্সটেনশন লেখা: Popups

এখন আমরা ম্যানিফেস্ট লিখে ফেললাম, আমরা বের করতে পারি আমাদের এক্সটেনশন কী দেখাবে। সেটি নির্ভর করে আমাদের "popup.html" ফাইল ওপর, যা এক্সটেনশন লোড হলে ডিসপ্লে হবে। এই প্রজেক্টের জন্য আমরা যা ব্যবহার করব:

       
Hello World!
  

আপনি দেখতে পাচ্ছেন, এটি CSS-এ স্টাইল করা কিছু টেক্সট রেন্ডার করবে। আপনি যদি আপনার এক্সটেনশনে JavaScript বা এক্সটার্নাল CSS যোগ করতে চান, তবে সেটি ম্যানিফেস্টে ডিক্লেয়ার করতে হবে, content_scripts কী-এর অধীনে। একবার সেটি ম্যানিফেস্টে রেফারেন্স হলে, আপনি সেসব স্ক্রিপ্ট সাধারণভাবে লোড করতে পারবেন।

বেসিক ক্রোম এক্সটেনশন লেখা: ক্রোমে লোড করা

একবার আমরা আমাদের এক্সটেনশনের বেসিক কোড লিখে ফেললাম এবং একটি উপযুক্ত আইকন পেলাম, আমরা এটিকে ক্রোমে লোড করতে পারি।

1. "chrome://extensions"-এ নেভিগেট করুন এবং আপার-রাইটে চেকবক্সে টিক দিয়ে "Developer Mode" অন করুন।

2. "Load unpacked extension..." বাটনে ক্লিক করুন এবং এক্সটেনশনের ডিরেক্টরি সিলেক্ট করুন।

3. এক্সটেনশন লোড হলে, আপনি মেনু বারে এর আইকন দেখতে পাবেন।

4. এক্সটেনশনে ক্লিক করলে এর (খুব সিম্পল) ইফেক্ট দেখতে পাবেন।

উপসংহার: আপনার ক্রোম এক্সটেনশন বিস্তার করা

একবার আপনি আপনার এক্সটেনশন ফিনিশ করলে এবং পাবলিশ করার জন্য প্রস্তুত হলে, আপনাকে একটি ক্রোম ডেভেলপার অ্যাকাউন্ট তৈরি করতে হবে। সেটি একদম স্ট্রেইটফরওয়ার্ড প্রক্রিয়া নয়, কিন্তু গুগল আপনার ক্রোম এক্সটেনশন পাবলিশ করার সম্পূর্ণ নির্দেশিকা এখানে দিয়েছে।

আপনার ক্রোম এক্সটেনশনের সাথে আপনি অনেক বেশি কিছু করতে পারেন, কিন্তু সেটি এই পোস্টের স্কোপের বাইরে। আপনি যদি ক্রোম এক্সটেনশনের সকল সম্ভাবনা সম্পর্কে জানতে চান, তবে গুগলের Chrome Developer Extension Guide চেক আউট করুন।