ब्यौरा
ब्राउज़र के साइड पैनल में कॉन्टेंट को होस्ट करने के लिए, chrome.sidePanel एपीआई का इस्तेमाल करें. यह कॉन्टेंट, वेबपेज के मुख्य कॉन्टेंट के साथ भी दिखाया जा सकता है.
अनुमतियां
sidePanelसाइड पैनल एपीआई का इस्तेमाल करने के लिए, एक्सटेंशन मेनिफ़ेस्ट फ़ाइल में "sidePanel" की अनुमति जोड़ें:
manifest.json:
{
"name": "My side panel extension",
...
"permissions": [
"sidePanel"
]
}
उपलब्धता
सिद्धांत और उनका इस्तेमाल
साइड पैनल एपीआई की मदद से एक्सटेंशन, साइड पैनल में अपना यूज़र इंटरफ़ेस (यूआई) दिखा सकते हैं. इससे, उपयोगकर्ता को लगातार एक जैसा अनुभव मिलता है, जो उपयोगकर्ता के ब्राउज़िंग अनुभव को बेहतर बनाता है.
कुछ सुविधाओं में ये शामिल हैं:
- एक से दूसरे टैब पर जाने के दौरान, साइड पैनल खुला रहता है. हालांकि, ऐसा तब ही होगा, जब लिंक पर क्लिक करने के लिए सेट किया गया हो.
- यह सुविधा सिर्फ़ कुछ वेबसाइटों पर उपलब्ध की जा सकती है.
- एक्सटेंशन पेज के तौर पर, साइड पैनल के पास सभी 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
प्रॉपर्टी
-
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
रिटर्न
-
प्रॉमिस<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 और उसके बाद के वर्शन में प्रॉमिस काम करते हैं. हालांकि, कॉलबैक की सुविधा इन मामलों में दी जाती है पुराने सिस्टम के साथ काम करने की सुविधा. एक ही फ़ंक्शन कॉल में दोनों का इस्तेमाल नहीं किया जा सकता. कॉन्टेंट बनाने प्रॉमिस उसी टाइप के साथ ठीक होता है जिसे कॉलबैक में पास किया जाता है.