এটি এক্সটেনশনগুলিতে উপলব্ধ ইউজার ইন্টারফেস উপাদানগুলির একটি ক্যাটালগ। প্রতিটি এন্ট্রিতে রয়েছে:
- উপাদানটির একটি ছবি (প্রযোজ্য হলে)।
- এটি কীসের জন্য ব্যবহৃত হয় তার একটি বিবরণ।
- সম্পর্কিত ইন্টারফেস উপাদানসমূহ (যদি প্রযোজ্য হয়)।
- বাস্তবায়নের নির্দেশাবলী এবং কোড নমুনার লিঙ্ক।
এই উপাদানগুলো হলো এক্সটেনশনের ফিচারগুলো ব্যবহার করার বিভিন্ন উপায়। আপনাকে এগুলোর সবগুলোই প্রয়োগ করতে হবে এমন কোনো বাধ্যবাধকতা নেই। প্রকৃতপক্ষে, কিছু ব্যবহারের ক্ষেত্রে এগুলোর কোনোটিই কাজে নাও লাগতে পারে। উদাহরণস্বরূপ, একটি লিঙ্ক শর্টার কিবোর্ড শর্টকাট ব্যবহার করে প্রদর্শিত ইউআরএল-এর উপর কাজ করতে পারে এবং সংক্ষিপ্ত লিঙ্কটি প্রোগ্রামগতভাবে ক্লিপবোর্ডে রাখতে পারে।
কর্ম
যখন কোনো ব্যবহারকারী আপনার এক্সটেনশনের অ্যাকশন আইকনে ক্লিক করেন, তখন যা ঘটে, তাকেই একটি অ্যাকশন বলা হয়। একটি অ্যাকশন অ্যাকশন এপিআই (Action API) ব্যবহার করে এক্সটেনশনের কোনো ফিচার চালু করতে পারে, অথবা এমন একটি পপআপ খুলতে পারে যা ব্যবহারকারীদের একাধিক এক্সটেনশন ফিচার ব্যবহার করার সুযোগ দেয়। অ্যাকশনটি কী কাজ করে, তা একটি টুলটিপ ব্যবহার করে ব্যবহারকারীদের জানান।
অ্যাকশন তৈরি করতে শিখতে, ‘ইমপ্লিমেন্ট অ্যান অ্যাকশন’ দেখুন, অথবা অ্যাকশনের নমুনাগুলো পরীক্ষা করুন।
অ্যাকশন আইকন
একটি এক্সটেনশনকে উপস্থাপন করার জন্য অন্তত একটি আইকন প্রয়োজন। ব্যবহারকারীরা কোনো একটি অ্যাকশন চালু করার জন্য আইকনটিতে ক্লিক করেন; সেই অ্যাকশনটি অ্যাকশন এপিআই (Action API) ব্যবহার করে এক্সটেনশনের কোনো ফিচার চালু করতে পারে অথবা একটি পপআপ খুলতে পারে।
আপনি আইকনে একটি লেবেলও যোগ করতে পারেন, যাকে এখানে 'ব্যাজ' বলা হয়, যা এক্সটেনশনের অবস্থা বা ব্যবহারকারীর কাছ থেকে কোনো পদক্ষেপের প্রয়োজনীয়তার মতো বিষয়গুলো জানাতে পারে।
অ্যাকশন তৈরি করতে শিখতে, ‘ইমপ্লিমেন্ট অ্যান অ্যাকশন’ দেখুন, অথবা অ্যাকশনের নমুনাগুলো পরীক্ষা করুন।
ব্যাজ
ব্যাজ হলো অ্যাকশন আইকনের উপরে রাখা ফরম্যাট করা কিছু টেক্সট, যা এক্সটেনশনের অবস্থা অথবা ব্যবহারকারীর কোনো পদক্ষেপের প্রয়োজনীয়তার মতো বিষয়গুলো নির্দেশ করে। আপনি chrome.action.setBadgeText() কল করে ব্যাজের টেক্সট এবং chrome.action.setBadgeBackgroundColor() কল করে ব্যানারের রঙ সেট করতে পারেন।
একটি অ্যাকশন তৈরি করতে শিখতে, ‘ইমপ্লিমেন্ট অ্যান অ্যাকশন’ অথবা ‘ ড্রিঙ্ক ওয়াটার স্যাম্পল’ দেখুন।
কমান্ড
কমান্ড হলো কী-কম্বিনেশন যা এক্সটেনশনের কোনো ফিচার চালু করে। manifest.json ফাইলে কী-কম্বিনেশনগুলো সংজ্ঞায়িত করুন এবং Commands API ব্যবহার করে সেগুলোতে সাড়া দিন। একটি কমান্ড কীভাবে প্রয়োগ করতে হয় তা শিখতে, API রেফারেন্স অথবা chrome.commands স্যাম্পলটি দেখুন।
প্রসঙ্গ মেনু
মাউসের অল্টারনেট ক্লিকের (যা প্রায়শই রাইট ক্লিক নামে পরিচিত) জন্য একটি কনটেক্সট মেনু প্রদর্শিত হয়। কনটেক্সট মেনু এপিআই (Context Menus API) ব্যবহার করে কনটেক্সট মেনু সংজ্ঞায়িত করুন।
কন্টেক্সট মেনু কীভাবে প্রয়োগ করতে হয় তা শিখতে, কন্টেক্সট মেনুর নমুনাগুলো দেখুন।
অমনিবক্স
আপনি ক্রোম অমনিবক্স ব্যবহার করে ব্যবহারকারীদের সাথে যোগাযোগ করতে পারেন। যখন কোনো ব্যবহারকারী অমনিবক্সে এক্সটেনশন-নির্ধারিত কীওয়ার্ড প্রবেশ করান, তখন আপনার এক্সটেনশন নিয়ন্ত্রণ করে যে ব্যবহারকারী অমনিবক্সে কী দেখতে পাবেন। manifest.json ফাইলে কীওয়ার্ড নির্ধারণ করুন এবং অমনিবক্স এপিআই (Omnibox API) ব্যবহার করে সেগুলোর উত্তর দিন।
অমনিবক্স ওভাররাইড করতে শিখতে, ‘অমনিবক্স থেকে অ্যাকশন ট্রিগার করুন’ অথবা কুইক এপিআই রেফারেন্স স্যাম্পলটি দেখুন।
পৃষ্ঠাগুলি ওভাররাইড করুন
একটি এক্সটেনশন ক্রোমের এই অন্তর্নির্মিত পৃষ্ঠাগুলির মধ্যে একটিকে ওভাররাইড করতে পারে:
- ইতিহাস
- নতুন ট্যাব
- বুকমার্ক
ক্রোম পেজ ওভাররাইড করতে শিখতে, “ওভাররাইড ক্রোম পেজ” অথবা ওভাররাইড স্যাম্পলটি দেখুন।
পপআপ
পপআপ হলো এমন একটি অ্যাকশন যা একটি উইন্ডো প্রদর্শন করে এবং ব্যবহারকারীদের এক্সটেনশনের একাধিক ফিচার ব্যবহার করার সুযোগ দেয়। ব্যবহারকারী অ্যাকশন আইকনে ক্লিক করে, কিবোর্ড শর্টকাটের মাধ্যমে অথবা chrome.action.openPopup() কল করে পপআপ খুলতে পারেন।
পপআপ তৈরি করতে শিখতে, ‘একটি পপআপ যোগ করুন’ দেখুন। এছাড়াও আপনি অ্যাকশন স্যাম্পলগুলোর মধ্যে একটির ধাপে ধাপে নির্দেশিকা ডাউনলোড করতে পারেন।
পাশের প্যানেলগুলি
একটি সাইড প্যানেল ব্যবহারকারীদের ওয়েব পেজের পাশাপাশি এক্সটেনশনের ফিচারগুলো ব্যবহার করার সুযোগ দেয় (ছবিটি দেখুন)। একটি সাইড প্যানেল একটিমাত্র ট্যাবের সাথে অথবা পুরো উইন্ডোর সাথে সংযুক্ত হতে পারে। সাইড প্যানেল এপিআই (Side Panel API) ব্যবহার করে এটি নিয়ন্ত্রণ করা হয়।
সাইড প্যানেল তৈরি করতে শিখতে, সাইড প্যানেলের ব্যবহারের উদাহরণগুলো দেখুন, অথবা সাইড প্যানেলের নমুনাগুলো পরীক্ষা করুন।
টুলটিপ
যখন কোনো ব্যবহারকারী আপনার অ্যাকশন আইকনের উপর মাউস নিয়ে যান, তখন আপনার এক্সটেনশনের কাজটি কী হবে, তা দেখানোর একটি উপায় হলো টুলটিপ। ডিফল্টরূপে, টুলটিপটি এক্সটেনশনটির নাম প্রদর্শন করে।
টুলটিপ যোগ করার পদ্ধতি শিখতে, ম্যানিফেস্ট ফাইলের "action" কী-এর "default_title" মেম্বারটি ব্যবহার করুন।
ডেভটুলস
আপনি DevTools Panels API ব্যবহার করে DevTools-এ কাস্টম প্যানেল (DevTools-এ ট্যাবগুলোকে যা বলা হয়) যোগ করতে পারেন। অন্যান্য DevTools API আপনাকে উইন্ডো এবং নেটওয়ার্ক ট্র্যাফিক নিরীক্ষণ করতে দেয়। আপনি DevTools রেকর্ডার প্যানেলটিও কাস্টমাইজ করতে পারেন। Chrome DevTools-এর নিজস্ব Lighthouse প্যানেলটি একটি DevTools এক্সটেনশন হিসেবে যাত্রা শুরু করেছিল।
বিজ্ঞপ্তি
এক্সটেনশনের নোটিফিকেশন এপিআই অথবা ওয়েব প্ল্যাটফর্মের নোটিফিকেশন এপিআই ব্যবহার করে ব্যবহারকারীর সিস্টেম ট্রে-তে বার্তা পোস্ট করুন।
নোটিফিকেশন ব্যবহার করতে শিখতে, ‘ব্যবহারকারীদের অবহিত করুন’ দেখুন।
থিম
থিম হলো এক বিশেষ ধরনের এক্সটেনশন যা ব্রাউজারের চেহারা পরিবর্তন করে। থিমগুলো সাধারণ এক্সটেনশনের মতোই প্যাকেজ করা থাকে, কিন্তু এগুলোতে জাভাস্ক্রিপ্ট বা এইচটিএমএল কোড থাকে না।
থিম তৈরি করতে শিখতে, ‘থিম কী?’ দেখুন।
ব্যবহারকারীদের সাথে যোগাযোগের অন্যান্য উপায়
এই বিভাগে আপনার এক্সটেনশন ব্যবহারকারীদের সাথে যোগাযোগ করার অন্যান্য উপায়গুলো বর্ণনা করা হয়েছে। যদিও একটি সাধারণ এক্সটেনশনের জন্য এগুলি অপরিহার্য নয়, তবুও এগুলি আপনার এক্সটেনশনের গুরুত্বপূর্ণ অংশ হতে পারে। অনেক ব্যবহারকারীর জন্য, এক্সটেনশনটি ব্যবহার করতে এই বৈশিষ্ট্যগুলির কয়েকটি একেবারে অপরিহার্য।
প্রবেশগম্যতা
অনেক ব্যবহারকারীর জন্য, অ্যাক্সেসিবিলিটি আক্ষরিক অর্থেই ইউজার ইন্টারফেস, এবং এর বৈশিষ্ট্যগুলো প্রায়শই তাদের জন্য উপযোগী হতে পারে যাদের আপনার এক্সটেনশনের সাথে ইন্টারঅ্যাক্ট করার প্রাথমিক মাধ্যম হিসেবে অ্যাক্সেসিবিলিটির প্রয়োজন নেই। আপনার এক্সটেনশনকে অ্যাক্সেসিবল করার প্রাথমিক বিষয়গুলো জানুন।
আন্তর্জাতিকীকরণ
ব্যবহারকারীদের সাথে তাদের নিজস্ব ভাষায় কথা বলুন। ইন্টারফেসটিকে আন্তর্জাতিকীকরণ করতে শিখুন।