नए Side Panel API की मदद से, उपयोगकर्ताओं को बेहतरीन अनुभव दें

Oliver Dunk

Amy Steam

एक साल पहले, मई 2022 में, हमने Chrome के साइड पैनल को जोड़ा था. यह एक नया साथी प्लैटफ़ॉर्म है, जिससे उपयोगकर्ता ब्राउज़ किए जा रहे कॉन्टेंट के साथ-साथ टूल इस्तेमाल कर सकते हैं. आज हमें यह बताते हुए खुशी हो रही है कि आपका एक्सटेंशन, Chrome 114 और इसके बाद के वर्शन में साइड पैनल में कॉन्टेंट दिखाना शुरू कर सकता है.

शब्दकोश का ऐसा एक्सटेंशन जो चुने गए शब्द की परिभाषा दिखाता है. Chrome-एक्सटेंशन-सैंपल रिपॉज़िटरी में कोड देखें.

उपयोगकर्ताओं के लिए बेहतर, डेवलपर के लिए आसान

हमने पहले ही देखा है कि कई डेवलपर अपने एक्सटेंशन में साइडबार जैसे अनुभव लागू करते हैं. क्यों हम इसे एक प्लेटफ़ॉर्म मानक बनाकर बहुत उत्साहित हैं. नए Side Panel API से, आप अब एक स्थायी यूज़र इंटरफ़ेस (यूआई) दे सकता है, जो उपयोगकर्ता के देखे जा रहे पेज के साथ खुलता है. उपयोगकर्ता यह कर पाएंगे एक्सटेंशन के बीच एक जैसी स्थिति और लेआउट का फ़ायदा मिलता है. इसके अलावा, विज्ञापन दिखाने की क्षमता होस्ट की अनुमतियों का अनुरोध किए बिना यूज़र इंटरफ़ेस (यूआई) से, उपयोगकर्ताओं की निजता को काफ़ी सुरक्षित रखा जाता है. इससे, इंस्टॉल के समय आपके एक्सटेंशन के लिए दिखने वाली चेतावनियों की संख्या को कम किया जा सकता है.

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 एक्सटेंशन के सैंपल डेटा स्टोर करने की जगह में नमूने भी जोड़े हैं. यहां यह देखा जा सकता है कि एपीआई का इस्तेमाल कैसे किया जा सकता है.

जैसा कि बताया गया है, हमारे नीति पेजों और सबसे सही तरीकों में भी बदलाव किए गए हैं. ऐसा इसलिए किया गया है, ताकि लोगों को बेहतरीन अनुभव देने वाला साइड पैनल बनाने के बारे में आपको ज़्यादा जानकारी दी जा सके.

हमारे नया क्या है पेज पर जाकर, Chrome एक्सटेंशन की खबरों के बारे में जानकारी रखी जा सकती है. साथ ही, साइड पैनल एपीआई से जुड़ा कोई सवाल पूछने या मदद पाने के लिए, Chromium एक्सटेंशन Google Group पर जाएं.

---

Unस्प्लैश पर वर्डन पापिक्यान की फ़ोटो