এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

chrome.sidePanel

বর্ণনা

একটি ওয়েবপৃষ্ঠার প্রধান বিষয়বস্তুর পাশাপাশি ব্রাউজারের পার্শ্ব প্যানেলে সামগ্রী হোস্ট করতে chrome.sidePanel API ব্যবহার করুন৷

অনুমতি

sidePanel

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

manifest.json:

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

প্রাপ্যতা

Chrome 114+ MV3+

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

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

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

কিছু বৈশিষ্ট্য অন্তর্ভুক্ত:

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

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

নিম্নলিখিত বিভাগগুলি সাইড প্যানেল 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() ব্যবহার করতে পারে। এই উদাহরণটি ট্যাবে করা যেকোনো আপডেট শোনার জন্য chrome.tabs.onUpdated() ব্যবহার করে। এটি URLটি www.google.com কিনা তা পরীক্ষা করে এবং পাশের প্যানেলটি সক্ষম করে। অন্যথায়, এটি অক্ষম করে।

service-worker.js:

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

chrome.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 chrome.sidePanel.setOptions({
      tabId,
      path: 'sidepanel.html',
      enabled: true
    });
  } else {
    // Disables the side panel on all other sites
    await chrome.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
chrome.sidePanel
  .setPanelBehavior({ openPanelOnActionClick: true })
  .catch((error) => console.error(error));
...

ব্যবহারকারীর মিথস্ক্রিয়ায় প্রোগ্রাম্যাটিকভাবে পাশের প্যানেলটি খুলুন

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

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

service-worker.js:

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

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

একটি ভিন্ন প্যানেলে স্যুইচ করুন

বর্তমান সাইড প্যানেল পুনরুদ্ধার করতে এক্সটেনশন sidepanel.getOptions() ব্যবহার করতে পারে। নিম্নলিখিত উদাহরণ runtime.onInstalled() -এ একটি স্বাগত পার্শ্ব প্যানেল সেট করে। তারপর যখন ব্যবহারকারী একটি ভিন্ন ট্যাবে নেভিগেট করে, তখন এটি প্রধান পার্শ্ব প্যানেলের সাথে প্রতিস্থাপন করে।

service-worker.js:

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

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

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

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

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

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

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

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

একটি অ্যাকশন ক্লিক
একটি কীবোর্ড শর্টকাট
একটি প্রসঙ্গ মেনু
একটি এক্সটেনশন পৃষ্ঠা বা বিষয়বস্তু স্ক্রিপ্টে ব্যবহারকারীর অঙ্গভঙ্গি ।

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

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

উদাহরণ

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

প্রকারভেদ

GetPanelOptions

বৈশিষ্ট্য

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

OpenOptions

Chrome 116+

বৈশিষ্ট্য

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

PanelBehavior

বৈশিষ্ট্য

openPanelOnActionClick
বুলিয়ান ঐচ্ছিক
এক্সটেনশনের আইকনে ক্লিক করলে পাশের প্যানেলে এক্সটেনশনের এন্ট্রি দেখানো টগল হবে কিনা। ডিফল্ট থেকে মিথ্যা.

PanelOptions

বৈশিষ্ট্য

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

SidePanel

বৈশিষ্ট্য

ডিফল্ট_পথ
স্ট্রিং
পাশের প্যানেল প্রদর্শনের জন্য বিকাশকারী নির্দিষ্ট পথ।

পদ্ধতি

getOptions()

প্রতিশ্রুতি

chrome.sidePanel.getOptions(
  options: GetPanelOptions,
  callback?: function,
)

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

পরামিতি

বিকল্প
GetPanelOptions
কনফিগারেশন ফেরত দেওয়ার জন্য প্রসঙ্গ নির্দিষ্ট করে।
কলব্যাক
ফাংশন ঐচ্ছিক
callback প্যারামিটারটি এর মতো দেখাচ্ছে:
```
(options: PanelOptions) => void
```
- বিকল্প
  প্যানেল বিকল্প

রিটার্নস

প্রতিশ্রুতি< প্যানেল বিকল্প >
প্রতিশ্রুতিগুলি ম্যানিফেস্ট V3 এবং পরবর্তীতে সমর্থিত, তবে পশ্চাদগামী সামঞ্জস্যের জন্য কলব্যাক প্রদান করা হয়। আপনি একই ফাংশন কলে উভয় ব্যবহার করতে পারবেন না। প্রতিশ্রুতিটি একই ধরণের সাথে সমাধান করে যা কলব্যাকে পাস করা হয়।

getPanelBehavior()

প্রতিশ্রুতি

chrome.sidePanel.getPanelBehavior(
  callback?: function,
)

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

পরামিতি

কলব্যাক
ফাংশন ঐচ্ছিক
callback প্যারামিটারটি এর মতো দেখাচ্ছে:
```
(behavior: PanelBehavior) => void
```
- আচরণ
  প্যানেল আচরণ

রিটার্নস

প্রতিশ্রুতি< প্যানেল আচরণ >
প্রতিশ্রুতিগুলি ম্যানিফেস্ট V3 এবং পরবর্তীতে সমর্থিত, তবে পশ্চাদগামী সামঞ্জস্যের জন্য কলব্যাক প্রদান করা হয়। আপনি একই ফাংশন কলে উভয় ব্যবহার করতে পারবেন না। প্রতিশ্রুতিটি একই ধরণের সাথে সমাধান করে যা কলব্যাকে পাস করা হয়।

open()

প্রতিশ্রুতি Chrome 116+

chrome.sidePanel.open(
  options: OpenOptions,
  callback?: function,
)

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

পরামিতি

বিকল্প
ওপেন অপশন
যে প্রেক্ষাপটে সাইড প্যানেল খুলতে হবে তা নির্দিষ্ট করে।
কলব্যাক
ফাংশন ঐচ্ছিক
callback প্যারামিটারটি এর মতো দেখাচ্ছে:
```
() => void
```

রিটার্নস

প্রতিশ্রুতি <void>
প্রতিশ্রুতিগুলি ম্যানিফেস্ট V3 এবং পরবর্তীতে সমর্থিত, তবে পশ্চাদগামী সামঞ্জস্যের জন্য কলব্যাক প্রদান করা হয়। আপনি একই ফাংশন কলে উভয় ব্যবহার করতে পারবেন না। প্রতিশ্রুতিটি একই ধরণের সাথে সমাধান করে যা কলব্যাকে পাস করা হয়।

setOptions()

প্রতিশ্রুতি

chrome.sidePanel.setOptions(
  options: PanelOptions,
  callback?: function,
)

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

পরামিতি

বিকল্প
প্যানেল বিকল্প
প্যানেলে প্রয়োগ করার জন্য কনফিগারেশন বিকল্প।
কলব্যাক
ফাংশন ঐচ্ছিক
callback প্যারামিটারটি এর মতো দেখাচ্ছে:
```
() => void
```

রিটার্নস

প্রতিশ্রুতি <void>
প্রতিশ্রুতিগুলি ম্যানিফেস্ট V3 এবং পরবর্তীতে সমর্থিত, তবে পশ্চাদগামী সামঞ্জস্যের জন্য কলব্যাক প্রদান করা হয়। আপনি একই ফাংশন কলে উভয় ব্যবহার করতে পারবেন না। প্রতিশ্রুতিটি একই ধরণের সাথে সমাধান করে যা কলব্যাকে পাস করা হয়।

setPanelBehavior()

প্রতিশ্রুতি

chrome.sidePanel.setPanelBehavior(
  behavior: PanelBehavior,
  callback?: function,
)

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

পরামিতি

আচরণ
প্যানেল আচরণ
নতুন আচরণ সেট করতে হবে।
কলব্যাক
ফাংশন ঐচ্ছিক
callback প্যারামিটারটি এর মতো দেখাচ্ছে:
```
() => void
```

রিটার্নস

প্রতিশ্রুতি <void>
প্রতিশ্রুতিগুলি ম্যানিফেস্ট V3 এবং পরবর্তীতে সমর্থিত, তবে পশ্চাদগামী সামঞ্জস্যের জন্য কলব্যাক প্রদান করা হয়। আপনি একই ফাংশন কলে উভয় ব্যবহার করতে পারবেন না। প্রতিশ্রুতিটি একই ধরণের সাথে সমাধান করে যা কলব্যাকে পাস করা হয়।