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

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

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

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

कार्रवाइयां

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

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

ऐक्शन आइकॉन

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

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

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

बैज

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

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

निर्देश

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

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

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

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

खोज बार

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

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

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

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

• इतिहास
• नया टैब
• बुकमार्क

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

पॉप-अप

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

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

साइड पैनल

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

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

टूलटिप

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

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

DevTools

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

सूचनाएं

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

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

थीम

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

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

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

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

सुलभता सुविधा के लिए बटन

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

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

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