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

Oliver Dunk

Amy Steam

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

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

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

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

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

वेब पर मौजूद उपयोगकर्ताओं का साथी

अपने एक्सटेंशन के हिस्से के तौर पर नया साइड पैनल बनाते समय, आपको एक बात का ध्यान रखना होगा: वेब पर टास्क पूरे करने में, उपयोगकर्ताओं की मदद कैसे की जा रही है? यहां कुछ सवाल दिए गए हैं, जिनके बारे में आपको सोचना चाहिए:

मेरा साइड पैनल, उस व्यक्ति की मदद कैसे करता है?

खास मकसद से जुड़ी नीति आपके साइड पैनल पर भी लागू होती है. पक्का करें कि आपका साइड पैनल, ऐसे फ़ंक्शन उपलब्ध कराता हो जो आपके एक्सटेंशन के बाकी हिस्सों और उपयोगकर्ता की ज़रूरतों से सीधे तौर पर जुड़े हों.

क्या मेरा साइड पैनल सिर्फ़ तब दिखता है, जब वह काम का हो?

साइड पैनल एपीआई की मदद से, आपको यह चुनने की सुविधा मिलती है कि आपके उपयोगकर्ताओं को किन साइटों पर साइड पैनल दिखे. ऐसा करने से, उस समय लोगों को यह कॉन्टेंट नहीं दिखेगा जो उनके काम का नहीं है या उनके ब्राउज़ किए गए कॉन्टेंट से जुड़ा हुआ नहीं है.

क्या डिज़ाइन मेरे बाकी एक्सटेंशन से मेल खाता है?

आपके साइड पैनल का डिज़ाइन ऐसा होना चाहिए जो दिखने में आकर्षक हो और आपके एक्सटेंशन और स्टोर पेज के लोगो, रंग, आइकॉन, और फ़ॉन्ट से मेल खाता हो. इससे, उपयोगकर्ताओं को आपके एक्सटेंशन का इस्तेमाल करते समय एक जैसा और पहचाना जा सकने वाला अनुभव मिलता है.

उपयोगकर्ताओं को मेरा साइड पैनल कैसे दिखता है?

एक्सटेंशन में ज़रूरी दस्तावेज़ या ट्रेनिंग उपलब्ध कराकर, नए उपयोगकर्ताओं को अपने साइड पैनल का इस्तेमाल करने का तरीका बताएं. इससे आपको उपयोगकर्ताओं को बनाए रखने और अपने स्टोर पेज पर खराब समीक्षाओं से बचने में मदद मिलेगी. याद रखें कि उपयोगकर्ताओं के एक्सटेंशन इंस्टॉल करने से पहले ही, उपयोगकर्ताओं को इस बारे में जानकारी देना शुरू किया जा सकता है. इसके लिए, उस YouTube वीडियो को शामिल करें जिसमें दिखाया गया हो कि आपका एक्सटेंशन आपके स्टोर पेज में कैसे काम करता है!

हमने प्रोग्राम की नीतियों को भी अपडेट किया है. इसमें, सबसे सही तरीकों और क्वालिटी के लिए दिशा-निर्देशों वाले सेक्शन को अपडेट किया गया है. इनसे, इन बातों को बेहतर तरीके से समझा जा सकता है. इन बदलावों से यह पता चलता है कि आपका साइड पैनल, उपयोगकर्ताओं को ब्राउज़िंग के बेहतर अनुभव देने के लिए, काम की सुविधाएं उपलब्ध कराता है. इससे यह भी पता चलता है कि आपके साइड पैनल में, ध्यान भटकाने वाली चीज़ें नहीं होनी चाहिए.

एपीआई के बारे में खास जानकारी

अपने एक्सटेंशन को साइड पैनल में दिखाने के लिए, अपने मेनिफ़ेस्ट में "sidePanel" अनुमति का अनुरोध करें. साथ ही, अपने एक्सटेंशन में किसी पेज पर ले जाने वाले "default_path" के साथ "side_panel" बटन जोड़ें:

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 पर वर्दान पापिक्यान की फ़ोटो