इस पेज का अनुवाद Cloud Translation API से किया गया है.

chrome.sidePanel

ब्यौरा

ब्राउज़र के साइड पैनल में कॉन्टेंट को होस्ट करने के लिए, chrome.sidePanel एपीआई का इस्तेमाल करें. यह कॉन्टेंट, वेबपेज के मुख्य कॉन्टेंट के साथ भी दिखाया जा सकता है.

अनुमतियां

sidePanel

साइड पैनल एपीआई का इस्तेमाल करने के लिए, एक्सटेंशन मेनिफ़ेस्ट फ़ाइल में "sidePanel" की अनुमति जोड़ें:

manifest.json:

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

उपलब्धता

Chrome 114 और उसके बाद वाले वर्शन के लिए संगीत वीडियो 3+

सिद्धांत और उनका इस्तेमाल

साइड पैनल एपीआई की मदद से एक्सटेंशन, साइड पैनल में अपना यूज़र इंटरफ़ेस (यूआई) दिखा सकते हैं. इससे, उपयोगकर्ता को लगातार एक जैसा अनुभव मिलता है, जो उपयोगकर्ता के ब्राउज़िंग अनुभव को बेहतर बनाता है.

साइड पैनल ड्रॉप-डाउन मेन्यू — Chrome ब्राउज़र के साइड पैनल का यूज़र इंटरफ़ेस (यूआई).

कुछ सुविधाओं में ये शामिल हैं:

एक से दूसरे टैब पर जाने के दौरान, साइड पैनल खुला रहता है. हालांकि, ऐसा तब ही होगा, जब लिंक पर क्लिक करने के लिए सेट किया गया हो.
यह सुविधा सिर्फ़ कुछ वेबसाइटों पर उपलब्ध की जा सकती है.
एक्सटेंशन पेज के तौर पर, साइड पैनल के पास सभी 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() का इस्तेमाल करके किसी खास टैब पर साइड पैनल चालू कर सकता है. टैब में किए गए किसी भी अपडेट को सुनने के लिए, इस उदाहरण में chrome.tabs.onUpdated() का इस्तेमाल किया गया है. यह जांच करता है कि यूआरएल 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

प्रॉपर्टी

tabId

नंबर वैकल्पिक

अगर बताया गया है, तो दि�� गए ��ैब क�� िए, ��ाइड पैनल के विकल्प दिखाए जाएंगे. ऐसा न होने पर, साइड पैनल के डिफ़ॉल्ट विकल्प दिखते हैं. ऐसे किसी भी टैब के लिए इस्तेमाल किया जाता है जिसमें कोई खास सेटिंग नहीं होती.

OpenOptions

Chrome 116 और उसके बाद वाले वर्शन

प्रॉपर्टी

tabId

नंबर वैकल्पिक

वह टैब जिसमें साइड पैनल खोलना है. अगर इससे जुड़े टैब का साइड पैनल किसी खास टैब में है, तो यह पैनल सिर्फ़ उसी टैब के लिए खुलेगा. अगर टैब के लिए खास पैनल न हो, तो ग्लोबल पैनल तय किए गए टैब में और ऐसे सभी टैब में खुला होगा जिनमें फ़िलहाल खुला टैब वाला खास पैनल नहीं है. ऐसा करने पर, संबंधित टैब में मौजूद किसी भी मौजूदा साइड पैनल (ग्लोबल या टैब के हिसाब से) को बदल दिया जाएगा. इनमें से कम से कम एक या windowId दिया जाना चाहिए.
windowId

नंबर वैकल्पिक

वह विंडो जिसमें साइड पैनल खोलना है. यह सिर्फ़ तब लागू होता है, जब एक्सटेंशन में ग्लोबल (टैब के हिसाब से नहीं) साइड पैनल या tabId भी दिया गया हो. ऐसा करने से, उपयोगकर्ता ने दी गई विंडो में जो साइड पैनल खोला है वह दुनिया भर के मौजूदा साइड पैनल को बदल देगा. इनमें से कम से कम एक या tabId दिया जाना चाहिए.

PanelBehavior

प्रॉपर्टी

openPanelOnActionClick

बूलियन ज़रूरी नहीं

एक्सटेंशन के आइकॉन पर क्लिक करने से, साइड पैनल में एक्सटेंशन की एंट्री दिखाने के लिए टॉगल किया जा सकता है या नहीं. डिफ़ॉल्ट तौर पर, 'गलत' पर सेट होती है.

PanelOptions

प्रॉपर्टी

चालू किया गया

बूलियन ज़रूरी नहीं

साइड पैनल चालू होना चाहिए या नहीं. हालांकि, ऐसा करना ज़रूरी नहीं है. डिफ़ॉल्ट तौर पर, यह वैल्यू 'सही' पर सेट होती है.
पाथ

स्ट्रिंग ज़रूरी नहीं

साइड पैनल की एचटीएमएल फ़ाइल का पाथ. यह एक्सटेंशन पैकेज में मौजूद एक स्थानीय संसाधन होना चाहिए.
tabId

नंबर वैकल्पिक

अगर बताया गया है, तो साइड पैनल के विकल्प सिर्फ़ इस आईडी वाले टैब पर लागू होंगे. अगर छोड़ा जाता है, तो ये विकल्प डिफ़ॉल्ट व्यवहार सेट करते हैं (किसी भी ऐसे टैब के लिए इस्तेमाल होता है जिसमें कोई खास सेटिंग नहीं होती). ध्यान दें: अगर इस tabId और डिफ़ॉल्ट tabId के लिए एक ही पाथ सेट किया गया हो, तो इस tabId का पैनल, डिफ़ॉल्ट tabId के पैनल से अलग होगा.

SidePanel

प्रॉपर्टी

default_path

स्ट्रिंग

साइड पैनल डिसप्ले के लिए डेवलपर का तय किया गया पाथ.

तरीके

getOptions()

प्रॉमिस

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

चालू पैनल कॉन्फ़िगरेशन को दिखाता है.

पैरामीटर

विकल्प

GetPanelOptions

उस संदर्भ के बारे में बताता है जिसके लिए कॉन्फ़िगरेशन दिखाना है.
कॉलबैक

फ़ंक्शन वैकल्पिक

callback पैरामीटर ऐसा दिखता है:
```
(options: PanelOptions) => void
```
- विकल्प
  
  PanelOptions

रिटर्न

Promise<PanelOptions>

मेनिफ़ेस्ट V3 और उसके बाद के वर्शन में प्रॉमिस काम करते हैं. हालांकि, कॉलबैक की सुविधा इन मामलों में दी जाती है पुराने सिस्टम के साथ काम करने की सुविधा. एक ही फ़ंक्शन कॉल में दोन��ं का इस्तेमाल नहीं किया जा सकता. कॉन्टेंट बनाने प्रॉमिस उसी टाइप के साथ ठीक होता है जिसे कॉलबैक में पास किया जाता है.

getPanelBehavior()

प्रॉमिस

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

यह विकल्प, एक्सटेंशन के साइड पैनल के मौजूदा व्यवहार को दिखाता है.

पैरामीटर

कॉलबैक

फ़ंक्शन वैकल्पिक

callback पैरामीटर ऐसा दिखता है:
```
(behavior: PanelBehavior) => void
```
- उपभोक्ता के व्यवहार
  
  PanelBehavior

रिटर्न

Promise<PanelBehavior>

मेनिफ़ेस्ट V3 और उसके बाद के वर्शन में प्रॉमिस काम करते हैं. हालांकि, कॉलबैक की सुविधा इन मामलों में दी जाती है पुराने सिस्टम के साथ काम करने की सुविधा. एक ही फ़ंक्शन कॉल में दोनों का इस्तेमाल नहीं किया जा सकता. कॉन्टेंट बनाने प्रॉमिस उसी टाइप के साथ ठीक होता है जिसे कॉलबैक में पास किया जाता है.

open()

प्रॉमिस Chrome 116 और उसके बाद वाले वर्शन के लिए

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

इससे एक्सटेंशन के लिए साइड पैनल खुलता है. इसे सिर्फ़ उपयोगकर्ता की कार्रवाई के जवाब में कॉल किया जा सकता है.

पैरामीटर

विकल्प

OpenOptions

साइड पैनल को खोलने का कॉन्टेक्स्ट तय करता है.
कॉलबैक

फ़ंक्शन वैकल्पिक

callback पैरामीटर ऐसा दिखता है:
```
() => void
```

रिटर्न

प्रॉमिस<void>

मेनिफ़ेस्ट V3 और उसके बाद के वर्शन में प्रॉमिस काम करते हैं. हालांकि, कॉलबैक की सुविधा इन मामलों में दी जाती है पुराने सिस्टम के साथ काम करने की सुविधा. एक ही फ़ंक्शन कॉल में दोनों का इस्तेमाल नहीं किया जा सकता. कॉन्टेंट बनाने प्रॉमिस उसी टाइप के साथ ठीक होता है जिसे कॉलबैक में पास किया जाता है.

setOptions()

प्रॉमिस

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

साइड पैनल कॉन्फ़िगर करता है.

पैरामीटर

विकल्प

PanelOptions

पैनल पर लागू किए जाने वाले कॉन्फ़िगरेशन के विकल्प.
कॉलबैक

फ़ंक्शन वैकल्पिक

callback पैरामीटर ऐसा दिखता है:
```
() => void
```

रिटर्न

प्रॉमिस<void>

मेनिफ़ेस्ट V3 और उसके बाद के वर्शन में प्रॉमिस काम करते हैं. हालांकि, कॉलबैक की सुविधा इन मामलों में दी जाती है पुराने सिस्टम के साथ काम करने की सुविधा. एक ही फ़ंक्शन कॉल में दोनों का इस्तेमाल नहीं किया जा सकता. कॉन्टेंट बनाने प्रॉमिस उसी टाइप के साथ ठीक होता है जिसे कॉलबैक में पास किया जाता है.

setPanelBehavior()

प्रॉमिस

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

यह नीति, एक्सटेंशन के साइड पैनल के व्यवहार को कॉन्फ़िगर करती है. यह एक अप्सर्ट कार्रवाई है.

पैरामीटर

उपभोक्ता के व्यवहार

PanelBehavior

सेट की जाने वाली नई कार्रवाई.
कॉलबैक

फ़ंक्शन वैकल्पिक

callback पैरामीटर ऐसा दिखता है:
```
() => void
```

रिटर्न

प्रॉमिस<void>

मेनिफ़ेस्ट V3 और उसके बाद के वर्शन में प्रॉमिस काम करते हैं. हालांकि, कॉलबैक की सुविधा इन मामलों में दी जाती है पुराने सिस्टम के साथ काम करने की सुविधा. एक ही फ़ंक्शन कॉल में दोनों का इस्ते��ाल नहीं किया जा सकता. कॉन्टेंट बनाने प्रॉमिस उसी टाइप के साथ ठीक होता है जिसे कॉलबैक में पास किया जाता है.