ব্রাউজার.সাইডপ্যানেল

বর্ণনা

কোনো ওয়েবপেজের মূল কন্টেন্টের পাশাপাশি ব্রাউজারের সাইড প্যানেলে কন্টেন্ট হোস্ট করতে chrome.sidePanel API ব্যবহার করুন।

অনুমতি

sidePanel

সাইড প্যানেল এপিআই ব্যবহার করতে, এক্সটেনশন ম্যানিফেস্ট ফাইলে "sidePanel" পারমিশনটি যোগ করুন:

manifest.json:

{
  "name": "My side panel extension",
  ...
  "permissions": [
    "sidePanel"
  ]
}

প্রাপ্যতা

ক্রোম ১১৪+ এমভি৩+

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

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

সাইড প্যানেল ড্রপ-ডাউন মেনু
ক্রোম ব্রাউজারের সাইড প্যানেল UI।

কিছু বৈশিষ্ট্যের মধ্যে রয়েছে:

  • ট্যাবগুলির মধ্যে যাতায়াত করার সময় সাইড প্যানেলটি খোলা থাকে (যদি সেভাবে সেট করা থাকে)।
  • এটি শুধুমাত্র নির্দিষ্ট কিছু ওয়েবসাইটে পাওয়া যেতে পারে।
  • এক্সটেনশন পেজ হিসেবে, সাইড প্যানেলগুলো সকল ক্রোম এপিআই অ্যাক্সেস করতে পারে।
  • ক্রোমের সেটিংসের মধ্যে ব্যবহারকারীরা নির্দিষ্ট করে দিতে পারেন যে প্যানেলটি কোন দিকে প্রদর্শিত হবে।

ব্যবহারের ক্ষেত্র

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

প্রতিটি সাইটে একই সাইড প্যানেল প্রদর্শন করুন

প্রতিটি সাইটে একই সাইড প্যানেল প্রদর্শন করার জন্য, ম্যানিফেস্টের "side_panel" ' কী-এর "default_path" প্রপার্টি থেকে সাইড প্যানেলটি প্রাথমিকভাবে সেট করা যেতে পারে। এটি অবশ্যই এক্সটেনশন ডিরেক্টরির মধ্যে একটি রিলেটিভ পাথ নির্দেশ করবে।

manifest.json:

{
  "name": "My side panel extension",
  ...
  "side_panel": {
    "default_path": "sidepanel.html"
  }
  ...
}

sidepanel.html:

<!DOCTYPE html>
<html>
  <head>
    <title>My Sidepanel</title>
  </head>
  <body>
    <h1>All sites sidepanel extension</h1>
    <p>This side panel is enabled on all sites</p>
  </body>
</html>

একটি নির্দিষ্ট সাইটে সাইড প্যানেল সক্রিয় করুন

একটি এক্সটেনশন কোনো নির্দিষ্ট ট্যাবে সাইড প্যানেল চালু করার জন্য sidepanel.setOptions() ব্যবহার করতে পারে। এই উদাহরণটিতে ট্যাবের যেকোনো আপডেট শোনার জন্য browser.tabs.onUpdated() ব্যবহার করা হয়েছে। এটি URL-টি www.google.com কিনা তা পরীক্ষা করে এবং সাইড প্যানেলটি চালু করে। অন্যথায়, এটি বন্ধ করে দেয়।

service-worker.js:

const GOOGLE_ORIGIN = 'https://www.google.com';

browser.tabs.onUpdated.addListener(async (tabId, info, tab) => {
  if (!tab.url) return;
  const url = new URL(tab.url);
  // Enables the side panel on google.com
  if (url.origin === GOOGLE_ORIGIN) {
    await browser.sidePanel.setOptions({
      tabId,
      path: 'sidepanel.html',
      enabled: true
    });
  } else {
    // Disables the side panel on all other sites
    await browser.sidePanel.setOptions({
      tabId,
      enabled: false
    });
  }
});

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

যখন ব্যবহারকারী এমন কোনো সাইটে যান যেখানে সাইড প্যানেল সক্রিয় করা নেই, তখন সাইড প্যানেলটি বন্ধ হয়ে যাবে এবং এক্সটেনশনটি সাইড প্যানেলের ড্রপ-ডাউন মেনুতে প্রদর্শিত হবে না।

একটি সম্পূর্ণ উদাহরণের জন্য, ট্যাব-নির্দিষ্ট সাইড প্যানেলের নমুনাটি দেখুন।

টুলবার আইকনে ক্লিক করে সাইড প্যানেলটি খুলুন।

ডেভেলপাররা sidePanel.setPanelBehavior() ব্যবহার করে ব্যবহারকারীদের অ্যাকশন টুলবার আইকনে ক্লিক করলে সাইড প্যানেল খোলার অনুমতি দিতে পারেন। প্রথমে, ম্যানিফেস্টে "action" কী-টি ডিক্লেয়ার করুন:

manifest.json:

{
  "name": "My side panel extension",
  ...
  "action": {
    "default_title": "Click to open panel"
  },
  ...
}

এখন, পূর্ববর্তী উদাহরণে এই কোডটি যোগ করুন:

service-worker.js:

const GOOGLE_ORIGIN = 'https://www.google.com';

// Allows users to open the side panel by clicking on the action toolbar icon
browser.sidePanel
  .setPanelBehavior({ openPanelOnActionClick: true })
  .catch((error) => console.error(error));
...

ব্যবহারকারীর ইন্টারঅ্যাকশনের ভিত্তিতে প্রোগ্রাম্যাটিকভাবে সাইড প্যানেলটি খুলুন।

Chrome 116-এ sidePanel.open() ফাংশনটি চালু করা হয়েছে। এর মাধ্যমে এক্সটেনশনগুলো ব্যবহারকারীর কোনো অঙ্গভঙ্গির (যেমন অ্যাকশন আইকনে ক্লিক করা ) সাহায্যে সাইড প্যানেল খুলতে পারে। অথবা এক্সটেনশনের কোনো পেজ বা কন্টেন্ট স্ক্রিপ্টে ব্যবহারকারীর কোনো ইন্টারঅ্যাকশনের (যেমন কোনো বাটনে ক্লিক করা) মাধ্যমেও এটি খোলা যায়। সম্পূর্ণ ডেমো দেখতে Open Side Panel স্যাম্পল এক্সটেনশনটি দেখুন।

নিম্নলিখিত কোডটি দেখায় কিভাবে ব্যবহারকারী একটি কনটেক্সট মেনুতে ক্লিক করলে বর্তমান উইন্ডোতে একটি গ্লোবাল সাইড প্যানেল খোলা যায়। sidePanel.open() ব্যবহার করার সময়, আপনাকে অবশ্যই সেই কনটেক্সটটি বেছে নিতে হবে যেখানে এটি খুলবে। একটি গ্লোবাল সাইড প্যানেল খুলতে windowId ব্যবহার করুন। বিকল্পভাবে, সাইড প্যানেলটি শুধুমাত্র একটি নির্দিষ্ট ট্যাবে খোলার জন্য tabId সেট করুন।

service-worker.js:

browser.runtime.onInstalled.addListener(() => {
  browser.contextMenus.create({
    id: 'openSidePanel',
    title: 'Open side panel',
    contexts: ['all']
  });
});

browser.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === 'openSidePanel') {
    // This will open the panel in all the pages on the current window.
    browser.sidePanel.open({ windowId: tab.windowId });
  }
});

অন্য প্যানেলে যান

এক্সটেনশনগুলো বর্তমান সাইড প্যানেলটি পাওয়ার জন্য sidepanel.getOptions() ব্যবহার করতে পারে। নিচের উদাহরণটি runtime.onInstalled() এ একটি ওয়েলকাম সাইড প্যানেল সেট করে। এরপর যখন ব্যবহারকারী অন্য কোনো ট্যাবে যান, তখন এটি মূল সাইড প্যানেলটি দিয়ে সেটিকে প্রতিস্থাপন করে।

service-worker.js:

const welcomePage = 'sidepanels/welcome-sp.html';
const mainPage = 'sidepanels/main-sp.html';

browser.runtime.onInstalled.addListener(() => {
  browser.sidePanel.setOptions({ path: welcomePage });
  browser.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
});

browser.tabs.onActivated.addListener(async ({ tabId }) => {
  const { path } = await browser.sidePanel.getOptions({ tabId });
  if (path === welcomePage) {
    browser.sidePanel.setOptions({ path: mainPage });
  }
});

সম্পূর্ণ কোডের জন্য একাধিক সাইড প্যানেলের নমুনাটি দেখুন।

সাইড প্যানেলের ব্যবহারকারীর অভিজ্ঞতা

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

পাশের প্যানেলটি খুলুন

ব্যবহারকারীদের সাইড প্যানেল খোলার সুযোগ দিতে, sidePanel.setPanelBehavior() এর সাথে একটি অ্যাকশন আইকন ব্যবহার করুন। বিকল্পভাবে, ব্যবহারকারীর কোনো ইন্টারঅ্যাকশনের পরে sidePanel.open() কল করুন, যেমন:

পাশের প্যানেলটি পিন করুন

সাইড প্যানেল UI-তে আইকনটি পিন করুন।
সাইড প্যানেল UI-তে আইকনটি পিন করুন।

আপনার সাইড প্যানেল খোলা থাকলে সাইড প্যানেল টুলবারে একটি পিন আইকন দেখা যায়। আইকনটিতে ক্লিক করলে আপনার এক্সটেনশনের অ্যাকশন আইকনটি পিন হয়ে যায়। একবার পিন হয়ে গেলে অ্যাকশন আইকনটিতে ক্লিক করলে আপনার অ্যাকশন আইকনের জন্য নির্ধারিত ডিফল্ট কাজটি সম্পন্ন হবে এবং শুধুমাত্র সুস্পষ্টভাবে কনফিগার করা থাকলেই সাইড প্যানেলটি খুলবে।

উদাহরণ

সাইড প্যানেল এপিআই এক্সটেনশনের আরও ডেমো দেখতে, নিচের যেকোনো এক্সটেনশন অন্বেষণ করুন:

প্রকারভেদ

CloseOptions

ক্রোম ১৪১+

বৈশিষ্ট্য

  • ট্যাবআইডি

    সংখ্যা ঐচ্ছিক

    যে ট্যাবে সাইড প্যানেলটি বন্ধ করতে হবে। যদি নির্দিষ্ট ট্যাবে একটি ট্যাব-নির্দিষ্ট সাইড প্যানেল খোলা থাকে, তবে সেটি সেই ট্যাবের জন্য বন্ধ হয়ে যাবে। যদি শুধুমাত্র গ্লোবাল সাইড প্যানেল খোলা থাকে, close() কল থেকে রিটার্ন করা প্রমিসটি একটি এরর সহ রিজেক্ট হবে। Chrome 145-এ এই আচরণটি পরিবর্তন করা হয়েছে, এবং এর আগের সংস্করণগুলিতে ফলব্যাক হিসেবে গ্লোবাল প্যানেলটি বন্ধ করা হতো। `this` অথবা windowId এর মধ্যে অন্তত একটি অবশ্যই প্রদান করতে হবে।

  • উইন্ডোআইডি

    সংখ্যা ঐচ্ছিক

    যে উইন্ডোতে সাইড প্যানেলটি বন্ধ করতে হবে। যদি নির্দিষ্ট উইন্ডোতে একটি গ্লোবাল সাইড প্যানেল খোলা থাকে, তবে সেই উইন্ডোর সমস্ত ট্যাবের জন্য এটি বন্ধ হয়ে যাবে যেখানে কোনো ট্যাব-নির্দিষ্ট প্যানেল সক্রিয় নেই। এটি অথবা tabId এর মধ্যে অন্তত একটি অবশ্যই প্রদান করতে হবে।

GetPanelOptions

বৈশিষ্ট্য

  • ট্যাবআইডি

    সংখ্যা ঐচ্ছিক

    নির্দিষ্ট করা থাকলে, প্রদত্ত ট্যাবের জন্য সাইড প্যানেলের অপশনগুলো ফেরত দেওয়া হবে। অন্যথায়, ডিফল্ট সাইড প্যানেলের অপশনগুলো ফেরত দেওয়া হবে (যা এমন যেকোনো ট্যাবের জন্য ব্যবহৃত হয় যার কোনো নির্দিষ্ট সেটিংস নেই)।

OpenOptions

ক্রোম ১১৬+

বৈশিষ্ট্য

  • ট্যাবআইডি

    সংখ্যা ঐচ্ছিক

    যে ট্যাবে সাইড প্যানেলটি খোলা হবে। যদি সংশ্লিষ্ট ট্যাবে একটি ট্যাব-নির্দিষ্ট সাইড প্যানেল থাকে, তবে প্যানেলটি শুধুমাত্র সেই ট্যাবের জন্যই খোলা থাকবে। যদি কোনো ট্যাব-নির্দিষ্ট প্যানেল না থাকে, তবে গ্লোবাল প্যানেলটি নির্দিষ্ট ট্যাবে এবং বর্তমানে খোলা ট্যাব-নির্দিষ্ট প্যানেল নেই এমন অন্য যেকোনো ট্যাবে খোলা হবে। এটি সংশ্লিষ্ট ট্যাবে বর্তমানে সক্রিয় যেকোনো সাইড প্যানেলকে (গ্লোবাল বা ট্যাব-নির্দিষ্ট) ওভাররাইড করবে। এটি অথবা windowId মধ্যে অন্তত একটি অবশ্যই প্রদান করতে হবে।

  • উইন্ডোআইডি

    সংখ্যা ঐচ্ছিক

    যে উইন্ডোতে সাইড প্যানেলটি খোলা হবে। এটি শুধুমাত্র তখনই প্রযোজ্য হবে যদি এক্সটেনশনটির একটি গ্লোবাল (ট্যাব-নির্দিষ্ট নয় এমন) সাইড প্যানেল থাকে অথবা tabId ও নির্দিষ্ট করা থাকে। এটি ব্যবহারকারীর খোলা থাকা যেকোনো বর্তমানে-সক্রিয় গ্লোবাল সাইড প্যানেলকে ওভাররাইড করবে। এটি অথবা tabId মধ্যে অন্তত একটি অবশ্যই প্রদান করতে হবে।

PanelBehavior

বৈশিষ্ট্য

  • openPanelOnActionClick

    বুলিয়ান ঐচ্ছিক

    এক্সটেনশনটির আইকনে ক্লিক করলে সাইড প্যানেলে এক্সটেনশনটির এন্ট্রি দেখানো চালু বা বন্ধ হবে কিনা। ডিফল্ট মান হলো 'ফলস'।

PanelClosedInfo

ক্রোম ১৪২+

বৈশিষ্ট্য

  • পথ

    স্ট্রিং

    এক্সটেনশন প্যাকেজের মধ্যে থাকা স্থানীয় রিসোর্সের পাথ, যার বিষয়বস্তু প্যানেলে প্রদর্শিত হয়।

  • ট্যাবআইডি

    সংখ্যা ঐচ্ছিক

    যে ট্যাবে সাইড প্যানেলটি বন্ধ করা হয়েছিল, তার ঐচ্ছিক আইডি। এটি শুধুমাত্র তখনই প্রদান করা হয় যখন প্যানেলটি ট্যাব-নির্দিষ্ট হয়।

  • উইন্ডোআইডি

    সংখ্যা

    যে উইন্ডোতে সাইড প্যানেলটি বন্ধ করা হয়েছিল, তার আইডি। এটি গ্লোবাল এবং ট্যাব-নির্দিষ্ট উভয় প্যানেলের জন্যই উপলব্ধ।

PanelLayout

ক্রোম ১৪০+

বৈশিষ্ট্য

PanelOpenedInfo

ক্রোম ১৪১+

বৈশিষ্ট্য

  • পথ

    স্ট্রিং

    এক্সটেনশন প্যাকেজের মধ্যে থাকা স্থানীয় রিসোর্সের পাথ, যার বিষয়বস্তু প্যানেলে প্রদর্শিত হয়।

  • ট্যাবআইডি

    সংখ্যা ঐচ্ছিক

    যে ট্যাবে সাইড প্যানেলটি খোলা হয়, তার ঐচ্ছিক আইডি। এটি শুধুমাত্র তখনই প্রদান করা হয় যখন প্যানেলটি ট্যাব-নির্দিষ্ট হয়।

  • উইন্ডোআইডি

    সংখ্যা

    যে উইন্ডোতে সাইড প্যানেলটি খোলা আছে, তার আইডি। এটি গ্লোবাল এবং ট্যাব-নির্দিষ্ট উভয় প্যানেলের জন্যই উপলব্ধ।

PanelOptions

বৈশিষ্ট্য

  • সক্ষম

    বুলিয়ান ঐচ্ছিক

    সাইড প্যানেলটি সক্রিয় করা হবে কিনা। এটি ঐচ্ছিক। এর ডিফল্ট মান হলো 'true'।

  • পথ

    স্ট্রিং ঐচ্ছিক

    ব্যবহার করার জন্য সাইড প্যানেল HTML ফাইলের পাথ। এটি অবশ্যই এক্সটেনশন প্যাকেজের মধ্যে একটি লোকাল রিসোর্স হতে হবে।

  • ট্যাবআইডি

    সংখ্যা ঐচ্ছিক

    নির্দিষ্ট করা থাকলে, সাইড প্যানেলের অপশনগুলো শুধুমাত্র এই আইডিযুক্ত ট্যাবের ক্ষেত্রেই প্রযোজ্য হবে। বাদ দেওয়া হলে, এই অপশনগুলো ডিফল্ট আচরণ নির্ধারণ করে (যা নির্দিষ্ট সেটিংস নেই এমন যেকোনো ট্যাবের জন্য ব্যবহৃত হয়)। দ্রষ্টব্য: যদি এই tabId এবং ডিফল্ট tabId-এর জন্য একই পাথ সেট করা থাকে, তাহলে এই tabId-এর প্যানেলটি ডিফল্ট tabId-এর প্যানেল থেকে একটি ভিন্ন ইনস্ট্যান্স হবে।

Side

ক্রোম ১৪০+

ব্রাউজার UI-তে সাইড প্যানেলের সম্ভাব্য বিন্যাস নির্ধারণ করে।

এনাম

"বাম"

"সঠিক"

SidePanel

বৈশিষ্ট্য

  • ডিফল্ট_পথ

    স্ট্রিং

    ডেভেলপার সাইড প্যানেল প্রদর্শনের জন্য পথ নির্দিষ্ট করেছেন।

পদ্ধতি

close()

ক্রোম ১৪১+
chrome.sidePanel.close(
  options: CloseOptions,
): Promise<void>

এক্সটেনশনটির পাশের প্যানেলটি বন্ধ করে। প্যানেলটি আগে থেকেই বন্ধ থাকলে এটি কাজ করে না।

প্যারামিটার

  • বিকল্পগুলি

    বন্ধ করার বিকল্প

    সাইড প্যানেলটি কোন প্রেক্ষাপটে বন্ধ করা হবে তা নির্দিষ্ট করে।

ফেরত

  • প্রতিশ্রুতি<শূন্য>

    একটি প্রমিজ রিটার্ন করে, যা সাইড প্যানেলটি বন্ধ হয়ে গেলে রিজলভ হয়।

getLayout()

ক্রোম ১৪০+
chrome.sidePanel.getLayout(): Promise<PanelLayout>

সাইড প্যানেলের বর্তমান লেআউট ফেরত দেয়।

ফেরত

getOptions()

chrome.sidePanel.getOptions(
  options: GetPanelOptions,
): Promise<PanelOptions>

সক্রিয় প্যানেল কনফিগারেশনটি ফেরত দেয়।

প্যারামিটার

  • বিকল্পগুলি

    GetPanelOptions

    যে প্রেক্ষাপটের জন্য কনফিগারেশন ফেরত দেওয়া হবে, তা নির্দিষ্ট করে।

ফেরত

  • প্রতিশ্রুতি< প্যানেল বিকল্প >

    একটি প্রমিজ রিটার্ন করে যা সক্রিয় প্যানেল কনফিগারেশন সহ রিজলভ হয়।

getPanelBehavior()

chrome.sidePanel.getPanelBehavior(): Promise<PanelBehavior>

এক্সটেনশনটির বর্তমান সাইড প্যানেলের আচরণ ফেরত দেয়।

ফেরত

  • প্রতিশ্রুতি< প্যানেল আচরণ >

    একটি প্রমিজ রিটার্ন করে যা এক্সটেনশনটির সাইড প্যানেলের আচরণসহ রিজলভ হয়।

open()

ক্রোম ১১৬+
chrome.sidePanel.open(
  options: OpenOptions,
): Promise<void>

এক্সটেনশনটির সাইড প্যানেল খোলে। এটি শুধুমাত্র ব্যবহারকারীর কোনো কাজের প্রতিক্রিয়ায় চালু করা যেতে পারে।

প্যারামিটার

  • বিকল্পগুলি

    ওপেনঅপশনস

    সাইড প্যানেলটি কোন প্রেক্ষাপটে খোলা হবে তা নির্দিষ্ট করে।

ফেরত

  • প্রতিশ্রুতি<শূন্য>

    একটি প্রমিজ রিটার্ন করে, যা সাইড প্যানেল খোলা হলে রিজলভ হয়।

setOptions()

chrome.sidePanel.setOptions(
  options: PanelOptions,
): Promise<void>

সাইড প্যানেলটি কনফিগার করে।

প্যারামিটার

  • বিকল্পগুলি

    প্যানেল বিকল্প

    প্যানেলে প্রয়োগ করার জন্য কনফিগারেশন বিকল্পসমূহ।

ফেরত

  • প্রতিশ্রুতি<শূন্য>

    একটি প্রমিস রিটার্ন করে, যা অপশনগুলো সেট করা হলে রিজলভ হয়।

setPanelBehavior()

chrome.sidePanel.setPanelBehavior(
  behavior: PanelBehavior,
): Promise<void>

এক্সটেনশনটির সাইড প্যানেলের আচরণ নির্ধারণ করে। এটি একটি আপসার্ট অপারেশন।

প্যারামিটার

ফেরত

  • প্রতিশ্রুতি<শূন্য>

    একটি প্রমিস রিটার্ন করে, যা নতুন আচরণটি সেট হয়ে গেলে রিজলভ হয়।

ইভেন্টগুলি

onClosed

ক্রোম ১৪২+
chrome.sidePanel.onClosed.addListener(
  callback: function,
)

এক্সটেনশনটির সাইড প্যানেল বন্ধ থাকলে এটি সক্রিয় হয়।

প্যারামিটার

onOpened

ক্রোম ১৪১+
chrome.sidePanel.onOpened.addListener(
  callback: function,
)

এক্সটেনশনটির পাশের প্যানেল খোলা হলে এটি সক্রিয় হয়।

প্যারামিটার