chrome.pageAction

ब्यौरा

chrome.pageAction API का इस्तेमाल करके, मुख्य Google Chrome टूलबार में आइकॉन डालें. ये आइकॉन, पता बार की दाईं ओर दिखते हैं. पेज की कार्रवाइयों का मतलब ऐसी कार्रवाइयों से है जो मौजूदा पेज पर की जा सकती हैं. हालांकि, ये सभी पेजों पर लागू नहीं होतीं. इनऐक्टिव होने पर, पेज पर की जाने वाली कार्रवाइयां धूसर रंग में दिखती हैं.

उपलब्धता

≤ MV2

कुछ उदाहरण:

  • इस पेज के आरएसएस फ़ीड की सदस्यता लें
  • इस पेज पर मौजूद फ़ोटो का स्लाइड शो बनाना

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

छिपाई गई पेज की कार्रवाइयां, धूसर रंग में दिखती हैं. उदाहरण के लिए, यहां दिया गया आरएसएस फ़ीड धूसर हो गया है, क्योंकि मौजूदा पेज के लिए फ़ीड की सदस्यता नहीं ली जा सकती:

कृपया इसके बजाय ब्राउज़र ऐक्शन का इस्तेमाल करें, ताकि लोग हमेशा आपके एक्सटेंशन से इंटरैक्ट कर सकें.

मेनिफ़ेस्ट

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

{
  "name": "My extension",
  ...
  "page_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
  },
  ...
}

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

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

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

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

ब्राउज़र ऐक्शन की तरह, पेज ऐक्शन में आइकॉन, टूलटिप, और पॉप-अप हो सकता है. हालांकि, इनमें बैज नहीं हो सकते. इसके अलावा, पेज की कार्रवाइयों को धूसर किया जा सकता है. ब्राउज़र ऐक्शन यूज़र इंटरफ़ेस (यूआई) के बारे में पढ़कर, आइकॉन, टूलटिप, और पॉप-अप के बारे में जानकारी पाई जा सकती है.

pageAction.show और pageAction.hide तरीकों का इस्तेमाल करके, पेज ऐक्शन को दिखाया जा सकता है और उसे धूसर किया जा सकता है. डिफ़ॉल्ट रूप से, पेज ऐक्शन धूसर रंग में दिखता है. इसे दिखाते समय, आपको उस टैब के बारे में बताना होता है जिसमें आइकॉन दिखना चाहिए. यह आइकॉन तब तक दिखता है, जब तक टैब बंद नहीं हो जाता या कोई दूसरा यूआरएल नहीं दिखने लगता. ऐसा तब होता है, जब उपयोगकर्ता किसी लिंक पर क्लिक करता है.

सलाह

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

  • पेज लेवल पर कार्रवाई करने की सुविधा का इस्तेमाल उन सुविधाओं के लिए करें जो सिर्फ़ कुछ पेजों के लिए काम की हों.
  • ऐसी सुविधाओं के लिए पेज ऐक्शन का इस्तेमाल न करें जो ज़्यादातर पेजों के लिए काम की हों. इसके बजाय, ब्राउज़र ऐक्शन का इस्तेमाल करें.
  • अपने आइकॉन को लगातार ऐनिमेट न करें. यह बहुत परेशान करने वाला है.

टाइप

ImageDataType

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

टाइप

ImageData

TabDetails

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

प्रॉपर्टी

  • tabId

    number ज़रूरी नहीं

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

तरीके

getPopup()

प्रॉमिस 
chrome.pageAction.getPopup(
  details: TabDetails,
  callback?: function,
): Promise<string>

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

पैरामीटर

  • विवरण

    TabDetails

  • कॉलबैक

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

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

    (result: string) => void

    • नतीजा

      स्ट्रिंग

रिटर्न

  • Promise<string>

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

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

getTitle()

प्रॉमिस 
chrome.pageAction.getTitle(
  details: TabDetails,
  callback?: function,
): Promise<string>

यह पेज ऐक्शन का टाइटल दिखाता है.

पैरामीटर

  • विवरण

    TabDetails

  • कॉलबैक

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

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

    (result: string) => void

    • नतीजा

      स्ट्रिंग

रिटर्न

  • Promise<string>

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

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

hide()

प्रॉमिस 
chrome.pageAction.hide(
  tabId: number,
  callback?: function,
): Promise<void>

यह कुकी, पेज ऐक्शन को छिपाती है. छिपाए गए पेज ऐक्शन, Chrome टूलबार में अब भी दिखते हैं. हालांकि, वे धूसर हो जाते हैं.

पैरामीटर

  • tabId

    संख्या

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

  • कॉलबैक

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

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

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

    () => void

रिटर्न

  • Promise<void>

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

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

setIcon()

प्रॉमिस 
chrome.pageAction.setIcon(
  details: object,
  callback?: function,
): Promise<void>

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

पैरामीटर

  • विवरण

    ऑब्जेक्ट

    • iconIndex

      number ज़रूरी नहीं

      अब काम नहीं करता. इस तर्क को अनदेखा कर दिया जाता है.

    • 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

      संख्या

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

  • कॉलबैक

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

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

    () => void

रिटर्न

  • Promise<void>

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

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

setPopup()

प्रॉमिस 
chrome.pageAction.setPopup(
  details: object,
  callback?: function,
): Promise<void>

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

पैरामीटर

  • विवरण

    ऑब्जेक्ट

    • पॉप-अप

      स्ट्रिंग

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

    • tabId

      संख्या

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

  • कॉलबैक

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

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

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

    () => void

रिटर्न

  • Promise<void>

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

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

setTitle()

प्रॉमिस 
chrome.pageAction.setTitle(
  details: object,
  callback?: function,
): Promise<void>

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

पैरामीटर

  • विवरण

    ऑब्जेक्ट

    • tabId

      संख्या

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

    • title

      स्ट्रिंग

      टूलटिप स्ट्रिंग.

  • कॉलबैक

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

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

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

    () => void

रिटर्न

  • Promise<void>

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

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

show()

प्रॉमिस 
chrome.pageAction.show(
  tabId: number,
  callback?: function,
): Promise<void>

इससे पेज ऐक्शन दिखता है. टैब चुने जाने पर, पेज ऐक्शन दिखता है.

पैरामीटर

  • tabId

    संख्या

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

  • कॉलबैक

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

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

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

    () => void

रिटर्न

  • Promise<void>

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

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

इवेंट

onClicked

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

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

पैरामीटर

  • कॉलबैक

    फ़ंक्शन

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

    (tab: tabs.Tab) => void