chrome.browserAction

refresh date: 2026-09-25 robots: noindex

ब्यौरा

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

उपलब्धता

≤ MV2

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

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

मेनिफ़ेस्ट

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

{
  "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-डिप वाले स्क्वेयर आइकॉन का इस्तेमाल करें.

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

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

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

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

टूलटिप

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

बैज

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

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

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

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

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

सलाह

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

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

उदाहरण

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

टाइप

TabDetails

Chrome 88 या इसके बाद का वर्शन

प्रॉपर्टी

  • tabId

    number ज़रूरी नहीं

    उस टैब का आईडी जिसकी स्थिति के बारे में क्वेरी करनी है. अगर कोई टैब तय नहीं किया गया है, तो टैब के हिसाब से नहीं, बल्कि सामान्य स्थिति दिखाई जाती है.

तरीके

disable()

वादा 
chrome.browserAction.disable(
  tabId?: number,
  callback?: function,
): Promise<void>

किसी टैब के लिए ब्राउज़र ऐक्शन को बंद करता है.

पैरामीटर

  • tabId

    number ज़रूरी नहीं

    उस टैब का आईडी जिसके लिए ब्राउज़र ऐक्शन में बदलाव करना है.

  • कॉलबैक

    function ज़रूरी नहीं

    Chrome 67+

    callback पैरामीटर कुछ ऐसा दिखता है: 

    () => void

रिटर्न

  • वादा<शून्य>

    Chrome 88 या इसके बाद का वर्शन

    प्रॉमिस सिर्फ़ Manifest V3 और इसके बाद के वर्शन के लिए काम करते हैं. अन्य प्लैटफ़ॉर्म के लिए, कॉलबैक का इस्तेमाल करना ज़रूरी है.

enable()

वादा 
chrome.browserAction.enable(
  tabId?: number,
  callback?: function,
): Promise<void>

किसी टैब के लिए ब्राउज़र ऐक्शन को चालू करता है. डिफ़ॉल्ट रूप से चालू रहता है.

पैरामीटर

  • tabId

    number ज़रूरी नहीं

    उस टैब का आईडी जिसके लिए ब्राउज़र ऐक्शन में बदलाव करना है.

  • कॉलबैक

    function ज़रूरी नहीं

    Chrome 67+

    callback पैरामीटर कुछ ऐसा दिखता है: 

    () => void

रिटर्न

  • वादा<शून्य>

    Chrome 88 या इसके बाद का वर्शन

    प्रॉमिस सिर्फ़ Manifest V3 और इसके बाद के वर्शन के लिए काम करते हैं. अन्य प्लैटफ़ॉर्म के लिए, कॉलबैक का इस्तेमाल करना ज़रूरी है.

getBadgeBackgroundColor()

वादा 
chrome.browserAction.getBadgeBackgroundColor(
  details: TabDetails,
  callback?: function,
): Promise<extensionTypes.ColorArray>

ब्राउज़र ऐक्शन के बैकग्राउंड का रंग दिखाता है.

पैरामीटर

  • विवरण

    TabDetails

  • कॉलबैक

    function ज़रूरी नहीं

    callback पैरामीटर कुछ ऐसा दिखता है: 

    (result: ColorArray) => void

रिटर्न

  • Chrome 88 या इसके बाद का वर्शन

    प्रॉमिस सिर्फ़ Manifest V3 और इसके बाद के वर्शन के लिए काम करते हैं. अन्य प्लैटफ़ॉर्म के लिए, कॉलबैक का इस्तेमाल करना ज़रूरी है.

getBadgeText()

वादा 
chrome.browserAction.getBadgeText(
  details: TabDetails,
  callback?: function,
): Promise<string>

ब्राउज़र ऐक्शन का बैज टेक्स्ट दिखाता है. अगर कोई टैब तय नहीं किया गया है, तो टैब के हिसाब से बैज का टेक्स्ट नहीं दिखता.

पैरामीटर

  • विवरण

    TabDetails

  • कॉलबैक

    function ज़रूरी नहीं

    callback पैरामीटर कुछ ऐसा दिखता है: 

    (result: string) => void

    • नतीजा

      स्ट्रिंग

रिटर्न

  • Promise<string>

    Chrome 88 या इसके बाद का वर्शन

    प्रॉमिस सिर्फ़ Manifest V3 और इसके बाद के वर्शन के लिए काम करते हैं. अन्य प्लैटफ़ॉर्म के लिए, कॉलबैक का इस्तेमाल करना ज़रूरी है.

getPopup()

वादा 
chrome.browserAction.getPopup(
  details: TabDetails,
  callback?: function,
): Promise<string>

वह एचटीएमएल दस्तावेज़ मिलता है जो इस ब्राउज़र ऐक्शन के लिए पॉप-अप के तौर पर सेट है.

पैरामीटर

  • विवरण

    TabDetails

  • कॉलबैक

    function ज़रूरी नहीं

    callback पैरामीटर कुछ ऐसा दिखता है: 

    (result: string) => void

    • नतीजा

      स्ट्रिंग

रिटर्न

  • Promise<string>

    Chrome 88 या इसके बाद का वर्शन

    प्रॉमिस सिर्फ़ Manifest V3 और इसके बाद के वर्शन के लिए काम करते हैं. अन्य प्लैटफ़ॉर्म के लिए, कॉलबैक का इस्तेमाल करना ज़रूरी है.

getTitle()

वादा 
chrome.browserAction.getTitle(
  details: TabDetails,
  callback?: function,
): Promise<string>

इससे ब्राउज़र ऐक्शन का टाइटल मिलता है.

पैरामीटर

  • विवरण

    TabDetails

  • कॉलबैक

    function ज़रूरी नहीं

    callback पैरामीटर कुछ ऐसा दिखता है: 

    (result: string) => void

    • नतीजा

      स्ट्रिंग

रिटर्न

  • Promise<string>

    Chrome 88 या इसके बाद का वर्शन

    प्रॉमिस सिर्फ़ Manifest V3 और इसके बाद के वर्शन के लिए काम करते हैं. अन्य प्लैटफ़ॉर्म के लिए, कॉलबैक का इस्तेमाल करना ज़रूरी है.

setBadgeBackgroundColor()

वादा 
chrome.browserAction.setBadgeBackgroundColor(
  details: object,
  callback?: function,
): Promise<void>

बैज के बैकग्राउंड का रंग सेट करता है.

पैरामीटर

  • विवरण

    ऑब्जेक्ट

    • रंग

      string | ColorArray

      0 से 255 की रेंज में चार पूर्णांकों का कलेक्शन, जो बैज का आरजीबीए रंग बनाते हैं. यह सीएसएस रंग का हेक्स कोड वैल्यू वाली स्ट्रिंग भी हो सकती है. उदाहरण के लिए, #FF0000 या #F00 (लाल). रंगों को पूरी अपारदर्शिता के साथ रेंडर करता है.

    • tabId

      number ज़रूरी नहीं

      यह बदलाव सिर्फ़ तब लागू होता है, जब कोई खास टैब चुना जाता है. टैब बंद होने पर, यह अपने-आप रीसेट हो जाता है.

  • कॉलबैक

    function ज़रूरी नहीं

    Chrome 67+

    callback पैरामीटर कुछ ऐसा दिखता है: 

    () => void

रिटर्न

  • वादा<शून्य>

    Chrome 88 या इसके बाद का वर्शन

    प्रॉमिस सिर्फ़ Manifest V3 और इसके बाद के वर्शन के लिए काम करते हैं. अन्य प्लैटफ़ॉर्म के लिए, कॉलबैक का इस्तेमाल करना ज़रूरी है.

setBadgeText()

वादा 
chrome.browserAction.setBadgeText(
  details: object,
  callback?: function,
): Promise<void>

इससे ब्राउज़र ऐक्शन के लिए बैज टेक्स्ट सेट किया जाता है. बैज, आइकॉन के ऊपर दिखता है.

पैरामीटर

  • विवरण

    ऑब्जेक्ट

    • tabId

      number ज़रूरी नहीं

      यह बदलाव सिर्फ़ तब लागू होता है, जब कोई खास टैब चुना जाता है. टैब बंद होने पर, यह अपने-आप रीसेट हो जाता है.

    • टेक्स्ट

      string ज़रूरी नहीं

      इसमें कितने भी वर्ण डाले जा सकते हैं, लेकिन स्पेस में सिर्फ़ चार वर्ण ही फ़िट हो सकते हैं. अगर कोई खाली स्ट्रिंग ('') पास की जाती है, तो बैज का टेक्स्ट हटा दिया जाता है. अगर tabId की वैल्यू दी गई है और text की वैल्यू शून्य है, तो दिए गए टैब का टेक्स्ट हटा दिया जाता है. साथ ही, डिफ़ॉल्ट रूप से ग्लोबल बैज टेक्स्ट सेट हो जाता है.

  • कॉलबैक

    function ज़रूरी नहीं

    Chrome 67+

    callback पैरामीटर कुछ ऐसा दिखता है: 

    () => void

रिटर्न

  • वादा<शून्य>

    Chrome 88 या इसके बाद का वर्शन

    प्रॉमिस सिर्फ़ Manifest V3 और इसके बाद के वर्शन के लिए काम करते हैं. अन्य प्लैटफ़ॉर्म के लिए, कॉलबैक का इस्तेमाल करना ज़रूरी है.

setIcon()

वादा 
chrome.browserAction.setIcon(
  details: object,
  callback?: function,
): Promise<void>

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

पैरामीटर

  • विवरण

    ऑब्जेक्ट

    • imageData

      ImageData | object ज़रूरी नहीं

      ImageData ऑब्जेक्ट या डिक्शनरी {size -> ImageData}, जो सेट किए जाने वाले आइकॉन को दिखाती है. अगर आइकॉन को डिक्शनरी के तौर पर तय किया गया है, तो इस्तेमाल की जाने वाली इमेज को स्क्रीन की पिक्सल डेंसिटी के आधार पर चुना जाता है. अगर एक स्क्रीन स्पेस यूनिट में फ़िट होने वाले इमेज पिक्सल की संख्या scale के बराबर है, तो scale * n साइज़ वाली इमेज चुनी जाती है. यहां n, यूज़र इंटरफ़ेस (यूआई) में आइकॉन का साइज़ है. कम से कम एक इमेज की जानकारी देना ज़रूरी है. ध्यान दें कि 'details.imageData = foo', 'details.imageData = {'16': foo}' के बराबर है

    • पाथ

      string | object ज़रूरी नहीं

      रिलेटिव इमेज पाथ या डिक्शनरी {size -> relative image path}, जो सेट किए जाने वाले आइकॉन पर ले जाती है. अगर आइकॉन को डिक्शनरी के तौर पर तय किया गया है, तो इस्तेमाल की जाने वाली इमेज को स्क्रीन की पिक्सल डेंसिटी के आधार पर चुना जाता है. अगर एक स्क्रीन स्पेस यूनिट में फ़िट होने वाले इमेज पिक्सल की संख्या scale के बराबर है, तो scale * n साइज़ वाली इमेज चुनी जाती है. यहां n, यूज़र इंटरफ़ेस (यूआई) में आइकॉन का साइज़ है. कम से कम एक इमेज की जानकारी देना ज़रूरी है. ध्यान दें कि 'details.path = foo', 'details.path = {'16': foo}' के बराबर है

    • tabId

      number ज़रूरी नहीं

      यह बदलाव सिर्फ़ तब लागू होता है, जब कोई खास टैब चुना जाता है. टैब बंद होने पर, यह अपने-आप रीसेट हो जाता है.

  • कॉलबैक

    function ज़रूरी नहीं

    callback पैरामीटर कुछ ऐसा दिखता है: 

    () => void

रिटर्न

  • वादा<शून्य>

    Chrome 116 या इसके बाद का वर्शन

    प्रॉमिस सिर्फ़ Manifest V3 और इसके बाद के वर्शन के लिए काम करते हैं. अन्य प्लैटफ़ॉर्म के लिए, कॉलबैक का इस्तेमाल करना ज़रूरी है.

setPopup()

वादा 
chrome.browserAction.setPopup(
  details: object,
  callback?: function,
): Promise<void>

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

पैरामीटर

  • विवरण

    ऑब्जेक्ट

    • पॉप-अप

      स्ट्रिंग

      पॉप-अप में दिखाने के लिए, एचटीएमएल फ़ाइल का रिलेटिव पाथ. अगर इसे खाली स्ट्रिंग ('') पर सेट किया जाता है, तो कोई पॉप-अप नहीं दिखता.

    • tabId

      number ज़रूरी नहीं

      यह बदलाव सिर्फ़ तब लागू होता है, जब कोई खास टैब चुना जाता है. टैब बंद होने पर, यह अपने-आप रीसेट हो जाता है.

  • कॉलबैक

    function ज़रूरी नहीं

    Chrome 67+

    callback पैरामीटर कुछ ऐसा दिखता है: 

    () => void

रिटर्न

  • वादा<शून्य>

    Chrome 88 या इसके बाद का वर्शन

    प्रॉमिस सिर्फ़ Manifest V3 और इसके बाद के वर्शन के लिए काम करते हैं. अन्य प्लैटफ़ॉर्म के लिए, कॉलबैक का इस्तेमाल करना ज़रूरी है.

setTitle()

वादा 
chrome.browserAction.setTitle(
  details: object,
  callback?: function,
): Promise<void>

ब्राउज़र ऐक्शन का टाइटल सेट करता है. यह टाइटल, टूलटिप में दिखता है.

पैरामीटर

  • विवरण

    ऑब्जेक्ट

    • tabId

      number ज़रूरी नहीं

      यह बदलाव सिर्फ़ तब लागू होता है, जब कोई खास टैब चुना जाता है. टैब बंद होने पर, यह अपने-आप रीसेट हो जाता है.

    • title

      स्ट्रिंग

      वह स्ट्रिंग जो माउस घुमाने पर, ब्राउज़र पर की जाने वाली कार्रवाई को दिखानी चाहिए.

  • कॉलबैक

    function ज़रूरी नहीं

    Chrome 67+

    callback पैरामीटर कुछ ऐसा दिखता है: 

    () => void

रिटर्न

  • वादा<शून्य>

    Chrome 88 या इसके बाद का वर्शन

    प्रॉमिस सिर्फ़ Manifest V3 और इसके बाद के वर्शन के लिए काम करते हैं. अन्य प्लैटफ़ॉर्म के लिए, कॉलबैक का इस्तेमाल करना ज़रूरी है.

इवेंट

onClicked

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

यह तब ट्रिगर होता है, जब ब्राउज़र ऐक्शन आइकॉन पर क्लिक किया जाता है. अगर ब्राउज़र ऐक्शन में कोई पॉप-अप है, तो यह फ़ायर नहीं होता.

पैरामीटर

  • कॉलबैक

    फ़ंक्शन

    callback पैरामीटर कुछ ऐसा दिखता है: 

    (tab: tabs.Tab) => void