browser.sidePanel

বিবরণ

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

অনুমতি

sidePanel

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

manifest.json:

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

উপলভ্যতা

Chrome 114+ Chrome 148 থেকে browser.* MV3+

ধারণা ও ব্যবহার

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

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

কিছু ফিচারের মধ্যে রয়েছে:

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

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

নিচের বিভাগগুলি Side Panel API-এর কিছু সাধারণ ব্যবহারের উদাহরণ দেখায়। সম্পূর্ণ এক্সটেনশনের উদাহরণ দেখতে এক্সটেনশনের স্যাম্পেল দেখুন।

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

প্রতিটি সাইটে একই সাইড প্যানেল দেখানোর জন্য ম্যানিফেস্টের "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() ফিচার নিয়ে আসা হয়েছে। এটি এক্সটেনশনকে এক্সটেনশন ইউজার জেসচারের মাধ্যমে সাইড প্যানেল খোলার অনুমতি দেয়, যেমন অ্যাকশন আইকনে ক্লিক করা। অথবা এক্সটেনশন পৃষ্ঠা বা কন্টেন্ট স্ক্রিপ্টে ব্যবহারকারীর ইন্টার‍্যাকশন, যেমন কোনও বোতামে ক্লিক করা। সম্পূর্ণ ডেমো দেখতে, সাইড প্যানেল খুলুন স্যাম্পেল এক্সটেনশন দেখুন।

ব্যবহারকারী কোনও প্রাসঙ্গিক মেনুতে ক্লিক করলে বর্তমান উইন্ডোতে কীভাবে গ্লোবাল সাইড প্যানেল খুলতে হয় তা নিম্নলিখিত কোড থেকে জানা যায়। 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 });
  }
});

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

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

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

সাইড প্যানেল খুলুন

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

• অ্যাকশন ক্লিক
• কীবোর্ড শর্টকাট
• একটি সংশ্লিষ্ট মেনু
• এক্সটেনশন পৃষ্ঠা বা কন্টেন্ট স্ক্রিপ্টে ইউজার জেসচার।

সাইড প্যানেল পিন করুন

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

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

উদাহরণ

আরও Side Panel API এক্সটেনশন ডেমোর জন্য, নিম্নলিখিত যেকোনও এক্সটেনশন এক্সপ্লোর করুন:

• ডিকশনারি সাইড প্যানেল।
• গ্লোবাল সাইড প্যানেল।
• একাধিক সাইড প্যানেল।
• সাইড প্যানেল খুলুন।
• সাইট-নির্দিষ্ট সাইড প্যানেল।

ধরন

CloseOptions

Chrome 141+ Chrome 148 থেকে browser.*

প্রপার্টি

• tabId

  নম্বর ঐচ্ছিক

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

• windowId

  নম্বর ঐচ্ছিক

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

GetPanelOptions

প্রপার্টি

• tabId

  নম্বর ঐচ্ছিক

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

OpenOptions

Chrome 116+ Chrome 148 থেকে browser.*

প্রপার্টি

• tabId

  নম্বর ঐচ্ছিক

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

• windowId

  নম্বর ঐচ্ছিক

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

PanelBehavior

প্রপার্টি

• openPanelOnActionClick

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

  এক্সটেনশনের আইকনে ক্লিক করলে, সাইড প্যানেলে এক্সটেনশনের এন্ট্রি টগল করে দেখানো হবে কিনা। ডিফল্ট হিসেবে false সেট করা থাকে।

PanelClosedInfo

Chrome 142+ Chrome 148 থেকে browser.*

প্রপার্টি

• পথ

  স্ট্রিং

  এক্সটেনশন প্যাকেজের মধ্যে লোকাল রিসোর্সের পাথ যার কন্টেন্ট প্যানেলে দেখানো হয়।

• tabId

  নম্বর ঐচ্ছিক

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

• windowId

  নম্বর

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

PanelLayout

Chrome 140+ Chrome 148 থেকে browser.*

প্রপার্টি

• পাশে

  সাইড

PanelOpenedInfo

Chrome 141+ Chrome 148 থেকে browser.*

প্রপার্টি

• পথ

  স্ট্রিং

  এক্সটেনশন প্যাকেজের মধ্যে লোকাল রিসোর্সের পাথ যার কন্টেন্ট প্যানেলে দেখানো হয়।

• tabId

  নম্বর ঐচ্ছিক

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

• windowId

  নম্বর

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

PanelOptions

প্রপার্টি

• সক্ষমিত

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

  সাইড প্যানেল চালু করা উচিত কিনা। এটি ঐচ্ছিক। ডিফল্ট ভ্যালু হল true।

• পথ

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

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

• tabId

  নম্বর ঐচ্ছিক

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

Side

Chrome 140+ Chrome 148 থেকে browser.*

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

Enum

"বাকি আছে"

"ডান"

SidePanel

প্রপার্টি

• default_path

  স্ট্রিং

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

পদ্ধতি

close()

Chrome 141+ Chrome 148 থেকে browser.*

browser.sidePanel.close(
  options: CloseOptions,
): Promise<void>

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

প্যারামিটারগুলি

• বিকল্প

  CloseOptions

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

রিটার্ন

• <void> প্রমিস

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

getLayout()

Chrome 140+ Chrome 148 থেকে browser.*

browser.sidePanel.getLayout(): Promise<PanelLayout>

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

রিটার্ন

• Promise<PanelLayout>

  একটি Promise রিটার্ন করে যা PanelLayout-এর মাধ্যমে সমাধান করা হয়।

getOptions()

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

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

প্যারামিটারগুলি

• বিকল্প

  GetPanelOptions

  কোন কনটেক্সটের জন্য কনফিগারেশন রিটার্ন করা হবে তা উল্লেখ করে।

রিটার্ন

• Promise<PanelOptions>

  অ্যাক্টিভ প্যানেল কনফিগারেশনের মাধ্যমে সমাধান করে এমন একটি Promise ফিরিয়ে দেয়।

getPanelBehavior()

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

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

রিটার্ন

• Promise<PanelBehavior>

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

open()

Chrome 116+ Chrome 148 থেকে browser.*

browser.sidePanel.open(
  options: OpenOptions,
): Promise<void>

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

প্যারামিটারগুলি

• বিকল্প

  OpenOptions

  সাইড প্যানেল খোলার জন্য প্রসঙ্গ নির্দিষ্ট করে।

রিটার্ন

• <void> প্রমিস

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

setOptions()

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

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

প্যারামিটারগুলি

• বিকল্প

  PanelOptions

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

রিটার্ন

• <void> প্রমিস

  একটি Promise রিটার্ন করে যা বিকল্প সেট করা হলে সমাধান করে।

setPanelBehavior()

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

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

প্যারামিটারগুলি

• বেশি ভাষায়

  PanelBehavior

  নতুন আচরণ সেট করতে হবে।

রিটার্ন

• <void> প্রমিস

  নতুন আচরণ সেট করা হলে সমাধান করে এমন একটি প্রমিস রিটার্ন করে।

ইভেন্ট

onClosed

Chrome 142+ Chrome 148 থেকে browser.*

browser.sidePanel.onClosed.addListener(
  callback: function,
)

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

প্যারামিটারগুলি

• কলব্যাক

  ফাংশন

  callback প্যারামিটারটি দেখতে এইরকম:

  (info: PanelClosedInfo) => void

  • তথ্য

    PanelClosedInfo

onOpened

Chrome 141+ Chrome 148 থেকে browser.*

browser.sidePanel.onOpened.addListener(
  callback: function,
)

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

প্যারামিটারগুলি

• কলব্যাক

  ফাংশন

  callback প্যারামিটারটি দেখতে এইরকম:

  (info: PanelOpenedInfo) => void

  • তথ্য

    PanelOpenedInfo