এক্সটেনশন হলো ওয়েব প্ল্যাটফর্মে ব্যবহৃত HTML, CSS, JavaScript, ছবি এবং অন্যান্য ফাইলের জিপ করা বান্ডেল, যা গুগল ক্রোমের ব্রাউজিং অভিজ্ঞতাকে কাস্টমাইজ করে। এক্সটেনশনগুলো ওয়েব প্রযুক্তি ব্যবহার করে তৈরি করা হয় এবং ব্রাউজার কর্তৃক ওপেন ওয়েবে প্রদত্ত একই API ব্যবহার করতে পারে।
এক্সটেনশনগুলোর ব্যাপক কার্যকরী সম্ভাবনা রয়েছে। এগুলো ব্যবহারকারীদের দেখা ও ব্যবহার করা ওয়েব কন্টেন্ট পরিবর্তন করতে পারে, অথবা ব্রাউজারের আচরণকে প্রসারিত ও পরিবর্তন করতে পারে।
ক্রোম ব্রাউজারকে সবচেয়ে ব্যক্তিগতকৃত ব্রাউজারে পরিণত করার প্রবেশদ্বার হিসেবে এক্সটেনশনগুলোকে বিবেচনা করুন।
এক্সটেনশন ফাইল
এক্সটেনশনগুলো ফাইলের ধরন এবং ডিরেক্টরির সংখ্যার দিক থেকে ভিন্ন হতে পারে, কিন্তু সেগুলোর সবগুলোরই একটি [ম্যানিফেস্ট][docs-manifest] থাকা আবশ্যক। কিছু সাধারণ, কিন্তু দরকারি, এক্সটেনশনে শুধু ম্যানিফেস্ট এবং তার টুলবার আইকন থাকতে পারে।
manifest.json নামের ম্যানিফেস্ট ফাইলটি ব্রাউজারকে এক্সটেনশনটি সম্পর্কে তথ্য দেয়, যেমন সবচেয়ে গুরুত্বপূর্ণ ফাইল এবং এক্সটেনশনটি যে ক্ষমতাগুলো ব্যবহার করতে পারে।
{
"name": "My Extension",
"version": "2.1",
"description": "Gets information from Google.",
"icons": {
"128": "icon_16.png",
"128": "icon_32.png",
"128": "icon_48.png",
"128": "icon_128.png"
},
"background": {
"persistent": false,
"scripts": ["background_script.js"]
},
"permissions": ["https://*.google.com/", "activeTab"],
"browser_action": {
"default_icon": "icon_16.png",
"default_popup": "popup.html"
}
}
এক্সটেনশনের অবশ্যই একটি আইকন থাকতে হবে যা ব্রাউজার টুলবারে অবস্থান করে। টুলবার আইকনগুলো সহজে অ্যাক্সেসের সুযোগ দেয় এবং ব্যবহারকারীদের জানিয়ে রাখে যে কোন কোন এক্সটেনশন ইনস্টল করা আছে। বেশিরভাগ ব্যবহারকারীই পপআপ ব্যবহারকারী এক্সটেনশনের আইকনে ক্লিক করে সেটির সাথে ইন্টারঅ্যাক্ট করেন।
এই গুগল মেইল চেকার এক্সটেনশনটি একটি ব্রাউজার অ্যাকশন ব্যবহার করে:
এই Mappy এক্সটেনশনটি একটি পেজ অ্যাকশন এবং কন্টেন্ট স্ক্রিপ্ট ব্যবহার করে:
ফাইলগুলি উল্লেখ করা হচ্ছে
একটি সাধারণ HTML পৃষ্ঠার ফাইলের মতোই, একটি এক্সটেনশনের ফাইলগুলোকে রিলেটিভ ইউআরএল ব্যবহার করে উল্লেখ করা যায়।
<img src="images/my_image.png">
এছাড়াও, প্রতিটি ফাইল একটি অ্যাবসোলিউট ইউআরএল ব্যবহার করেও অ্যাক্সেস করা যায়।
chrome-extension://EXTENSION_ID/PATH_TO_FILE
অ্যাবসোলিউট ইউআরএল-এ, EXTENSION_ID হলো একটি অনন্য শনাক্তকারী যা এক্সটেনশন সিস্টেম প্রতিটি এক্সটেনশনের জন্য তৈরি করে। chrome://extensions ইউআরএল-এ গিয়ে লোড হওয়া সমস্ত এক্সটেনশনের আইডি দেখা যায়। PATH_TO_FILE হলো এক্সটেনশনের টপ ফোল্ডারের অধীনে থাকা ফাইলের অবস্থান; এটি রিলেটিভ ইউআরএল-এর সাথে মিলে যায়।
একটি আনপ্যাক করা এক্সটেনশনে কাজ করার সময় এক্সটেনশন আইডি পরিবর্তিত হতে পারে। বিশেষত, যদি এক্সটেনশনটি একটি ভিন্ন ডিরেক্টরি থেকে লোড করা হয়, তাহলে আনপ্যাক করা এক্সটেনশনটির আইডি পরিবর্তিত হবে; এক্সটেনশনটি প্যাকেজ করার সময় আইডিটি আবার পরিবর্তিত হবে। যদি কোনো এক্সটেনশনের কোড একটি অ্যাবসোলিউট ইউআরএল-এর উপর নির্ভর করে, তবে ডেভেলপমেন্টের সময় আইডি হার্ডকোডিং এড়াতে এটি chrome.runtime.getURL() মেথডটি ব্যবহার করতে পারে।
স্থাপত্য
একটি এক্সটেনশনের গঠন তার কার্যকারিতার উপর নির্ভর করবে, কিন্তু অনেক শক্তিশালী এক্সটেনশনে একাধিক উপাদান অন্তর্ভুক্ত থাকে:
পটভূমি স্ক্রিপ্ট
ব্যাকগ্রাউন্ড স্ক্রিপ্ট হলো এক্সটেনশনটির ইভেন্ট হ্যান্ডলার; এতে ব্রাউজারের সেইসব ইভেন্টের জন্য লিসেনার থাকে যা এক্সটেনশনটির জন্য গুরুত্বপূর্ণ। কোনো ইভেন্ট সংঘটিত না হওয়া পর্যন্ত এটি নিষ্ক্রিয় থাকে এবং সংঘটিত হওয়ার পর নির্দেশিত লজিকটি সম্পাদন করে। একটি কার্যকর ব্যাকগ্রাউন্ড স্ক্রিপ্ট কেবল প্রয়োজনের সময়ই লোড হয় এবং নিষ্ক্রিয় হয়ে গেলে আনলোড হয়ে যায়।
UI উপাদান
একটি এক্সটেনশনের ইউজার ইন্টারফেস উদ্দেশ্যমূলক এবং সংক্ষিপ্ত হওয়া উচিত। ইউআই-টি ব্রাউজিং অভিজ্ঞতাকে কাস্টমাইজ বা উন্নত করবে, কিন্তু তাতে কোনো ব্যাঘাত ঘটাবে না। বেশিরভাগ এক্সটেনশনে একটি ব্রাউজার অ্যাকশন বা পেজ অ্যাকশন থাকে, তবে এতে অন্যান্য ধরনের ইউআই-ও থাকতে পারে, যেমন কনটেক্সট মেনু , অমনিবক্সের ব্যবহার বা কিবোর্ড শর্টকাট তৈরি করা।
এক্সটেনশনের UI পেজ, যেমন একটি পপআপ , জাভাস্ক্রিপ্ট লজিকসহ সাধারণ HTML পেজ ধারণ করতে পারে। এক্সটেনশনটি তার মধ্যে থাকা অতিরিক্ত HTML ফাইল প্রদর্শন করার জন্য tabs.create বা window.open() কল করতে পারে।
পেজ অ্যাকশন ও পপআপ ব্যবহারকারী কোনো এক্সটেনশন, পপআপটি কখন ব্যবহারকারীদের জন্য উপলব্ধ হবে তার নিয়ম ব্যাকগ্রাউন্ড স্ক্রিপ্টে নির্ধারণ করতে ডিক্লারেটিভ কন্টেন্ট এপিআই ব্যবহার করতে পারে। শর্তগুলো পূরণ হলে, ব্যাকগ্রাউন্ড স্ক্রিপ্টটি পপআপের সাথে যোগাযোগ করে এর আইকনটিকে ব্যবহারকারীদের জন্য ক্লিকযোগ্য করে তোলে।
বিষয়বস্তু স্ক্রিপ্ট
যেসব এক্সটেনশন ওয়েব পেজে ডেটা পড়ে বা লেখে, সেগুলো কন্টেন্ট স্ক্রিপ্ট ব্যবহার করে। কন্টেন্ট স্ক্রিপ্টে জাভাস্ক্রিপ্ট থাকে, যা ব্রাউজারে লোড হওয়া কোনো পেজের প্রেক্ষাপটে কার্যকর হয়। কন্টেন্ট স্ক্রিপ্ট ব্রাউজারের ভিজিট করা ওয়েব পেজগুলোর DOM পড়ে এবং পরিবর্তন করে।
কন্টেন্ট স্ক্রিপ্টগুলো স্টোরেজ এপিআই ব্যবহার করে বার্তা আদান-প্রদান এবং মান সংরক্ষণ করার মাধ্যমে তাদের প্যারেন্ট এক্সটেনশনের সাথে যোগাযোগ করতে পারে।
বিকল্প পৃষ্ঠা
ঠিক যেমন এক্সটেনশন ব্যবহারকারীদের ক্রোম ব্রাউজার কাস্টমাইজ করার সুযোগ দেয়, তেমনি অপশন পেজটি এক্সটেনশনটি কাস্টমাইজ করার সুযোগ করে দেয়। অপশন ব্যবহার করে বিভিন্ন ফিচার চালু করা যায় এবং ব্যবহারকারীরা তাদের প্রয়োজন অনুযায়ী কার্যকারিতা বেছে নিতে পারেন।
ক্রোম এপিআই ব্যবহার করে
ওয়েব পেজের মতো একই এপিআই ব্যবহারের সুযোগ থাকার পাশাপাশি, এক্সটেনশনগুলো তাদের নিজস্ব এপিআই-ও ব্যবহার করতে পারে, যা ব্রাউজারের সাথে নিবিড় সংযোগ স্থাপন করে। এক্সটেনশন এবং ওয়েবপেজ উভয়ই একটি ইউআরএল খোলার জন্য সাধারণ window.open() মেথড ব্যবহার করতে পারে, কিন্তু এক্সটেনশনগুলো এর পরিবর্তে ক্রোম এপিআই-এর tabs.create মেথড ব্যবহার করে নির্দিষ্ট করে দিতে পারে যে সেই ইউআরএলটি কোন উইন্ডোতে প্রদর্শিত হবে।
অ্যাসিঙ্ক্রোনাস বনাম সিঙ্ক্রোনাস পদ্ধতি
বেশিরভাগ ক্রোম এপিআই মেথডই অ্যাসিঙ্ক্রোনাস: এগুলো অপারেশন শেষ হওয়ার জন্য অপেক্ষা না করেই সাথে সাথে রিটার্ন করে। যদি কোনো এক্সটেনশনের একটি অ্যাসিঙ্ক্রোনাস অপারেশনের ফলাফল জানার প্রয়োজন হয়, তবে এটি মেথডটিতে একটি কলব্যাক ফাংশন পাস করতে পারে। মেথডটি রিটার্ন করার পরে, বা সম্ভবত অনেক পরে, কলব্যাকটি এক্সিকিউট হয়।
যদি এক্সটেনশনটিকে ব্যবহারকারীর বর্তমানে নির্বাচিত ট্যাব থেকে একটি নতুন URL-এ নিয়ে যাওয়ার প্রয়োজন হয়, তবে এটিকে বর্তমান ট্যাবের আইডি সংগ্রহ করতে হবে এবং তারপর সেই ট্যাবের ঠিকানাটি নতুন URL-টিতে আপডেট করতে হবে।
যদি tabs.query মেথডটি সিনক্রোনাস হতো, তাহলে এটি নিচের মতো দেখতে হতে পারতো।
//THIS CODE DOESN'T WORK
var tab = chrome.tabs.query({'active': true}); //WRONG!!!
chrome.tabs.update(tab.id, {url:newUrl});
someOtherFunction();
এই পদ্ধতিটি ব্যর্থ হবে কারণ query() একটি অ্যাসিঙ্ক্রোনাস মেথড। এটি কাজটি সম্পূর্ণ হওয়ার জন্য অপেক্ষা না করেই রিটার্ন করে এবং কোনো ভ্যালু ফেরত দেয় না। একটি মেথডকে অ্যাসিঙ্ক্রোনাস বলা হয় যখন এর সিগনেচারে কলব্যাক প্যারামিটারটি থাকে।
// Signature for an asynchronous method
chrome.tabs.query(object queryInfo, function callback)
কোনো ট্যাবকে সঠিকভাবে কোয়েরি করতে এবং তার URL আপডেট করতে এক্সটেনশনটিকে অবশ্যই কলব্যাক প্যারামিটার ব্যবহার করতে হবে।
//THIS CODE WORKS
chrome.tabs.query({'active': true}, function(tabs) {
chrome.tabs.update(tabs[0].id, {url: newUrl});
});
someOtherFunction();
উপরের কোডে, লাইনগুলো ১, ৪, ২ এই ক্রমে এক্সিকিউট হয়। query() এর জন্য নির্দিষ্ট করা কলব্যাক ফাংশনটি কল করা হয় এবং তারপর ২ নম্বর লাইনটি এক্সিকিউট করে, কিন্তু এটি কেবল তখনই ঘটে যখন বর্তমানে নির্বাচিত ট্যাব সম্পর্কে তথ্য পাওয়া যায়। query() ` রিটার্ন করার কিছুক্ষণ পরে এটি ঘটে। যদিও update() ` একটি অ্যাসিঙ্ক্রোনাস ফাংশন, কোডটি কোনো কলব্যাক প্যারামিটার ব্যবহার করে না, কারণ এক্সটেনশনটি `update`-এর ফলাফল নিয়ে কোনো কাজ করে না।
// Synchronous methods have no callback option and returns a type of string
string chrome.runtime.getURL()
এই মেথডটি সিঙ্ক্রোনাসভাবে URL-টিকে একটি string হিসেবে রিটার্ন করে এবং অন্য কোনো অ্যাসিঙ্ক্রোনাস কাজ সম্পাদন করে না।
আরও বিস্তারিত
আরও তথ্যের জন্য, Chrome API রেফারেন্স ডক্স দেখুন এবং নিম্নলিখিত ভিডিওটি দেখুন।
পৃষ্ঠাগুলির মধ্যে যোগাযোগ
একটি এক্সটেনশনের বিভিন্ন উপাদানের প্রায়শই একে অপরের সাথে যোগাযোগ করার প্রয়োজন হয়। বিভিন্ন HTML পৃষ্ঠা chrome.extension getViews() এবং getBackgroundPage() এর মতো পদ্ধতি ব্যবহার করে একে অপরকে খুঁজে পেতে পারে। একবার একটি পৃষ্ঠার কাছে এক্সটেনশনের অন্যান্য পৃষ্ঠাগুলির রেফারেন্স থাকলে, প্রথমটি অন্য পৃষ্ঠাগুলির ফাংশনগুলিকে কল করতে এবং তাদের DOM-কে নিয়ন্ত্রণ করতে পারে। এছাড়াও, এক্সটেনশনের সমস্ত উপাদান স্টোরেজ API ব্যবহার করে সংরক্ষিত মানগুলি অ্যাক্সেস করতে পারে এবং মেসেজ পাসিংয়ের মাধ্যমে যোগাযোগ করতে পারে।
ডেটা সংরক্ষণ এবং ছদ্মবেশী মোড
এক্সটেনশনগুলো স্টোরেজ এপিআই (storage API), এইচটিএমএল৫ ওয়েব স্টোরেজ এপিআই (HTML5 web storage API) ব্যবহার করে, অথবা ডেটা সংরক্ষণের জন্য সার্ভার রিকোয়েস্ট পাঠিয়ে ডেটা সেভ করতে পারে। যখন এক্সটেনশনটির কিছু সেভ করার প্রয়োজন হয়, তখন প্রথমে বিবেচনা করুন যে এটি কোনো ইনকগনিটো উইন্ডো থেকে করা হচ্ছে কি না। ডিফল্টভাবে, এক্সটেনশনগুলো ইনকগনিটো উইন্ডোতে চলে না।
ইনকগনিটো মোড এই প্রতিশ্রুতি দেয় যে উইন্ডোটি কোনো চিহ্ন রাখবে না। ইনকগনিটো উইন্ডো থেকে ডেটা নিয়ে কাজ করার সময় এক্সটেনশনগুলোর এই প্রতিশ্রুতি রক্ষা করা উচিত। যদি কোনো এক্সটেনশন সাধারণত ব্রাউজিং হিস্টরি সংরক্ষণ করে, তবে ইনকগনিটো উইন্ডো থেকে হিস্টরি সংরক্ষণ করবেন না। তবে, এক্সটেনশনগুলো যেকোনো উইন্ডো, তা ইনকগনিটো হোক বা না হোক, তার সেটিং প্রেফারেন্স সংরক্ষণ করতে পারে।
কোনো উইন্ডো ইনকগনিটো মোডে আছে কিনা তা শনাক্ত করতে, সংশ্লিষ্ট tabs.Tab অথবা windows.Window অবজেক্টের incognito প্রপার্টিটি পরীক্ষা করুন।
function saveTabData(tab) {
if (tab.incognito) {
return;
} else {
chrome.storage.local.set({data: tab.url});
}
}
পরবর্তী পদক্ষেপ নিন
ওভারভিউটি পড়ার এবং গেটিং স্টার্টেড টিউটোরিয়ালটি সম্পন্ন করার পর, ডেভেলপাররা তাদের নিজস্ব এক্সটেনশন লেখা শুরু করার জন্য প্রস্তুত হয়ে যাবেন! নিম্নলিখিত রিসোর্সগুলোর মাধ্যমে কাস্টম ক্রোমের জগতে আরও গভীরে প্রবেশ করুন।
- ডিবাগিং টিউটোরিয়ালে এক্সটেনশন ডিবাগ করার জন্য উপলব্ধ বিকল্পগুলো সম্পর্কে জানুন।
- ক্রোম এক্সটেনশনগুলো ওপেন ওয়েবে যা পাওয়া যায় তার চেয়েও উন্নত ও শক্তিশালী এপিআই ব্যবহারের সুযোগ পায়। chrome.* এপিআই ডকুমেন্টেশনে প্রতিটি এপিআই সম্পর্কে বিস্তারিত আলোচনা করা হবে।
- এক্সটেনশন ডেভেলপমেন্ট ওভারভিউতে উন্নত এক্সটেনশন তৈরির জন্য প্রাসঙ্গিক ডকুমেন্টেশনের কয়েক ডজন অতিরিক্ত লিঙ্ক রয়েছে।