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

किसी इमेज के लिए पिक्सल डेटा. कोई ImageData ऑब्जेक्ट होना चाहिए; उदाहरण के लिए, canvas एलिमेंट से.

टाइप

ImageData

TabDetails

Chrome 88 और उसके बाद के वर्शन

प्रॉपर्टी

  • tabId

    नंबर वैकल्पिक

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

तरीके

disable()

प्रॉमिस 
chrome.browserAction.disable(
  tabId?: number,
  callback?: function,
)

टैब के लिए ब्राउज़र कार्रवाई को अक्षम करता है.

पैरामीटर

  • tabId

    नंबर वैकल्पिक

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

  • कॉलबैक

    फ़ंक्शन वैकल्पिक

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

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

    () => void

रिटर्न

  • प्रॉमिस<void>

    Chrome 88 और उसके बाद के वर्शन

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

enable()

प्रॉमिस 
chrome.browserAction.enable(
  tabId?: number,
  callback?: function,
)

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

पैरामीटर

  • tabId

    नंबर वैकल्पिक

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

  • कॉलबैक

    फ़ंक्शन वैकल्पिक

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

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

    () => void

रिटर्न

  • प्रॉमिस<void>

    Chrome 88 और उसके बाद के वर्शन

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

getBadgeBackgroundColor()

प्रॉमिस 
chrome.browserAction.getBadgeBackgroundColor(
  details: TabDetails,
  callback?: function,
)

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

पैरामीटर

  • विवरण

    TabDetails

  • कॉलबैक

    फ़ंक्शन वैकल्पिक

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

    (result: ColorArray) => void

रिटर्न

  • Promise&lt;ColorArray&gt;

    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,
)

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

पैरामीटर

  • विवरण

    ऑब्जेक्ट

    • रंग

      string | ColorArray

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

    • tabId

      नंबर वैकल्पिक

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

  • कॉलबैक

    फ़ंक्शन वैकल्पिक

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

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

    () => void

रिटर्न

  • प्रॉमिस<void>

    Chrome 88 और उसके बाद के वर्शन

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

setBadgeText()

प्रॉमिस 
chrome.browserAction.setBadgeText(
  details: object,
  callback?: function,
)

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

पैरामीटर

  • विवरण

    ऑब्जेक्ट

    • tabId

      नंबर वैकल्पिक

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

    • टेक्स्ट

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

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

  • कॉलबैक

    फ़ंक्शन वैकल्पिक

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

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

    () => void

रिटर्न

  • प्रॉमिस<void>

    Chrome 88 और उसके बाद के वर्शन

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

setIcon()

प्रॉमिस 
chrome.browserAction.setIcon(
  details: object,
  callback?: function,
)

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

पैरामीटर

  • विवरण

    ऑब्जेक्ट

    • इमेज डेटा

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

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

    • पाथ

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

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

    • tabId

      नंबर वैकल्पिक

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

  • कॉलबैक

    फ़ंक्शन वैकल्पिक

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

    () => void

रिटर्न

  • प्रॉमिस<void>

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

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

setPopup()

प्रॉमिस 
chrome.browserAction.setPopup(
  details: object,
  callback?: function,
)

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

पैरामीटर

  • विवरण

    ऑब्जेक्ट

    • पॉप-अप

      स्ट्रिंग

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

    • tabId

      नंबर वैकल्पिक

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

  • कॉलबैक

    फ़ंक्शन वैकल्पिक

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

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

    () => void

रिटर्न

  • प्रॉमिस<void>

    Chrome 88 और उसके बाद के वर्शन

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

setTitle()

प्रॉमिस 
chrome.browserAction.setTitle(
  details: object,
  callback?: function,
)

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

पैरामीटर

  • विवरण

    ऑब्जेक्ट

    • tabId

      नंबर वैकल्पिक

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

    • title

      स्ट्रिंग

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

  • कॉलबैक

    फ़ंक्शन वैकल्पिक

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

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

    () => void

रिटर्न

  • प्रॉमिस<void>

    Chrome 88 और उसके बाद के वर्शन

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

इवेंट

onClicked

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

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

पैरामीटर

  • कॉलबैक

    फ़ंक्शन

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

    (tab: tabs.Tab) => void