ब्यौरा
chrome.sidePanel
एपीआई का इस्तेमाल करके, ब्राउज़र के साइड पैनल में वेबपेज के मुख्य कॉन्टेंट के साथ कॉन्टेंट होस्ट करें.
अनुमतियां
sidePanel
साइड पैनल एपीआई का इस्तेमाल करने के लिए, एक्सटेंशन मेनिफ़ेस्ट फ़ाइल में "sidePanel"
अनुमति जोड़ें:
manifest.json:
{
"name": "My side panel extension",
...
"permissions": [
"sidePanel"
]
}
उपलब्धता
सिद्धांत और इस्तेमाल
साइड पैनल एपीआई, एक्सटेंशन को साइड पैनल में उनका यूज़र इंटरफ़ेस (यूआई) दिखाने की अनुमति देता है. इससे उपयोगकर्ता को ब्राउज़िंग अनुभव को बेहतर बनाने में मदद मिलती है.
![साइड पैनल ड्रॉप-डाउन मेन्यू](https://developer.chrome.com/static/docs/extensions/reference/api/sidePanel/images/example-side-panel.png?authuser=7&hl=hi)
कुछ सुविधाओं में ये शामिल हैं:
- टैब के बीच नेविगेट करने पर, साइड पैनल खुला रहता है. हालांकि, ऐसा सिर्फ़ तब किया जा सकता है, जब ऐसा करने के लिए सेट किया गया हो.
- यह कुछ खास वेबसाइटों पर ही उपलब्ध हो सकता है.
- एक्सटेंशन पेज के तौर पर, साइड पैनल के पास सभी 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.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()
को कॉल करें, जैसे:
- ऐक्शन क्लिक
- कीबोर्ड शॉर्टकट
- कॉन्टेक्स्ट मेन्यू
- किसी एक्सटेंशन पेज या कॉन्टेंट स्क्रिप्ट पर उपयोगकर्ता का जेस्चर.
साइड पैनल को पिन करना
![साइड पैनल के यूज़र इंटरफ़ेस (यूआई) में पिन आइकॉन.](https://developer.chrome.com/static/docs/extensions/reference/api/sidePanel/images/side-panel-pin.png?authuser=7&hl=hi)
साइड पैनल खुला होने पर, साइड पैनल के टूलबार पर पिन आइकॉन दिखता है. आइकॉन पर क्लिक करने से, आपके एक्सटेंशन के ऐक्शन आइकॉन को पिन कर दिया जाता है. पिन करने के बाद, ऐक्शन आइकॉन पर क्लिक करने से आपके ऐक्शन आइकॉन के लिए डिफ़ॉल्ट कार्रवाई होगी. साथ ही, साइड पैनल सिर्फ़ तब खुलेगा, जब इसे साफ़ तौर पर कॉन्फ़िगर किया गया हो.
उदाहरण
साइड पैनल एपीआई के और एक्सटेंशन डेमो के लिए, इनमें से किसी भी एक्सटेंशन के बारे में जानें:
- डिक्शनरी का साइड पैनल.
- ग्लोबल साइड पैनल.
- एक से ज़्यादा साइड पैनल.
- साइड पैनल खोलें.
- साइट के हिसाब से साइड पैनल.
टाइप
GetPanelOptions
प्रॉपर्टी
-
tabId
नंबर ज़रूरी नहीं
अगर बताया गया है, तो दिए गए टैब के लिए साइड पैनल के विकल्प दिखाए जाएंगे. अगर ऐसा नहीं है, तो डिफ़ॉल्ट तौर पर साइड पैनल के विकल्प दिखते हैं. इनका इस्तेमाल ऐसे टैब के लिए किया जाता है जिसमें कोई खास सेटिंग नहीं होती.
OpenOptions
प्रॉपर्टी
-
tabId
नंबर ज़रूरी नहीं
वह टैब जिसमें साइड पैनल को खोलना है. अगर अलग-अलग टैब में किसी खास टैब के लिए कोई साइड पैनल है, तो वह पैनल सिर्फ़ उसी टैब के लिए खुलेगा. अगर टैब के लिए कोई खास पैनल नहीं है, तो ग्लोबल पैनल, बताए गए टैब में और ऐसे दूसरे टैब में खुला होगा जिनके टैब के लिए खास पैनल फ़िलहाल खुला नहीं है. ऐसा करने पर, उससे जुड़े टैब के मौजूदा साइड पैनल (ग्लोबल या टैब के हिसाब से) में बदलाव हो जाएगा. इनमें से कम से कम एक या
windowId
देना ज़रूरी है. -
windowId
नंबर ज़रूरी नहीं
वह विंडो जिसमें साइड पैनल को खोलना है. यह सिर्फ़ तब लागू होता है, जब एक्सटेंशन में ग्लोबल (टैब के लिए नहीं) साइड पैनल हो या
tabId
के बारे में भी बताया गया हो. इससे, दी गई विंडो में उपयोगकर्ता के खोले गए मौजूदा ग्लोबल साइड पैनल को बदल दिया जाएगा. इनमें से कम से कम एक याtabId
देना ज़रूरी है.
PanelBehavior
प्रॉपर्टी
-
openPanelOnActionClick
बूलियन ज़रूरी नहीं
एक्सटेंशन के आइकॉन पर क्लिक करने से, साइड पैनल में एक्सटेंशन की एंट्री दिखने लगेगी या नहीं. डिफ़ॉल्ट तौर पर, यह 'गलत' पर सेट होता है.
PanelOptions
प्रॉपर्टी
-
चालू किया गया
बूलियन ज़रूरी नहीं
साइड पैनल चालू होना चाहिए या नहीं. हालांकि, ऐसा करना ज़रूरी नहीं है. डिफ़ॉल्ट वैल्यू 'सही' पर सेट होती है.
-
पाथ
स्ट्रिंग ज़रूरी नहीं
साइड पैनल की एचटीएमएल फ़ाइल का इस्तेमाल करने के लिए पाथ. यह एक्सटेंशन पैकेज में मौजूद एक लोकल संसाधन होना चाहिए.
-
tabId
नंबर ज़रूरी नहीं
अगर साइड पैनल के विकल्प बताए गए हैं, तो ये सिर्फ़ इस आईडी वाले टैब पर लागू होंगे. अगर इन्हें हटाया जाता है, तो ये विकल्प डिफ़ॉल्ट व्यवहार सेट करते हैं. इसका इस्तेमाल ऐसे किसी भी टैब के लिए किया जाता है जिसमें कोई खास सेटिंग न हो. ध्यान दें: अगर इस tabId और डिफ़ॉल्ट tabId के लिए एक ही पाथ सेट किया गया है, तो इस tabId का पैनल, डिफ़ॉल्ट tabId के पैनल से अलग होगा.
SidePanel
प्रॉपर्टी
-
default_path
स्ट्रिंग
साइड पैनल पर दिखने के लिए डेवलपर का तय किया गया पाथ.
तरीके
getOptions()
chrome.sidePanel.getOptions(
options: GetPanelOptions,
callback?: function,
)
यह फ़ंक्शन पैनल का ऐक्टिव कॉन्फ़िगरेशन दिखाता है.
पैरामीटर
-
विकल्प
इस नीति से, उस कॉन्टेक्स्ट के बारे में पता चलता है जिसके लिए कॉन्फ़िगरेशन दिखाना है.
-
कॉलबैक
फ़ंक्शन ज़रूरी नहीं
callback
पैरामीटर ऐसा दिखता है:(options: PanelOptions) => void
-
विकल्प
-
लौटाए गए प्रॉडक्ट
-
Promise<PanelOptions>
प्रॉमिस, मेनिफ़ेस्ट V3 और इसके बाद के वर्शन में काम करता है. हालांकि, पुराने सिस्टम के साथ काम करने के लिए कॉलबैक दिए जाते हैं. आप एक ही फ़ंक्शन कॉल पर दोनों का इस्तेमाल नहीं कर सकते. प्रॉमिस उसी टाइप के साथ रिज़ॉल्व हो जाती है जिसे कॉलबैक को पास किया जाता है.
getPanelBehavior()
chrome.sidePanel.getPanelBehavior(
callback?: function,
)
एक्सटेंशन के साइड पैनल का मौजूदा व्यवहार दिखाता है.
पैरामीटर
-
कॉलबैक
फ़ंक्शन ज़रूरी नहीं
callback
पैरामीटर ऐसा दिखता है:(behavior: PanelBehavior) => void
-
उपभोक्ता के व्यवहार
-
लौटाए गए प्रॉडक्ट
-
Promise<PanelBehavior>
प्रॉमिस, मेनिफ़ेस्ट V3 और इसके बाद के वर्शन में काम करता है. हालांकि, पुराने सिस्टम के साथ काम करने के लिए कॉलबैक दिए जाते हैं. आप एक ही फ़ंक्शन कॉल पर दोनों का इस्तेमाल नहीं कर सकते. प्रॉमिस उसी टाइप के साथ रिज़ॉल्व हो जाती है जिसे कॉलबैक को पास किया जाता है.
open()
chrome.sidePanel.open(
options: OpenOptions,
callback?: function,
)
यह एक्सटेंशन के लिए साइड पैनल खोलता है. इसे सिर्फ़ उपयोगकर्ता की कार्रवाई के जवाब में कहा जा सकता है.
पैरामीटर
-
विकल्प
इस नीति से उस कॉन्टेक्स्ट के बारे में पता चलता है जिसमें साइड पैनल खोलना है.
-
कॉलबैक
फ़ंक्शन ज़रूरी नहीं
callback
पैरामीटर ऐसा दिखता है:() => void
लौटाए गए प्रॉडक्ट
-
Promise<void>
प्रॉमिस, मेनिफ़ेस्ट V3 और इसके बाद के वर्शन में काम करता है. हालांकि, पुराने सिस्टम के साथ काम करने के लिए कॉलबैक दिए जाते हैं. आप एक ही फ़ंक्शन कॉल पर दोनों का इस्तेमाल नहीं कर सकते. प्रॉमिस उसी टाइप के साथ रिज़ॉल्व हो जाती है जिसे कॉलबैक को पास किया जाता है.
setOptions()
chrome.sidePanel.setOptions(
options: PanelOptions,
callback?: function,
)
यह साइड पैनल कॉन्फ़िगर करता है.
पैरामीटर
-
विकल्प
पैनल पर लागू किए जाने वाले कॉन्फ़िगरेशन विकल्प.
-
कॉलबैक
फ़ंक्शन ज़रूरी नहीं
callback
पैरामीटर ऐसा दिखता है:() => void
लौटाए गए प्रॉडक्ट
-
Promise<void>
प्रॉमिस, मेनिफ़ेस्ट V3 और इसके बाद के वर्शन में काम करता है. हालांकि, पुराने सिस्टम के साथ काम करने के लिए कॉलबैक दिए जाते हैं. आप एक ही फ़ंक्शन कॉल पर दोनों का इस्तेमाल नहीं कर सकते. प्रॉमिस उसी टाइप के साथ रिज़ॉल्व हो जाती है जिसे कॉलबैक को पास किया जाता है.
setPanelBehavior()
chrome.sidePanel.setPanelBehavior(
behavior: PanelBehavior,
callback?: function,
)
यह नीति, एक्सटेंशन के साइड पैनल के व्यवहार को कॉन्फ़िगर करती है. यह शुरुआती कार्रवाई है.
पैरामीटर
-
उपभोक्ता के व्यवहार
सेट की जाने वाली नई कार्रवाई.
-
कॉलबैक
फ़ंक्शन ज़रूरी नहीं
callback
पैरामीटर ऐसा दिखता है:() => void
लौटाए गए प्रॉडक्ट
-
Promise<void>
प्रॉमिस, मेनिफ़ेस्ट V3 और इसके बाद के वर्शन में काम करता है. हालांकि, पुराने सिस्टम के साथ काम करने के लिए कॉलबैक दिए जाते हैं. आप एक ही फ़ंक्शन कॉल पर दोनों का इस्तेमाल नहीं कर सकते. प्रॉमिस उसी टाइप के साथ रिज़ॉल्व हो जाती है जिसे कॉलबैक को पास किया जाता है.