हमने एक साल पहले, मई 2022 में Chrome में साइड पैनल जोड़ा था. यह एक नया कंपैनियन प्लैटफ़ॉर्म है. इससे उपयोगकर्ता, ब्राउज़ किए जा रहे कॉन्टेंट के साथ-साथ टूल का इस्तेमाल कर सकते हैं. हमें यह बताते हुए खुशी हो रही है कि Chrome 114 से, आपका एक्सटेंशन साइड पैनल में कॉन्टेंट दिखाना शुरू कर सकता है.
उपयोगकर्ताओं के लिए बेहतर, डेवलपर के लिए आसान
हमने पहले ही कई डेवलपर को अपने एक्सटेंशन में साइडबार जैसी सुविधाएं लागू करते हुए देखा है. इसलिए, हम इसे प्लैटफ़ॉर्म का स्टैंडर्ड बनाने के लिए उत्साहित हैं. नए साइड पैनल एपीआई की मदद से, अब लगातार दिखने वाला यूज़र इंटरफ़ेस (यूआई) उपलब्ध कराया जा सकता है. यह यूआई, उपयोगकर्ता के देखे जा रहे पेज के साथ खुलता है. एक्सटेंशन के बीच एक जैसा लेआउट और पोज़िशन होने से, उपयोगकर्ताओं को फ़ायदा मिलेगा. इसके अलावा, होस्ट की अनुमतियों का अनुरोध किए बिना यूज़र इंटरफ़ेस (यूआई) दिखाने की सुविधा, उपयोगकर्ताओं के लिए निजता के लिहाज़ से एक बड़ी जीत है. साथ ही, इससे इंस्टॉल करने के दौरान आपके एक्सटेंशन के लिए दिखने वाली चेतावनियों की संख्या कम हो जाती है.
साइड पैनल एपीआई की मदद से, किसी ऐसे पेज में कॉन्टेंट इंजेक्ट करने से जुड़ी समस्याओं को हल किया जा सकता है जिस पर भरोसा नहीं किया जा सकता. इससे अलग-अलग साइटों पर एक्सटेंशन के साथ काम करने की ज़रूरत भी कम हो जाती है. साथ ही, एक्सटेंशन की वजह से होने वाली रुकावटों के बारे में बग रिपोर्ट को देखने की ज़रूरत भी कम हो जाती है.
वेब पर मौजूद उपयोगकर्ताओं के लिए एक साथी
अपने एक्सटेंशन के हिस्से के तौर पर, नया साइड पैनल अनुभव बनाते समय आपको एक बात ध्यान में रखनी होगी: वेब पर टास्क पूरा करने में उपयोगकर्ताओं की मदद कैसे की जा रही है? इन सवालों पर ध्यान दें:
- मेरा साइड पैनल, उपयोगकर्ता की मदद कैसे करता है?
- एक ही मकसद को पूरा करने वाले एक्सटेंशन से जुड़ी नीति, आपके साइड पैनल पर भी लागू होती है. पक्का करें कि आपके साइड पैनल में ऐसे फ़ंक्शन मौजूद हों जो आपके एक्सटेंशन के बाकी हिस्सों और उपयोगकर्ता के मकसद से सीधे तौर पर जुड़े हों.
- क्या मेरा साइड पैनल सिर्फ़ तब दिखता है, जब वह काम का हो?
- Side Panel API की मदद से, यह चुना जा सकता है कि आपके उपयोगकर्ताओं को साइड पैनल किन साइटों पर दिखेगा. इस तरह, जब विज्ञापन उपयोगकर्ता के लिए काम का न हो या वह उपयोगकर्ता के ब्राउज़ किए जा रहे कॉन्टेंट से जुड़ा न हो, तो उसे न दिखाने से बचा जा सकता है.
- क्या डिज़ाइन, मेरे एक्सटेंशन के बाकी हिस्सों के हिसाब से है?
- आपके साइड पैनल का डिज़ाइन ऐसा होना चाहिए जो देखने में अच्छा लगे. साथ ही, यह आपके एक्सटेंशन और स्टोर लिस्टिंग के लोगो, रंगों, आइकॉन, और फ़ॉन्ट से मेल खाना चाहिए. इससे उपयोगकर्ताओं को एक जैसा और जाना-पहचाना अनुभव मिलता है, चाहे वे आपके एक्सटेंशन का इस्तेमाल कहीं भी कर रहे हों.
- उपयोगकर्ताओं को मेरा साइड पैनल कैसे मिलता है?
- नए उपयोगकर्ताओं को बताएं कि साइड पैनल का इस्तेमाल कैसे किया जाता है. इसके लिए, एक्सटेंशन में ज़रूरी दस्तावेज़ या ट्रेनिंग उपलब्ध कराएं. इससे आपको उपयोगकर्ताओं को बनाए रखने और अपने स्टोर पेज पर खराब समीक्षाएं पाने से बचने में मदद मिलेगी. ध्यान रखें कि एक्सटेंशन इंस्टॉल करने से पहले ही, उपयोगकर्ताओं को इसके बारे में बताया जा सकता है. इसके लिए, अपनी स्टोर लिस्टिंग में एक YouTube वीडियो शामिल करें. इससे उपयोगकर्ताओं को पता चलेगा कि आपका एक्सटेंशन कैसे काम करता है!
हमने प्रोग्राम की नीतियों को भी अपडेट किया है. साथ ही, सबसे सही तरीकों और क्वालिटी के लिए दिशा-निर्देशों वाले सेक्शन में भी अपडेट किए हैं, ताकि इनमें इन बातों को शामिल किया जा सके. इन बदलावों से पता चलता है कि आपके साइड पैनल को उपयोगकर्ताओं के ब्राउज़िंग अनुभव को बेहतर बनाने में मदद करनी चाहिए. इसके लिए, उसे अतिरिक्त सुविधाएं उपलब्ध करानी चाहिए. इन दिशा-निर्देशों में यह भी बताया गया है कि आपके साइड पैनल में ऐसी चीज़ें नहीं होनी चाहिए जिनसे लोगों का ध्यान भटके.
एपीआई के बारे में खास जानकारी
अपने एक्सटेंशन को साइड पैनल में दिखाने के लिए, अपने मेनिफ़ेस्ट में "sidePanel" अनुमति का अनुरोध करें. साथ ही, "side_panel" कुंजी जोड़ें. इसमें "default_path" आपके एक्सटेंशन के किसी पेज की ओर इशारा करता है:
manifest.json:
{
...
"side_panel": {
"default_path": "sidepanel.html"
},
"permissions": [
"sidePanel"
]
...
}
साइड पैनल पेज पर, स्क्रिप्ट लोड की जा सकती हैं और एक्सटेंशन एपीआई को कॉल किया जा सकता है. ऐसा किसी अन्य एक्सटेंशन पेज पर भी किया जा सकता है. आपके साइड पैनल का आइकॉन, एक्सटेंशन के आइकॉन से लिया जाएगा. इसलिए, इसे सेट करना न भूलें.
अतिरिक्त सुविधाएं
साइड पैनल को कार्रवाई वाले आइकॉन से लिंक किया जा सकता है, ताकि इसे कभी भी आसानी से खोला जा सके:
service-worker.js:
await chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
अगर आपको साइड पैनल को सिर्फ़ कुछ पेजों पर दिखाना है, तो इसे कंट्रोल किया जा सकता है. साथ ही, इसे उन पेजों पर दिखने से रोका जा सकता है जहां यह लोगों के लिए काम का नहीं है:
service-worker.js:
chrome.tabs.onUpdated.addListener((tabId, info, tab) => {
if (!tab.url) return;
const url = new URL(tab.url);
if (url.origin === 'https://example.com') {
chrome.sidePanel.setOptions({ tabId, path: 'sidepanel.html', enabled: true });
} else {
chrome.sidePanel.setOptions({ tabId, enabled: false });
}
});
ज़्यादा जानें
हमने Side Panel API से जुड़ा दस्तावेज़ पब्लिश किया है. इसे आज से पढ़ा जा सकता है. हमने chrome-extensions-samples रिपॉज़िटरी में सैंपल भी जोड़े हैं. यह रिपॉज़िटरी, यह देखने के लिए सबसे अच्छी जगह है कि एपीआई का इस्तेमाल कैसे किया जा सकता है.
जैसा कि बताया गया है, हमने नीति वाले पेजों और सबसे सही तरीकों को भी अपडेट किया है. इससे आपको यह जानने में मदद मिलेगी कि ऐसा साइड पैनल कैसे बनाया जाए जो आपके उपयोगकर्ताओं को सबसे अच्छा अनुभव दे.
Chrome एक्सटेंशन से जुड़ी नई जानकारी पाने के लिए, हमारे नया क्या है पेज पर जाएं. अगर आपको साइड पैनल एपीआई के बारे में कोई सवाल पूछना है या मदद चाहिए, तो Chromium एक्सटेंशन Google ग्रुप पर जाएं.