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

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

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

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

कार्रवाइयां

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

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

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

ऐक्शन आइकॉन

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

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

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

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

बैज

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

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

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

कमांड

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

कॉन्टेक्स्ट मेन्यू

माउस के ऑल्टरनेट क्लिक (जिसे अक्सर राइट क्लिक कहा जाता है) के लिए, कॉन्टेक्स्ट मेन्यू दिखता है. कॉन्टेक्स्ट मेन्यू तय करने के लिए, Context Menus API का इस्तेमाल करें.

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

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

खोज बार

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

ब्राउज़र का ओम्निबॉक्स.
पांचवी इमेज: ब्राउज़र का खोज बार.

खोज बार को ओवरराइड करने का तरीका जानने के लिए, खोज बार से कार्रवाइयां ट्रिगर करना लेख पढ़ें या एपीआई रेफ़रंस का क्विक सैंपल देखें.

पेज ओवरराइड करना

कोई एक्सटेंशन, Chrome के इन बिल्ट-इन पेजों में से किसी एक को ओवरराइड कर सकता है:

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

Chrome के पेजों को ओवरराइड करने का तरीका जानने के लिए, Chrome के पेजों को ओवरराइड करना लेख पढ़ें या ओवरराइड का नमूना देखें.

पॉप-अप

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

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

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

साइड पैनल

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

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

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

टूलटिप

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

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

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

DevTools

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

सूचनाएं

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

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

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

थीम

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

ग्यारहवीं इमेज: थीम का एक उदाहरण.

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

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

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

सुलभता

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

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

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