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

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

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

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

कार्रवाइयां

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

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

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

ऐक्शन आइकॉन

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

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

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

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

बैज

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

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

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

निर्देश

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

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

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

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

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

ऑम्निबॉक्स

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

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

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

पेज बदलें

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

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

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

पॉप-अप

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

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

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

साइड पैनल

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

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

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

टूलटिप

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

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

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

DevTools

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

सूचनाएं

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

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

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

थीम

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

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

थीम बनाना सीखने के लिए, थीम क्या हैं? देखें.

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

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

सुलभता

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

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

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