chrome.browserAction

कंपनी का ब्यौरा

आइकॉन को पता बार की दाईं ओर मौजूद, 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 फ़ॉर्मैट में होनी चाहिए.

आइकॉन सेट करने के लिए, मेनिफ़ेस्ट में default_icon के 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 तरीके को कॉल करें.

सलाह

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

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

उदाहरण

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

टाइप

ColorArray

टाइप

[नंबर, नंबर, नंबर, नंबर]

ImageDataType

किसी इमेज के लिए Pixel डेटा. कोई ImageData ऑब्जेक्ट होना चाहिए, जैसे कि canvas एलिमेंट से.

टाइप

ImageData

TabDetails

Chrome 88+

प्रॉपर्टी

  • tabId

    नंबर ज़रूरी नहीं

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

तरीके

disable()

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

इससे टैब के लिए ब्राउज़र की कार्रवाई बंद हो जाती है.

पैरामीटर

  • tabId

    नंबर ज़रूरी नहीं

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

  • कॉलबैक

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

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

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

    () => void

लौटाए गए प्रॉडक्ट

  • Promise<void>

    Chrome 88+

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

enable()

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

किसी टैब के लिए ब्राउज़र कार्रवाई को सक्षम करता है. डिफ़ॉल्ट रूप से 'चालू है' पर सेट होता है.

पैरामीटर

  • tabId

    नंबर ज़रूरी नहीं

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

  • कॉलबैक

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

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

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

    () => void

लौटाए गए प्रॉडक्ट

  • Promise<void>

    Chrome 88+

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

getBadgeBackgroundColor()

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

ब्राउज़र की कार्रवाई के बैकग्राउंड के रंग की जानकारी देता है.

पैरामीटर

  • जानकारी

    TabDetails

  • कॉलबैक

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

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

    (result: ColorArray) => void

लौटाए गए प्रॉडक्ट

  • Promise<ColorArray>

    Chrome 88+

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

getBadgeText()

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

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

पैरामीटर

  • जानकारी

    TabDetails

  • कॉलबैक

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

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

    (result: string) => void

    • नतीजा

      स्ट्रिंग

लौटाए गए प्रॉडक्ट

  • प्रॉमिस<string>

    Chrome 88+

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

getPopup()

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

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

पैरामीटर

  • जानकारी

    TabDetails

  • कॉलबैक

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

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

    (result: string) => void

    • नतीजा

      स्ट्रिंग

लौटाए गए प्रॉडक्ट

  • प्रॉमिस<string>

    Chrome 88+

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

getTitle()

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

ब्राउज़र की कार्रवाई का टाइटल दिखाता है.

पैरामीटर

  • जानकारी

    TabDetails

  • कॉलबैक

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

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

    (result: string) => void

    • नतीजा

      स्ट्रिंग

लौटाए गए प्रॉडक्ट

  • प्रॉमिस<string>

    Chrome 88+

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

setBadgeBackgroundColor()

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

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

पैरामीटर

  • जानकारी

    ऑब्जेक्ट

    • रंग

      स्ट्रिंग | ColorArray

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

    • tabId

      नंबर ज़रूरी नहीं

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

  • कॉलबैक

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

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

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

    () => void

लौटाए गए प्रॉडक्ट

  • Promise<void>

    Chrome 88+

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

setBadgeText()

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

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

पैरामीटर

  • जानकारी

    ऑब्जेक्ट

    • tabId

      नंबर ज़रूरी नहीं

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

    • टेक्स्ट

      स्ट्रिंग ज़रूरी नहीं

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

  • कॉलबैक

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

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

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

    () => void

लौटाए गए प्रॉडक्ट

  • Promise<void>

    Chrome 88+

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

setIcon()

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

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

पैरामीटर

  • जानकारी

    ऑब्जेक्ट

    • imageData

      ImageData | ऑब्जेक्ट ज़रूरी नहीं

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

    • पाथ

      स्ट्रिंग | ऑब्जेक्ट ज़रूरी नहीं

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

    • tabId

      नंबर ज़रूरी नहीं

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

  • कॉलबैक

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

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

    () => void

लौटाए गए प्रॉडक्ट

  • Promise<void>

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

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

setPopup()

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

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

पैरामीटर

  • जानकारी

    ऑब्जेक्ट

    • पॉप-अप

      स्ट्रिंग

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

    • tabId

      नंबर ज़रूरी नहीं

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

  • कॉलबैक

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

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

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

    () => void

लौटाए गए प्रॉडक्ट

  • Promise<void>

    Chrome 88+

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

setTitle()

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

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

पैरामीटर

  • जानकारी

    ऑब्जेक्ट

    • tabId

      नंबर ज़रूरी नहीं

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

    • title

      स्ट्रिंग

      वह स्ट्रिंग जिस पर ब्राउज़र की कार्रवाई दिखाई जानी चाहिए.

  • कॉलबैक

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

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

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

    () => void

लौटाए गए प्रॉडक्ट

  • Promise<void>

    Chrome 88+

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

इवेंट

onClicked

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

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

पैरामीटर

  • कॉलबैक

    function

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

    (tab: tabs.Tab) => void