chrome.browserAction

রিফ্রেশ তারিখ: ২০২৬-০৯-২৫ রোবটস: নোইনডেক্স

বর্ণনা

প্রাপ্যতা

নিচের চিত্রে, অ্যাড্রেস বারের ডানদিকে থাকা বহুরঙা বর্গক্ষেত্রটি হলো একটি ব্রাউজার অ্যাকশনের আইকন। আইকনটির নিচে একটি পপআপ রয়েছে।

যদি আপনি এমন একটি আইকন তৈরি করতে চান যা সবসময় সক্রিয় থাকে না, তাহলে ব্রাউজার অ্যাকশনের পরিবর্তে পেজ অ্যাকশন ব্যবহার করুন।

প্রকাশ

এক্সটেনশন ম্যানিফেস্টে আপনার ব্রাউজার অ্যাকশনটি এইভাবে নিবন্ধন করুন:

{
  "name": "My extension",
  ...
  "browser_action": {
    "default_icon": {                // optional
      "16": "images/icon16.png",     // optional
      "24": "images/icon24.png",     // optional
      "32": "images/icon32.png"      // optional
    },
    "default_title": "Google Mail",  // optional, shown in tooltip
    "default_popup": "popup.html"    // optional
  },
  ...
}

আপনি ক্রোমে ব্যবহারের জন্য যেকোনো আকারের আইকন দিতে পারেন, এবং ক্রোম সবচেয়ে কাছেরটি বেছে নিয়ে সেটিকে ১৬-ডিপ স্থানটি পূরণ করার জন্য উপযুক্ত আকারে স্কেল করবে। তবে, সঠিক আকার না দেওয়া হলে, এই স্কেলিংয়ের কারণে আইকনটির বিবরণ হারিয়ে যেতে পারে বা এটি ঝাপসা দেখাতে পারে।

যেহেতু ১.৫x বা ১.২x-এর মতো কম প্রচলিত স্কেল ফ্যাক্টরযুক্ত ডিভাইসগুলো এখন আরও বেশি প্রচলিত হচ্ছে, তাই আপনাকে আপনার আইকনগুলোর জন্য একাধিক আকার সরবরাহ করতে উৎসাহিত করা হচ্ছে। এটি এও নিশ্চিত করে যে, যদি কখনও আইকনের প্রদর্শনের আকার পরিবর্তন করা হয়, তবে ভিন্ন আইকন সরবরাহ করার জন্য আপনাকে আর কোনো অতিরিক্ত কাজ করতে হবে না!

ডিফল্ট আইকন নিবন্ধন করার পুরোনো সিনট্যাক্সটি এখনও সমর্থিত:

{
  "name": "My extension",
  ...
  "browser_action": {
    ...
    "default_icon": "images/icon32.png"  // optional
    // equivalent to "default_icon": { "32": "images/icon32.png" }
  },
  ...
}

UI এর অংশগুলি

একটি ব্রাউজার অ্যাকশনে একটি আইকন , একটি টুলটিপ , একটি ব্যাজ এবং একটি পপআপ থাকতে পারে।

আইকন

ক্রোমের ব্রাউজার অ্যাকশন আইকনগুলো ১৬ ডিপ (ডিভাইস-নিরপেক্ষ পিক্সেল) চওড়া এবং উঁচু হয়। বড় আইকনগুলো মানানসই করার জন্য আকার পরিবর্তন করা হয়, কিন্তু সেরা ফলাফলের জন্য একটি ১৬-ডিপ বর্গাকার আইকন ব্যবহার করুন।

আপনি দুটি উপায়ে আইকন সেট করতে পারেন: একটি স্থির ছবি ব্যবহার করে অথবা HTML5 ক্যানভাস এলিমেন্ট ব্যবহার করে। সাধারণ অ্যাপ্লিকেশনের জন্য স্থির ছবি ব্যবহার করা সহজ, কিন্তু ক্যানভাস এলিমেন্ট ব্যবহার করে আপনি আরও ডাইনামিক UI—যেমন মসৃণ অ্যানিমেশন—তৈরি করতে পারেন।

স্ট্যাটিক ইমেজ WebKit প্রদর্শন করতে পারে এমন যেকোনো ফরম্যাটে হতে পারে, যার মধ্যে BMP, GIF, ICO, JPEG বা PNG অন্তর্ভুক্ত। আনপ্যাক করা এক্সটেনশনের জন্য, ইমেজ অবশ্যই PNG ফরম্যাটে হতে হবে।

আইকন সেট করতে, ম্যানিফেস্টে থাকা browser_action- এর default_icon ফিল্ডটি ব্যবহার করুন, অথবা browserAction.setIcon মেথডটি কল করুন।

স্ক্রিনের পিক্সেল ঘনত্ব ( size_in_pixel / size_in_dip অনুপাত) ১ থেকে ভিন্ন হলে আইকনটি সঠিকভাবে প্রদর্শন করার জন্য, আইকনটিকে বিভিন্ন আকারের ছবির একটি সেট হিসাবে সংজ্ঞায়িত করা যেতে পারে। প্রদর্শনের জন্য প্রকৃত ছবিটি ১৬ ডিপ পিক্সেল আকারের সাথে সবচেয়ে ভালোভাবে মানানসই করে সেটটি থেকে নির্বাচন করা হবে। আইকন সেটে যেকোনো আকারের আইকন স্পেসিফিকেশন থাকতে পারে এবং ক্রোম সবচেয়ে উপযুক্তটি নির্বাচন করবে।

টুলটিপ

টুলটিপ সেট করতে, ম্যানিফেস্টে থাকা browser_action- এর default_title ফিল্ডটি ব্যবহার করুন, অথবা browserAction.setTitle মেথডটি কল করুন। আপনি default_title ফিল্ডের জন্য লোকেল-নির্দিষ্ট স্ট্রিং উল্লেখ করতে পারেন; বিস্তারিত জানতে Internationalization দেখুন।

ব্যাজ

ব্রাউজার অ্যাকশনে ঐচ্ছিকভাবে একটি ব্যাজ প্রদর্শন করা যায়—যা আইকনের উপরে প্রদর্শিত একটি ছোট লেখা। ব্যাজের মাধ্যমে এক্সটেনশনের অবস্থা সম্পর্কে অল্প কিছু তথ্য দেখানোর জন্য ব্রাউজার অ্যাকশনটি সহজেই আপডেট করা যায়।

যেহেতু ব্যাজে জায়গা সীমিত, তাই এতে ৪টি অক্ষর বা তার কম থাকা উচিত।

browserAction.setBadgeText এবং browserAction.setBadgeBackgroundColor ব্যবহার করে যথাক্রমে ব্যাজের টেক্সট এবং রঙ সেট করুন।

পপআপ

যদি কোনো ব্রাউজার অ্যাকশনে পপআপ থাকে, তাহলে ব্যবহারকারী এক্সটেনশনের আইকনে ক্লিক করলে পপআপটি প্রদর্শিত হয়। পপআপটিতে আপনার পছন্দমতো যেকোনো HTML কন্টেন্ট থাকতে পারে এবং এটি এর কন্টেন্টের সাথে মানানসই করে স্বয়ংক্রিয়ভাবে আকার ধারণ করে। পপআপটি ২৫x২৫ এর চেয়ে ছোট এবং ৮০০x৬০০ এর চেয়ে বড় হতে পারবে না।

আপনার ব্রাউজার অ্যাকশনে একটি পপআপ যোগ করতে, পপআপের বিষয়বস্তু সহ একটি HTML ফাইল তৈরি করুন। ম্যানিফেস্টের browser_action- এর default_popup ফিল্ডে HTML ফাইলটি নির্দিষ্ট করুন, অথবা browserAction.setPopup মেথডটি কল করুন।

টিপস

সর্বোত্তম দৃশ্যমান প্রভাবের জন্য, এই নির্দেশিকাগুলো অনুসরণ করুন:

• যেসব ফিচার বেশিরভাগ পেজেই প্রাসঙ্গিক, সেগুলোর জন্য ব্রাউজার অ্যাকশন ব্যবহার করুন ।
• যেসব ফিচার শুধু কয়েকটি পেজের জন্যই দরকারি, সেগুলোর জন্য ব্রাউজার অ্যাকশন ব্যবহার করবেন না । এর পরিবর্তে পেজ অ্যাকশন ব্যবহার করুন।
• বড় ও রঙিন আইকন ব্যবহার করুন যা ১৬x১৬-ইঞ্চি জায়গার সর্বোচ্চ ব্যবহার নিশ্চিত করে। ব্রাউজার অ্যাকশন আইকনগুলো পেজ অ্যাকশন আইকনের চেয়ে কিছুটা বড় ও ভারী হওয়া উচিত।
• গুগল ক্রোমের একরঙা মেনু আইকন অনুকরণ করার চেষ্টা করবেন না । এটি থিমের সাথে ভালোভাবে কাজ করে না, তাছাড়া এক্সটেনশনগুলোকেও কিছুটা স্বতন্ত্র হওয়া উচিত।
• আপনার আইকনে মসৃণ প্রান্ত যোগ করতে আলফা ট্রান্সপারেন্সি ব্যবহার করুন । যেহেতু অনেকেই থিম ব্যবহার করেন, তাই আপনার আইকনটি বিভিন্ন ধরনের ব্যাকগ্রাউন্ড রঙে সুন্দর দেখানোর কথা।
• আপনার আইকনটি অনবরত অ্যানিমেট করবেন না । এটা খুবই বিরক্তিকর।

উদাহরণ

আপনি examples/api/browserAction ডিরেক্টরিতে ব্রাউজার অ্যাকশন ব্যবহারের সহজ উদাহরণ খুঁজে পাবেন। অন্যান্য উদাহরণের জন্য এবং সোর্স কোড দেখার সাহায্যের জন্য, স্যাম্পলস (Samples) দেখুন।

chrome.browserAction.disable(
  tabId?: number,
  callback?: function,
): Promise<void>

chrome.browserAction.enable(
  tabId?: number,
  callback?: function,
): Promise<void>

chrome.browserAction.getBadgeBackgroundColor(
  details: TabDetails,
  callback?: function,
): Promise<extensionTypes.ColorArray>

chrome.browserAction.getBadgeText(
  details: TabDetails,
  callback?: function,
): Promise<string>

chrome.browserAction.getPopup(
  details: TabDetails,
  callback?: function,
): Promise<string>

chrome.browserAction.getTitle(
  details: TabDetails,
  callback?: function,
): Promise<string>

chrome.browserAction.setBadgeBackgroundColor(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.setBadgeText(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.setIcon(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.setPopup(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.setTitle(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.onClicked.addListener(
  callback: function,
)