chrome.browserAction

ब्यौरा

उपलब्धता

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

अगर आपको ऐसा आइकॉन बनाना है जो हमेशा चालू न रहे, तो ब्राउज़र ऐक्शन के बजाय पेज ऐक्शन का इस्तेमाल करें.

मेनिफ़ेस्ट

अपनी ब्राउज़र ऐक्शन को एक्सटेंशन मेनिफ़ेस्ट में इस तरह रजिस्टर करें:

{
  "name": "My extension",
  ...
  "browser_action": {
    "default_icon": {                // optional
      "16": "images/icon16.png",     // optional
      "24": "images/icon24.png",     // optional
      "32": "images/icon32.png"      // optional
    },
    "default_title": "Google Mail",  // optional, shown in tooltip
    "default_popup": "popup.html"    // optional
  },
  ...
}

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

1.5x या 1.2x जैसे कम सामान्य स्केल फ़ैक्टर वाले डिवाइसों का इस्तेमाल ज़्यादा हो रहा है. इसलिए, आपको अपने आइकॉन के लिए कई साइज़ उपलब्ध कराने का सुझाव दिया जाता है. इससे यह भी पक्का होता है कि अगर आइकॉन के डिसप्ले साइज़ में कभी बदलाव होता है, तो आपको अलग-अलग आइकॉन उपलब्ध कराने के लिए कुछ और करने की ज़रूरत नहीं पड़ेगी!

डिफ़ॉल्ट आइकॉन को रजिस्टर करने के लिए, पुराना सिंटैक्स अब भी काम करता है:

{
  "name": "My extension",
  ...
  "browser_action": {
    ...
    "default_icon": "images/icon32.png"  // optional
    // equivalent to "default_icon": { "32": "images/icon32.png" }
  },
  ...
}

यूज़र इंटरफ़ेस (यूआई) के हिस्से

ब्राउज़र ऐक्शन में आइकॉन, टूलटिप, बैज, और पॉप-अप हो सकता है.

आइकॉन

Chrome में ब्राउज़र ऐक्शन आइकॉन की चौड़ाई और ऊंचाई 16 डीआईपी (डिवाइस-इंडिपेंडेंट पिक्सल) होती है. बड़े आइकॉन को फ़िट करने के लिए उनका साइज़ बदल दिया जाता है. हालांकि, बेहतर नतीजों के लिए, 16-डाइप स्क्वेयर आइकॉन का इस्तेमाल करें.

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

स्टैटिक इमेज, WebKit के किसी भी फ़ॉर्मैट में हो सकती हैं. जैसे, BMP, GIF, ICO, JPEG या PNG. अनपैक किए गए एक्सटेंशन के लिए, इमेज PNG फ़ॉर्मैट में होनी चाहिए.

आइकॉन सेट करने के लिए, मेनिफ़ेस्ट में default_icon के default_icon फ़ील्ड का इस्तेमाल करें या browserAction.setIcon तरीके को कॉल करें.

जब स्क्रीन पिक्सल डेंसिटी (रेशियो size_in_pixel / size_in_dip) एक से अलग हो, तो आइकॉन को सही तरीके से दिखाने के लिए, आइकॉन को अलग-अलग साइज़ वाली इमेज के सेट के तौर पर दिखाया जा सकता है. दिखाने के लिए, सेट में से वह इमेज चुनी जाएगी जो 16 डीआईपी के पिक्सल साइज़ में सबसे अच्छी तरह से फ़िट हो. आइकॉन सेट में, किसी भी साइज़ का आइकॉन शामिल हो सकता है. Chrome, सबसे सही आइकॉन चुन लेगा.

टूलटिप

टूलटिप सेट करने के लिए, मेनिफ़ेस्ट में default_title के default_title फ़ील्ड का इस्तेमाल करें या browserAction.setTitle तरीका आज़माएं. default_title फ़ील्ड के लिए, स्थानीय भाषा के हिसाब से स्ट्रिंग दी जा सकती हैं. ज़्यादा जानकारी के लिए, अंतरराष्ट्रीय स्तर का पेज बनाने का तरीका देखें.

बैज

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

बैज में सीमित जगह होती है, इसलिए इसमें चार या उससे कम वर्ण होने चाहिए.

browserAction.setBadgeText और browserAction.setBadgeBackgroundColor का इस्तेमाल करके, बैज का टेक्स्ट और रंग सेट करें.

पॉप-अप

अगर किसी ब्राउज़र ऐक्शन में पॉप-अप है, तो उपयोगकर्ता जब एक्सटेंशन के आइकॉन पर क्लिक करता है, तब पॉप-अप दिखता है. पॉप-अप में आपका पसंदीदा एचटीएमएल कॉन्टेंट शामिल किया जा सकता है. साथ ही, कॉन्टेंट के हिसाब से इसका साइज़ अपने-आप तय हो जाता है. पॉप-अप का साइज़ 25x25 से छोटा और 800x600 से बड़ा नहीं होना चाहिए.

अपनी ब्राउज़र ऐक्शन में पॉप-अप जोड़ने के लिए, पॉप-अप के कॉन्टेंट के साथ एक एचटीएमएल फ़ाइल बनाएं. मेनिफ़ेस्ट में, default_popup के default_popup फ़ील्ड में HTML फ़ाइल की जानकारी दें या browserAction.setPopup तरीके को कॉल करें.

सलाह

विज़ुअल का सबसे अच्छा असर पाने के लिए, इन दिशा-निर्देशों का पालन करें:

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

उदाहरण

ब्राउज़र ऐक्शन का इस्तेमाल करने के आसान उदाहरण, examples/api/browserAction डायरेक्ट्री में देखे जा सकते हैं. अन्य उदाहरणों और सोर्स कोड देखने में मदद पाने के लिए, सैंपल देखें.

chrome.browserAction.disable(
  tabId?: number,
  callback?: function,
)

chrome.browserAction.enable(
  tabId?: number,
  callback?: function,
)

chrome.browserAction.getBadgeBackgroundColor(
  details: TabDetails,
  callback?: function,
)

chrome.browserAction.getBadgeText(
  details: TabDetails,
  callback?: function,
)

chrome.browserAction.getPopup(
  details: TabDetails,
  callback?: function,
)

chrome.browserAction.getTitle(
  details: TabDetails,
  callback?: function,
)

chrome.browserAction.setBadgeBackgroundColor(
  details: object,
  callback?: function,
)

chrome.browserAction.setBadgeText(
  details: object,
  callback?: function,
)

chrome.browserAction.setIcon(
  details: object,
  callback?: function,
)

chrome.browserAction.setPopup(
  details: object,
  callback?: function,
)

chrome.browserAction.setTitle(
  details: object,
  callback?: function,
)

chrome.browserAction.onClicked.addListener(
  callback: function,
)