यूज़र इंटरफ़ेस के कॉम्पोनेंट

यह एक्सटेंशन में उपलब्ध यूज़र इंटरफ़ेस एलिमेंट का कैटलॉग है. हर एंट्री में ये चीज़ें शामिल होती हैं:

  • एलिमेंट की इमेज (अगर लागू हो).
  • यह बताया गया है कि यह किस काम के लिए है.
  • मिलते-जुलते इंटरफ़ेस एलिमेंट (अगर लागू हों).
  • लागू करने के निर्देशों और कोड सैंपल के लिंक.

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

कार्रवाइयाँ

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

पिन किया गया एक्सटेंशन और अनपिन किया गया एक्सटेंशन, दोनों.
पहली इमेज: पिन किए गए (बाएं) और अनपिन (दाएं) एक्सटेंशन.

कोई कार्रवाई बनाने का तरीका जानने के लिए, कोई कार्रवाई लागू करना लेख पढ़ें या कार्रवाई के सैंपल की जांच करें.

ऐक्शन आइकॉन

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

Google शब्दकोश एक्सटेंशन का आइकॉन.
दूसरी इमेज: Google डिक्शनरी के एक्सटेंशन का आइकॉन (लाल रंग में).

एक्सटेंशन स्थिति या उपयोगकर्ता की कार्रवाइयों की ज़रूरत के बारे में बताने के लिए, आइकॉन में 'बैज' नाम के एक लेबल को भी जोड़ा जा सकता है.

कोई कार्रवाई बनाने का तरीका जानने के लिए, कोई कार्रवाई लागू करना लेख पढ़ें या कार्रवाई के सैंपल की जांच करें.

बैज

बैज, फ़ॉर्मैट किए गए टेक्स्ट के हिस्से होते हैं. इन्हें ऐक्शन आइकॉन के ऊपर रखा जाता है. इससे एक्सटेंशन की स्थिति या उपयोगकर्ता की कार्रवाइयों की ज़रूरत के बारे में पता चलता है. chrome.action.setBadgeText() को कॉल करके बैज का टेक्स्ट सेट किया जा सकता है और chrome.action.setBadgeBackgroundColor() को कॉल करके बैनर के रंग को सेट किया जा सकता है.

बैज और बैज वाला एक्सटेंशन आइकॉन.
तीसरी इमेज: बिना बैज वाला एक्सटेंशन आइकॉन (बाएं) और बैज (दाएं) वाला.

कोई कार्रवाई बनाने का तरीका जानने के लिए, कोई कार्रवाई लागू करें या पानी पीने का नमूना देखें.

निर्देश

निर्देश ऐसे मुख्य कॉम्बिनेशन होते हैं जो किसी एक्सटेंशन सुविधा को शुरू करते हैं. Manifest.json फ़ाइल में कुंजी के कॉम्बिनेशन तय करें और Commands API का इस्तेमाल करके उनका जवाब दें. किसी निर्देश को लागू करने का तरीका जानने के लिए, एपीआई का रेफ़रंस या chrome.commands सैंपल देखें.

संदर्भ मेन्यू

माउस के वैकल्पिक क्लिक (अक्सर इसे राइट क्लिक कहा जाता है) के लिए एक संदर्भ मेन्यू दिखता है. कॉन्टेक्स्ट मेन्यू एपीआई का इस्तेमाल करके, संदर्भ मेन्यू तय करें.

नेस्ट किया गया संदर्भ मेन्यू.
चौथी इमेज: संदर्भ मेन्यू और नेस्ट किया गया सब मेन्यू.

संदर्भ मेन्यू को लागू करने का तरीका जानने के लिए, कॉन्टेक्स्ट मेन्यू सैंपल देखें.

खोज बार में डाली गई क्वेरी

Chrome की खोज वाली पट्टी का इस्तेमाल करके आप उपयोगकर्ताओं के साथ इंटरैक्ट कर सकते हैं. जब कोई उपयोगकर्ता खोज वाली पट्टी में एक्सटेंशन-तय कीवर्ड डालता है, तो आपका एक्सटेंशन यह तय करता है कि उपयोगकर्ता को खोज वाली पट्टी में क्या दिखेगा. manifest.json में कीवर्ड तय करें और खोज क्वेरी डालने वाले एपीआई का इस्तेमाल करके उन पर जवाब दें.

ब्राउज़र की खोज वाली पट्टी.
पांचवी इमेज: ब्राउज़र की खोज वाली पट्टी.

खोज बार (खोज क्वेरी डालने वाला बार) को बदलने का तरीका जानने के लिए, खोज वाली पट्टी से ट्रिगर ऐक्शन या झटपट एपीआई का रेफ़रंस सैंपल देखें.

पेजों को बदलें

कोई एक्सटेंशन, इन पहले से मौजूद Chrome पेजों में से किसी एक को बदल सकता है:

  • इतिहास
  • नया टैब
  • Bookmarks
पसंद के मुताबिक इतिहास वाले पेज का उदाहरण.
छठी इमेज: पसंद के मुताबिक बनाए गए इतिहास के पेज का उदाहरण.

Chrome पेजों को बदलने का तरीका जानने के लिए, Chrome पेजों को बदलें या ओवरराइड करें सैंपल देखें.

पॉप-अप

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

पॉप-अप का उदाहरण.
सातवीं इमेज: पॉप-अप का उदाहरण.

पॉप-अप बनाने का तरीका जानने के लिए, पॉप-अप जोड़ें सेक्शन देखें. आप चाहें, तो ऐक्शन सैंपल में से किसी एक को डाउनलोड करने का तरीका भी बताया जा सकता है.

साइड पैनल

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

शब्द की जानकारी देने वाला डिक्शनरी एक्सटेंशन
आठवीं इमेज: "एक्सटेंशन" शब्द के बारे में बताने वाला डिक्शनरी एक्सटेंशन.

साइड पैनल बनाने के बारे में जानने के लिए, साइड पैनल के इस्तेमाल के उदाहरण देखें या साइड पैनल के सैंपल की जांच करें.

टूलटिप

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

ऐक्शन आइकॉन के लिए टूलटिप का उदाहरण.
नौवीं इमेज: ऐक्शन आइकॉन के लिए टूलटिप का उदाहरण.

टूलटिप जोड़ने का तरीका जानने के लिए, मेनिफ़ेस्ट फ़ाइलों के "default_title" सदस्य "action" बटन का इस्तेमाल करें.

DevTools

DevTools Panels API का इस्तेमाल करके, DevTools में कस्टम पैनल जोड़े जा सकते हैं. DevTools में किन टैब को कहा जाता है. अन्य DevTools एपीआई की मदद से, विंडो और नेटवर्क ट्रैफ़िक को मॉनिटर किया जा सकता है. DevTools रिकॉर्डर पैनल को अपनी पसंद के मुताबिक भी बनाया जा सकता है. Chrome DevTools के अपने लाइटहाउस पैनल की शुरुआत, DevTools एक्सटेंशन के तौर पर की गई थी.

सूचनाएं

एक्सटेंशन Notifications API या वेब प्लैटफ़ॉर्म Notifications API का इस्तेमाल करके, उपयोगकर्ता के सिस्टम ट्रे में मैसेज पोस्ट करें.

Mac पर एक्सटेंशन की सूचना.
इमेज 10: mac पर एक्सटेंशन की सूचना.

सूचनाओं का इस्तेमाल करने के बारे में जानने के लिए, उपयोगकर्ताओं को सूचना देना लेख पढ़ें.

थीम

थीम एक खास तरह का एक्सटेंशन है, जो ब्राउज़र के लुक को बदल देता है. थीम को सामान्य एक्सटेंशन की तरह ही पैक किया जाता है. हालांकि, इनमें JavaScript या एचटीएमएल कोड नहीं होता.

थीम का उदाहरण.
11वीं इमेज: थीम का उदाहरण.

कोई थीम बनाने के बारे में जानने के लिए, थीम क्या होती हैं? देखें.

उपयोगकर्ताओं के साथ इंटरैक्ट करने के दूसरे तरीके

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

सुलभता

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

इंटरनैशनलाइजेशन

लोगों से उनकी भाषा में बात करें. इंटरफ़ेस को अंतरराष्ट्रीय स्तर पर उपलब्ध कराने का तरीका जानें.