chrome.action

বর্ণনা

প্রাপ্যতা

উদ্ভাসিত

chrome.action API ব্যবহার করতে, 3 -এর একটি "manifest_version" নির্দিষ্ট করুন এবং আপনার ম্যানিফেস্ট ফাইলে "action" কী অন্তর্ভুক্ত করুন।

{
  "name": "Action Extension",
  ...
  "action": {
    "default_icon": {              // optional
      "16": "images/icon16.png",   // optional
      "24": "images/icon24.png",   // optional
      "32": "images/icon32.png"    // optional
    },
    "default_title": "Click Me",   // optional, shown in tooltip
    "default_popup": "popup.html"  // optional
  },
  ...
}

"action" কী (এর বাচ্চাদের সাথে) ঐচ্ছিক। যখন এটি অন্তর্ভুক্ত করা হয় না, তখনও এক্সটেনশনের মেনুতে অ্যাক্সেস দেওয়ার জন্য আপনার এক্সটেনশন টুলবারে দেখানো হয়। এই কারণে, আমরা সুপারিশ করি যে আপনি সর্বদা অন্তত "action" এবং "default_icon" কীগুলি অন্তর্ভুক্ত করুন৷

ধারণা এবং ব্যবহার

UI এর অংশ

আইকন

আইকনটি আপনার এক্সটেনশনের টুলবারে প্রধান চিত্র, এবং আপনার ম্যানিফেস্টের "action" কী-তে "default_icon" কী দ্বারা সেট করা হয়৷ আইকন 16 ডিভাইস-স্বাধীন পিক্সেল (DIPs) চওড়া এবং লম্বা হতে হবে।

"default_icon" কী হল চিত্র পাথের আকারের একটি অভিধান। কোন চিত্র স্কেল ব্যবহার করতে হবে তা চয়ন করতে Chrome এই আইকনগুলি ব্যবহার করে৷ যদি একটি সঠিক মিল খুঁজে না পাওয়া যায়, Chrome সবচেয়ে কাছের উপলব্ধটি নির্বাচন করে এবং এটিকে চিত্রের সাথে মানানসই করার জন্য স্কেল করে, যা ছবির গুণমানকে প্রভাবিত করতে পারে।

যেহেতু 1.5x বা 1.2x এর মতো কম-সাধারণ স্কেল ফ্যাক্টর সহ ডিভাইসগুলি আরও সাধারণ হয়ে উঠছে, আমরা আপনাকে আপনার আইকনগুলির জন্য একাধিক মাপ প্রদান করতে উত্সাহিত করি৷ এটি সম্ভাব্য আইকন প্রদর্শনের আকার পরিবর্তনের বিরুদ্ধে আপনার এক্সটেনশনকে ভবিষ্যতে প্রমাণ করে। যাইহোক, যদি শুধুমাত্র একটি একক মাপ প্রদান করা হয়, তাহলে "default_icon" কী একটি স্ট্রিং-এও সেট করা যেতে পারে একটি অভিধানের পরিবর্তে একটি আইকনের পাথের সাথে।

এছাড়াও আপনি একটি ভিন্ন ইমেজ পাথ নির্দিষ্ট করে বা HTML ক্যানভাস এলিমেন্ট ব্যবহার করে একটি গতিশীল-উত্পন্ন আইকন প্রদান করে আপনার এক্সটেনশনের আইকনটি প্রোগ্রাম্যাটিকভাবে সেট করতে action.setIcon() এ কল করতে পারেন, অথবা যদি কোনো এক্সটেনশন পরিষেবা কর্মী, অফস্ক্রিন ক্যানভাস API থেকে সেট করা হয়।

const canvas = new OffscreenCanvas(16, 16);
const context = canvas.getContext('2d');
context.clearRect(0, 0, 16, 16);
context.fillStyle = '#00FF00';  // Green
context.fillRect(0, 0, 16, 16);
const imageData = context.getImageData(0, 0, 16, 16);
chrome.action.setIcon({imageData: imageData}, () => { /* ... */ });

প্যাকড এক্সটেনশনগুলির জন্য (একটি .crx ফাইল থেকে ইনস্টল করা), ছবিগুলি বেশিরভাগ ফর্ম্যাটে হতে পারে যা ব্লিঙ্ক রেন্ডারিং ইঞ্জিন প্রদর্শন করতে পারে, যার মধ্যে PNG, JPEG, BMP, ICO এবং অন্যান্য রয়েছে৷ SVG সমর্থিত নয়। আনপ্যাক করা এক্সটেনশনগুলিকে অবশ্যই PNG ছবি ব্যবহার করতে হবে।

টুলটিপ (শিরোনাম)

টুলটিপ, বা শিরোনাম, প্রদর্শিত হয় যখন ব্যবহারকারী তাদের মাউস পয়েন্টার টুলবারে এক্সটেনশনের আইকনের উপর ধরে রাখে। বোতামটি ফোকাস করলে এটি স্ক্রিন রিডারদের দ্বারা উচ্চারিত অ্যাক্সেসযোগ্য পাঠ্যের মধ্যেও অন্তর্ভুক্ত থাকে।

ডিফল্ট টুলটিপটি manifest.json এ "action" কী-এর "default_title" ক্ষেত্র ব্যবহার করে সেট করা হয়েছে। এছাড়াও আপনি action.setTitle() কল করে প্রোগ্রামগতভাবে এটি সেট করতে পারেন।

ব্যাজ

ক্রিয়াগুলি ঐচ্ছিকভাবে একটি "ব্যাজ" প্রদর্শন করতে পারে — আইকনের উপর স্তরযুক্ত কিছু পাঠ্য। এটি আপনাকে এক্সটেনশনের অবস্থা, যেমন একটি কাউন্টার সম্পর্কে অল্প পরিমাণ তথ্য প্রদর্শনের জন্য অ্যাকশন আপডেট করতে দেয়। ব্যাজটিতে একটি পাঠ্য উপাদান এবং একটি পটভূমির রঙ রয়েছে৷ যেহেতু স্থান সীমিত, আমরা সুপারিশ করি যে ব্যাজ পাঠ্য চার বা তার কম অক্ষর ব্যবহার করুন।

একটি ব্যাজ তৈরি করতে, কর্মসূচীতে এটি সেট করুন action.setBadgeBackgroundColor() এবং action.setBadgeText() কল করে। ম্যানিফেস্টে কোনো ডিফল্ট ব্যাজ সেটিং নেই। ব্যাজের রঙের মান 0 থেকে 255 এর মধ্যে চারটি পূর্ণসংখ্যার একটি অ্যারে হতে পারে যা ব্যাজের RGBA রঙ বা একটি CSS রঙের মান সহ একটি স্ট্রিং তৈরি করে।

chrome.action.setBadgeBackgroundColor(
  {color: [0, 255, 0, 0]},  // Green
  () => { /* ... */ },
);

chrome.action.setBadgeBackgroundColor(
  {color: '#00FF00'},  // Also green
  () => { /* ... */ },
);

chrome.action.setBadgeBackgroundColor(
  {color: 'green'},  // Also, also green
  () => { /* ... */ },
);

পপআপ

যখন ব্যবহারকারী টুলবারে এক্সটেনশনের অ্যাকশন বোতামে ক্লিক করেন তখন একটি অ্যাকশনের পপআপ দেখানো হয়। পপআপে আপনার পছন্দের যেকোনো HTML বিষয়বস্তু থাকতে পারে এবং স্বয়ংক্রিয়ভাবে এর বিষয়বস্তুর সাথে মানানসই আকার দেওয়া হবে। পপআপের আকার অবশ্যই 25x25 এবং 800x600 পিক্সেলের মধ্যে হতে হবে।

পপআপটি প্রাথমিকভাবে manifest.json ফাইলের "action" কী-তে "default_popup" বৈশিষ্ট্য দ্বারা সেট করা হয়। যদি উপস্থিত থাকে, এই বৈশিষ্ট্যটি এক্সটেনশন ডিরেক্টরির মধ্যে একটি আপেক্ষিক পথ নির্দেশ করবে। এটি action.setPopup() পদ্ধতি ব্যবহার করে একটি ভিন্ন আপেক্ষিক পথ নির্দেশ করার জন্য গতিশীলভাবে আপডেট করা যেতে পারে।

কেস ব্যবহার করুন

প্রতি ট্যাব অবস্থা

প্রতিটি ট্যাবের জন্য এক্সটেনশন অ্যাকশনের বিভিন্ন অবস্থা থাকতে পারে। একটি পৃথক ট্যাবের জন্য একটি মান সেট করতে, action API এর সেটিং পদ্ধতিতে tabId বৈশিষ্ট্য ব্যবহার করুন। উদাহরণস্বরূপ, একটি নির্দিষ্ট ট্যাবের জন্য ব্যাজ পাঠ্য সেট করতে, নিম্নলিখিতগুলির মতো কিছু করুন:

function getTabId() { /* ... */}
function getTabBadge() { /* ... */}

chrome.action.setBadgeText(
  {
    text: getTabBadge(tabId),
    tabId: getTabId(),
  },
  () => { ... }
);

যদি tabId প্রপার্টি বাদ দেওয়া হয়, সেটিংটিকে একটি গ্লোবাল সেটিং হিসাবে বিবেচনা করা হয়। ট্যাব-নির্দিষ্ট সেটিংস বিশ্বব্যাপী সেটিংসের চেয়ে অগ্রাধিকার নেয়।

সক্রিয় অবস্থা

ডিফল্টরূপে, প্রতিটি ট্যাবে টুলবার অ্যাকশন সক্রিয় (ক্লিকযোগ্য) থাকে। আপনি action.enable() এবং action.disable() পদ্ধতি ব্যবহার করে এটি নিয়ন্ত্রণ করতে পারেন। এটি শুধুমাত্র পপআপ (যদি থাকে) বা action.onClicked ইভেন্ট আপনার এক্সটেনশনে পাঠানো হয় কিনা তা প্রভাবিত করে; এটি টুলবারে কর্মের উপস্থিতি প্রভাবিত করে না।

উদাহরণ

নিম্নলিখিত উদাহরণগুলি কিছু সাধারণ উপায় দেখায় যেগুলি এক্সটেনশনগুলিতে ব্যবহৃত হয়৷ এই API ব্যবহার করে দেখতে, chrome-extension-samples repository থেকে Action API উদাহরণটি ইনস্টল করুন।

একটি পপআপ দেখান

যখন ব্যবহারকারী এক্সটেনশনের অ্যাকশনে ক্লিক করেন তখন একটি এক্সটেনশনের জন্য একটি পপআপ প্রদর্শন করা সাধারণ। আপনার নিজস্ব এক্সটেনশনে এটি বাস্তবায়ন করতে, আপনার manifest.json এ পপআপ ঘোষণা করুন এবং Chrome-এর পপআপে যে সামগ্রী প্রদর্শন করা উচিত তা নির্দিষ্ট করুন৷

// manifest.json
{
  "name": "Action popup demo",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_title": "Click to view a popup",
    "default_popup": "popup.html"
  }
}

<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
  <style>
    html {
      min-height: 5em;
      min-width: 10em;
      background: salmon;
    }
  </style>
</head>
<body>
  <p>Hello, world!</p>
</body>
</html>

ক্লিকে একটি বিষয়বস্তু স্ক্রিপ্ট ইনজেক্ট করুন

এক্সটেনশনের জন্য একটি সাধারণ প্যাটার্ন হল এক্সটেনশনের ক্রিয়া ব্যবহার করে তাদের প্রাথমিক বৈশিষ্ট্যটি প্রকাশ করা। নিম্নলিখিত উদাহরণ এই প্যাটার্ন প্রদর্শন. যখন ব্যবহারকারী অ্যাকশনে ক্লিক করেন, তখন এক্সটেনশন বর্তমান পৃষ্ঠায় একটি বিষয়বস্তু স্ক্রিপ্ট ইনজেক্ট করে। বিষয়বস্তু স্ক্রিপ্ট তারপর সবকিছু প্রত্যাশিত হিসাবে কাজ করেছে তা যাচাই করার জন্য একটি সতর্কতা প্রদর্শন করে।

// manifest.json
{
  "name": "Action script injection demo",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_title": "Click to show an alert"
  },
  "permissions": ["activeTab", "scripting"],
  "background": {
    "service_worker": "background.js"
  }
}

// background.js
chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    files: ['content.js']
  });
});

// content.js
alert('Hello, world!');

ঘোষণামূলক বিষয়বস্তু সহ কর্ম অনুকরণ করুন

এই উদাহরণটি দেখায় কিভাবে একটি এক্সটেনশনের ব্যাকগ্রাউন্ড লজিক (a) ডিফল্টরূপে একটি অ্যাকশনকে অক্ষম করতে পারে এবং (b) নির্দিষ্ট সাইটে অ্যাকশন সক্রিয় করতে declarative Content ব্যবহার করতে পারে।

// service-worker.js

// Wrap in an onInstalled callback to avoid unnecessary work
// every time the service worker is run
chrome.runtime.onInstalled.addListener(() => {
  // Page actions are disabled by default and enabled on select tabs
  chrome.action.disable();

  // Clear all rules to ensure only our expected rules are set
  chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
    // Declare a rule to enable the action on example.com pages
    let exampleRule = {
      conditions: [
        new chrome.declarativeContent.PageStateMatcher({
          pageUrl: {hostSuffix: '.example.com'},
        })
      ],
      actions: [new chrome.declarativeContent.ShowAction()],
    };

    // Finally, apply our new array of rules
    let rules = [exampleRule];
    chrome.declarativeContent.onPageChanged.addRules(rules);
  });
});

chrome.action.disable(
  tabId?: number,
  callback?: function,
)

chrome.action.enable(
  tabId?: number,
  callback?: function,
)

chrome.action.getBadgeBackgroundColor(
  details: TabDetails,
  callback?: function,
)

chrome.action.getBadgeText(
  details: TabDetails,
  callback?: function,
)

chrome.action.getBadgeTextColor(
  details: TabDetails,
  callback?: function,
)

chrome.action.getPopup(
  details: TabDetails,
  callback?: function,
)

chrome.action.getTitle(
  details: TabDetails,
  callback?: function,
)

chrome.action.getUserSettings(
  callback?: function,
)

chrome.action.isEnabled(
  tabId?: number,
  callback?: function,
)

chrome.action.openPopup(
  options?: OpenPopupOptions,
  callback?: function,
)

chrome.action.setBadgeBackgroundColor(
  details: object,
  callback?: function,
)

chrome.action.setBadgeText(
  details: object,
  callback?: function,
)

chrome.action.setBadgeTextColor(
  details: object,
  callback?: function,
)

chrome.action.setIcon(
  details: object,
  callback?: function,
)

chrome.action.setPopup(
  details: object,
  callback?: function,
)

chrome.action.setTitle(
  details: object,
  callback?: function,
)

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

chrome.action.onUserSettingsChanged.addListener(
  callback: function,
)