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

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

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

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

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

टूलटिप

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

बैज

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

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

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

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

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

सलाह

बेहतर विज़ुअल इफ़ेक्ट के लिए, इन दिशा-निर्देशों का पालन करें:

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

उदाहरण

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

टाइप

TabDetails

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

प्रॉपर्टी

  • tabId

    number optional

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

तरीके

disable()

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

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

पैरामीटर

  • tabId

    number optional

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

  • कॉलबैक

    फ़ंक्शन ज़रूरी नहीं है

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

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

    () => void

रिटर्न

  • Promise<void>

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

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

enable()

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

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

पैरामीटर

  • tabId

    number optional

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

  • कॉलबैक

    फ़ंक्शन ज़रूरी नहीं है

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

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

    () => void

रिटर्न

  • Promise<void>

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

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

getBadgeBackgroundColor()

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

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

पैरामीटर

  • ब्यौरा

    TabDetails

  • कॉलबैक

    फ़ंक्शन ज़रूरी नहीं है

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

    (result: ColorArray) => void

रिटर्न

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

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

getBadgeText()

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

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

पैरामीटर

  • ब्यौरा

    TabDetails

  • कॉलबैक

    फ़ंक्शन ज़रूरी नहीं है

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

    (result: string) => void

    • नतीजा

      स्ट्रिंग

रिटर्न

  • Promise<string>

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

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

getPopup()

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

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

पैरामीटर

  • ब्यौरा

    TabDetails

  • कॉलबैक

    फ़ंक्शन ज़रूरी नहीं है

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

    (result: string) => void

    • नतीजा

      स्ट्रिंग

रिटर्न

  • Promise<string>

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

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

getTitle()

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

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

पैरामीटर

  • ब्यौरा

    TabDetails

  • कॉलबैक

    फ़ंक्शन ज़रूरी नहीं है

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

    (result: string) => void

    • नतीजा

      स्ट्रिंग

रिटर्न

  • Promise<string>

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

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

setBadgeBackgroundColor()

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

इस विकल्प से, बैज के बैकग्राउंड का रंग सेट किया जाता है.

पैरामीटर

  • ब्यौरा

    ऑब्जेक्ट

    • रंग

      string | ColorArray

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

    • tabId

      number optional

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

  • कॉलबैक

    फ़ंक्शन ज़रूरी नहीं है

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

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

    () => void

रिटर्न

  • Promise<void>

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

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

setBadgeText()

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

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

पैरामीटर

  • ब्यौरा

    ऑब्जेक्ट

    • tabId

      number optional

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

    • टेक्स्ट

      string ज़रूरी नहीं है

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

  • कॉलबैक

    फ़ंक्शन ज़रूरी नहीं है

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

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

    () => void

रिटर्न

  • Promise<void>

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

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

setIcon()

Promise 
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 optional

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

  • कॉलबैक

    फ़ंक्शन ज़रूरी नहीं है

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

    () => void

रिटर्न

  • Promise<void>

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

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

setPopup()

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

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

पैरामीटर

  • ब्यौरा

    ऑब्जेक्ट

    • पॉप-अप

      स्ट्रिंग

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

    • tabId

      number optional

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

  • कॉलबैक

    फ़ंक्शन ज़रूरी नहीं है

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

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

    () => void

रिटर्न

  • Promise<void>

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

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

setTitle()

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

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

पैरामीटर

  • ब्यौरा

    ऑब्जेक्ट

    • tabId

      number optional

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

    • title

      स्ट्रिंग

      यह वह स्ट्रिंग है जिसे ब्राउज़र ऐक्शन पर माउस घुमाने पर दिखाना चाहिए.

  • कॉलबैक

    फ़ंक्शन ज़रूरी नहीं है

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

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

    () => void

रिटर्न

  • Promise<void>

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

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

इवेंट

onClicked

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

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

पैरामीटर

  • कॉलबैक

    फ़ंक्शन

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

    (tab: tabs.Tab) => void