एक साल पहले, मई 2022 में हमने Chrome में साइड पैनल जोड़ा. यह एक नया कंपैनियन प्लैटफ़ॉर्म है, जिसकी मदद से उपयोगकर्ता ब्राउज़ किए जा रहे कॉन्टेंट के साथ-साथ टूल भी इस्तेमाल कर सकते हैं. आज, हमें यह बताते हुए खुशी हो रही है कि आपका एक्सटेंशन, Chrome 114 और इसके बाद के वर्शन में साइड पैनल में कॉन्टेंट दिखाना शुरू कर सकता है.
उपयोगकर्ताओं के लिए बेहतर, डेवलपर के लिए आसान
हमने पहले ही कई डेवलपर को अपने एक्सटेंशन में साइडबार जैसे अनुभव लागू करते हुए देखा है. इसलिए, हम इसे प्लैटफ़ॉर्म का स्टैंडर्ड वर्शन बनाने को लेकर बहुत उत्साहित हैं. नए साइड पैनल एपीआई की मदद से, अब उपयोगकर्ताओं को एक स्थायी यूज़र इंटरफ़ेस (यूआई) दिया जा सकता है. यह यूज़र इंटरफ़ेस (यूआई) के साथ खुलने वाले पेज के साथ खुलता है. एक्सटेंशन के बीच एक जैसी पोज़िशनिंग और लेआउट का इस्तेमाल करने से उपयोगकर्ताओं को फ़ायदा मिलेगा. इसके अलावा, होस्ट की अनुमतियों के लिए अनुरोध किए बिना यूज़र इंटरफ़ेस (यूआई) दिखाने की सुविधा, उपयोगकर्ताओं की निजता के लिए एक अहम बात है. इससे, इंस्टॉल के समय आपके एक्सटेंशन के लिए दिखने वाली चेतावनियों की संख्या कम होती है.
साइड पैनल एपीआई, गैर-भरोसेमंद पेज में कॉन्टेंट इंजेक्ट करने से जुड़ी समस्याओं को ठीक करता है. इससे अलग-अलग साइटों के साथ काम करने की ज़रूरतों को भी काफ़ी कम किया जाता है. साथ ही, एक्सटेंशन की वजह से अनजाने में हुई रुकावटों की गड़बड़ी की रिपोर्ट को भी मिटाया जाता है.
पूरे वेब पर मौजूद उपयोगकर्ताओं का एक साथी
अपने एक्सटेंशन के तौर पर कोई नया साइड पैनल अनुभव तैयार करते समय, आपको एक बात का ध्यान रखना होगा: वेब पर काम पूरा करने में उपयोगकर्ताओं की मदद कैसे की जा रही है? यहां कुछ सवाल दिए गए हैं, जिन पर आपको ध्यान देना चाहिए:
- मेरा साइड पैनल, लोगों की मदद कैसे करता है?
- सिर्फ़ एक मकसद वाली नीति आपके साइड पैनल पर भी लागू होती है. पक्का करें कि आपके साइड पैनल में ऐसी सुविधाएं हों जो सीधे तौर पर आपके बाकी एक्सटेंशन से जुड़ी हों और जिन्हें उपयोगकर्ता हासिल करना चाहता हो.
- क्या मेरा साइड पैनल सिर्फ़ काम के होने पर ही दिखता है?
- साइड पैनल एपीआई की मदद से, यह चुना जा सकता है कि आपके उपयोगकर्ताओं को किन साइटों पर साइड पैनल दिखेगा. इस तरह, अगर यह उपयोगकर्ता के काम का न हो या उस कॉन्टेंट से जुड़ाव न हो, जो उपयोगकर्ता ब्राउज़ कर रहा है, तो विज्ञापन दिखाने से बचा जा सकता है.
- क्या डिज़ाइन मेरे शेष एक्सटेंशन के साथ संगत है?
- आपके साइड पैनल का डिज़ाइन ऐसा होना चाहिए जो दिखने में आकर्षक हो. यह डिज़ाइन, एक्सटेंशन और स्टोर पेज के लोगो, रंग, आइकॉन, और फ़ॉन्ट से मिलता-जुलता होना चाहिए. इससे उपयोगकर्ता जहां भी आपके एक्सटेंशन का इस्तेमाल कर रहे होते हैं उन्हें एक जैसा और आसानी से पहचाना जा सकने वाला अनुभव मिलता है.
- लोग मेरा साइड पैनल कैसे खोज सकते हैं?
- नए उपयोगकर्ताओं को साइड पैनल इस्तेमाल करने का तरीका बताएं. इसके लिए, एक्सटेंशन में ज़रूरी दस्तावेज़ या ट्रेनिंग उपलब्ध कराएं. इससे आपको अपने उपयोगकर्ताओं को बनाए रखने और अपने स्टोर पेज पर खराब समीक्षाओं से बचने में मदद मिलेगी. याद रखें, आपके स्टोर पेज में एक्सटेंशन के काम करने के तरीके को दिखाने वाला एक 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 });
}
});
ज़्यादा जानें
हमने साइड पैनल एपीआई से जुड़ा दस्तावेज़ पब्लिश किया है. इसे आज ही पढ़ा जा सकता है. हमने chrome-extensions-samples डेटा स्टोर करने की जगह में सैंपल भी जोड़े हैं. यह एपीआई को प्रैक्टिस में इस्तेमाल करने के तरीके को देखने का एक अच्छा प्लैटफ़ॉर्म है.
जैसा कि बताया गया है, नीति के पेजों और सबसे सही तरीकों में भी बदलाव किए गए हैं. इनमें, साइड पैनल बनाने के बारे में जानकारी दी गई है. इस पैनल का इस्तेमाल करके, लोगों को बेहतरीन अनुभव दिया जा सकता है.
हमारे नया क्या है पेज पर जाकर, Chrome एक्सटेंशन से जुड़ी खबरें देखी जा सकती हैं. अगर साइड पैनल एपीआई के बारे में आपका कोई सवाल है या आपको कोई मदद चाहिए, तो Chromium एक्सटेंशन वाले Google Group में जाएं.
Unsplash पर वर्दन पपिक्यान की फ़ोटो