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

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

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

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

कार्रवाइयां

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

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

ऐक्शन आइकॉन

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

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

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

बैज

बैज, फ़ॉर्मैट किए गए टेक्स्ट के छोटे-छोटे हिस्से होते हैं. इन्हें कार्रवाई वाले आइकॉन के ऊपर रखा जाता है. इससे एक्सटेंशन की स्थिति या उपयोगकर्ता के लिए ज़रूरी कार्रवाइयों के बारे में पता चलता है. 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 का इस्तेमाल करके, किसी उपयोगकर्ता की सिस्टम ट्रे में मैसेज पोस्ट करें.

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

थीम

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

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

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

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

सुलभता

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

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

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