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

chrome.sidePanel

ब्यौरा

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

अनुमतियां

sidePanel

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

manifest.json:

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

उपलब्धता

Chrome 114 और इसके बाद के वर्शन MV3+

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

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

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

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

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

इस्तेमाल के उदाहरण

साइड पैनल एपीआई के कुछ सामान्य इस्तेमाल के उदाहरण नीचे दिए गए सेक्शन में दिखाए गए हैं. एक्सटेंशन के पूरे उदाहरणों के लिए, एक्सटेंशन के सैंपल देखें.

हर साइट पर एक ही साइड पैनल दिखाएं

हर साइट पर एक ही साइड पैनल दिखाने के लिए, साइड पैनल को मेनिफ़ेस्ट की "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.tabs.onActivated.addListener(async ({ tabId }) => {
  const { path } = await chrome.sidePanel.getOptions({ tabId });
  if (path === welcomePage) {
    chrome.sidePanel.setOptions({ path: mainPage });
  }
});

पूरा सैंपल देखने के लिए, एक से ज़्यादा साइड पैनल देखें.

साइड पैनल में उपयोगकर्ता अनुभव

उपयोगकर्ताओं को सबसे पहले, Chrome में पहले से मौजूद साइड पैनल दिखेंगे. हर साइड पैनल में, साइड पैनल के मेन्यू में एक्सटेंशन का आइकॉन दिखता है. अगर कोई आइकॉन शामिल नहीं किया जाता है, तो यह एक्सटेंशन के नाम के पहले अक्षर के साथ एक प्लेसहोल्डर आइकॉन दिखाएगा.

साइड पैनल खोलें

साइड पैनल के मेन्यू पर जाना: उपयोगकर्ता, साइड पैनल के मेन्यू में उपलब्ध साइड पैनल देख सकते हैं. इसके बाद, वे ड्रॉप-डाउन मेन्यू से कोई एक्सटेंशन चुन सकते हैं.

उपयोगकर्ता के जेस्चर की मदद से खोलें

उपयोगकर्ता के इंटरैक्शन से साइड पैनल खोलने के लिए, sidePanel.open() और sidePanel.setPanelBehavior() का इस्तेमाल किया जा सकता है, जैसे:

ऐक्शन क्लिक
कीबोर्ड शॉर्टकट
कॉन्टेक्स्ट मेन्यू
किसी एक्सटेंशन पेज या कॉन्टेंट स्क्रिप्ट पर उपयोगकर्ता का जेस्चर.

उदाहरण

साइड पैनल एपीआई के और एक्सटेंशन डेमो के लिए, इनमें से किसी भी एक्सटेंशन के बारे में जानें:

टाइप

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
```

रिटर्न

Promise<void>

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

setOptions()

वादा

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

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

पैरामीटर

विकल्प

PanelOptions

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

फ़ंक्शन ज़रूरी नहीं

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

रिटर्न

Promise<void>

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

setPanelBehavior()

वादा

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

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

पैरामीटर

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

PanelBehavior

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

फ़ंक्शन ज़रूरी नहीं

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

रिटर्न

Promise<void>

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