chrome.devtools.panels

ब्यौरा

अपने एक्सटेंशन को डेवलपर टूल विंडो के यूज़र इंटरफ़ेस (यूआई) में इंटिग्रेट करने के लिए, chrome.devtools.panels एपीआई का इस्तेमाल करें: अपने पैनल बनाएं, मौजूदा पैनल ऐक्सेस करें, और साइडबार जोड़ें.

मेनिफ़ेस्ट

इस एपीआई का इस्तेमाल करने के लिए, इन कुंजियों का एलान मेनिफ़ेस्ट में करना ज़रूरी है.

"devtools_page"

Developer Tools API इस्तेमाल करने के बारे में सामान्य जानकारी पाने के लिए, DevTools API की खास जानकारी देखें.

खास जानकारी

हर एक्सटेंशन पैनल और साइडबार को एक अलग एचटीएमएल पेज के तौर पर दिखाया जाता है. डेवलपर टूल विंडो में दिखने वाले सभी एक्सटेंशन पेजों के पास, chrome.devtools एपीआई के सभी मॉड्यूल के साथ-साथ chrome.extension एपीआई का ऐक्सेस होता है. डेवलपर टूल विंडो में मौजूद पेजों के लिए, अन्य एक्सटेंशन एपीआई उपलब्ध नहीं हैं. हालांकि, अपने एक्सटेंशन के बैकग्राउंड पेज पर अनुरोध भेजकर, उन्हें चालू किया जा सकता है. ऐसा कॉन्टेंट स्क्रिप्ट में किए जाने वाले तरीके से ही किया जाता है.

devtools.panels.setOpenResourceHandler तरीके का इस्तेमाल करके, कॉलबैक फ़ंक्शन इंस्टॉल किया जा सकता है. यह फ़ंक्शन, किसी संसाधन को खोलने के लिए उपयोगकर्ता के अनुरोधों को हैंडल करता है. आम तौर पर, यह अनुरोध डेवलपर टूल विंडो में किसी संसाधन के लिंक पर क्लिक करने से होता है. इंस्टॉल किए गए हैंडलर में से ज़्यादा से ज़्यादा एक को कॉल किया जाता है. उपयोगकर्ता, डेवलपर टूल की सेटिंग वाले डायलॉग का इस्तेमाल करके, डिफ़ॉल्ट व्यवहार या संसाधन खोलने के अनुरोधों को हैंडल करने के लिए एक्सटेंशन तय कर सकते हैं. अगर कोई एक्सटेंशन, setOpenResourceHandler() को कई बार कॉल करता है, तो सिर्फ़ आखिरी हैंडलर को बनाए रखा जाता है.

उदाहरण

नीचे दिया गया कोड, Panel.html में मौजूद एक पैनल जोड़ता है. इसे डेवलपर टूल टूलबार पर FontPicker.png के तौर पर दिखाया जाता है और इसे फ़ॉन्ट पिकर के तौर पर लेबल किया जाता है:

chrome.devtools.panels.create("Font Picker",
                              "FontPicker.png",
                              "Panel.html",
                              function(panel) { ... });

यहां दिया गया कोड, Elements पैनल में Sidebar.html में मौजूद और Font Properties नाम का साइडबार पैन जोड़ता है. इसके बाद, इसकी ऊंचाई 8ex पर सेट करता है:

chrome.devtools.panels.elements.createSidebarPane("Font Properties",
  function(sidebar) {
    sidebar.setPage("Sidebar.html");
    sidebar.setHeight("8ex");
  }
);

इस स्क्रीनशॉट में दिखाया गया है कि ऊपर दिए गए उदाहरणों का, डेवलपर टूल विंडो पर क्या असर पड़ेगा:

DevTools टूलबार पर मौजूद एक्सटेंशन आइकॉन पैनल

इस एपीआई को आज़माने के लिए, chrome-extension-samples रिपॉज़िटरी से devtools panels API example इंस्टॉल करें.

टाइप

Button

एक्सटेंशन की मदद से बनाया गया बटन.

प्रॉपर्टी

  • onClicked

    Event<functionvoidvoid>

    बटन पर क्लिक करने पर ट्रिगर होता है.

    onClicked.addListener फ़ंक्शन इस तरह दिखता है: 

    (callback: function) => {...}

    • कॉलबैक

      फ़ंक्शन

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

      () => void

  • अपडेट करें

    अमान्य

    इस कुकी का इस्तेमाल बटन के एट्रिब्यूट को अपडेट करने के लिए किया जाता है. अगर कुछ तर्क छोड़ दिए जाते हैं या null का इस्तेमाल किया जाता है, तो उनसे जुड़े एट्रिब्यूट अपडेट नहीं होते.

    update फ़ंक्शन इस तरह दिखता है: 

    (iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}

    • iconPath

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

      बटन के नए आइकॉन का पाथ.

    • tooltipText

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

      जब उपयोगकर्ता बटन पर कर्सर घुमाता है, तब टूलटिप के तौर पर दिखने वाला टेक्स्ट.

    • बंद है

      बूलियन ज़रूरी नहीं है

      क्या बटन बंद है.

ElementsPanel

यह एलिमेंट पैनल को दिखाता है.

प्रॉपर्टी

  • onSelectionChanged

    Event<functionvoidvoid>

    यह इवेंट तब ट्रिगर होता है, जब पैनल में कोई ऑब्जेक्ट चुना जाता है.

    onSelectionChanged.addListener फ़ंक्शन इस तरह दिखता है: 

    (callback: function) => {...}

    • कॉलबैक

      फ़ंक्शन

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

      () => void

  • createSidebarPane

    अमान्य

    Promise

    यह पैनल के साइडबार में एक पैनल बनाता है.

    createSidebarPane फ़ंक्शन इस तरह दिखता है: 

    (title: string, callback?: function) => {...}

    • title

      स्ट्रिंग

      साइडबार के कैप्शन में दिखने वाला टेक्स्ट.

    • कॉलबैक

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

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

      (result: ExtensionSidebarPane) => void

      • नतीजा

        ExtensionSidebarPane

        बनाए गए साइडबार पैनल के लिए ExtensionSidebarPane ऑब्जेक्ट.

    • returns

      Promise<ExtensionSidebarPane>

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

      साइडबार बनने पर इस कॉलबैक को शुरू किया जाता है.

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

ExtensionPanel

यह एक्सटेंशन से बनाए गए पैनल को दिखाता है.

प्रॉपर्टी

  • onHidden

    Event<functionvoidvoid>

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

    onHidden.addListener फ़ंक्शन इस तरह दिखता है: 

    (callback: function) => {...}

    • कॉलबैक

      फ़ंक्शन

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

      () => void

  • onSearch

    Event<functionvoidvoid>

    यह इवेंट, खोज से जुड़ी कार्रवाई (नई खोज शुरू करना, खोज के नतीजों पर नेविगेट करना या खोज रद्द करना) पर ट्रिगर होता है.

    onSearch.addListener फ़ंक्शन इस तरह दिखता है: 

    (callback: function) => {...}

    • कॉलबैक

      फ़ंक्शन

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

      (action: string, queryString?: string) => void

      • ऐक्शन गेम

        स्ट्रिंग

      • queryString

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

  • onShown

    Event<functionvoidvoid>

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

    onShown.addListener फ़ंक्शन इस तरह दिखता है: 

    (callback: function) => {...}

    • कॉलबैक

      फ़ंक्शन

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

      (window: Window) => void

      • विंडो

        विंडो

  • createStatusBarButton

    अमान्य

    यह पैनल की स्टेटस बार में एक बटन जोड़ता है.

    createStatusBarButton फ़ंक्शन इस तरह दिखता है: 

    (iconPath: string, tooltipText: string, disabled: boolean) => {...}

    • iconPath

      स्ट्रिंग

      बटन के आइकॉन का पाथ. फ़ाइल में 64x24 पिक्सल की इमेज होनी चाहिए. इसमें 32x24 पिक्सल के दो आइकॉन होने चाहिए. बटन के काम न करने पर बाईं ओर मौजूद आइकॉन का इस्तेमाल किया जाता है. बटन दबाने पर, दाईं ओर मौजूद आइकॉन दिखता है.

    • tooltipText

      स्ट्रिंग

      जब उपयोगकर्ता बटन पर कर्सर घुमाता है, तब टूलटिप के तौर पर दिखने वाला टेक्स्ट.

    • बंद है

      बूलियन

      क्या बटन बंद है.

  • दिखाएं

    अमान्य

    Chrome 140+

    यह पैनल को दिखाता है. इसके लिए, यह उससे जुड़े टैब को चालू करता है.

    show फ़ंक्शन इस तरह दिखता है: 

    () => {...}

ExtensionSidebarPane

एक्सटेंशन की मदद से बनाया गया साइडबार.

प्रॉपर्टी

  • onHidden

    Event<functionvoidvoid>

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

    onHidden.addListener फ़ंक्शन इस तरह दिखता है: 

    (callback: function) => {...}

    • कॉलबैक

      फ़ंक्शन

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

      () => void

  • onShown

    Event<functionvoidvoid>

    यह इवेंट तब ट्रिगर होता है, जब उपयोगकर्ता उस पैनल पर स्विच करता है जिसमें साइडबार पैन मौजूद होता है. इससे साइडबार पैन दिखने लगता है.

    onShown.addListener फ़ंक्शन इस तरह दिखता है: 

    (callback: function) => {...}

    • कॉलबैक

      फ़ंक्शन

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

      (window: Window) => void

      • विंडो

        विंडो

  • setExpression

    अमान्य

    Promise

    यह एक ऐसा एक्सप्रेशन सेट करता है जिसका आकलन, जांच किए गए पेज पर किया जाता है. नतीजा, साइडबार पैनल में दिखता है.

    setExpression फ़ंक्शन इस तरह दिखता है: 

    (expression: string, rootTitle?: string, callback?: function) => {...}

    • एक्सप्रेशन

      स्ट्रिंग

      यह एक्सप्रेशन, उस पेज के हिसाब से तय किया जाता है जिसकी जांच की जा रही है. JavaScript ऑब्जेक्ट और डीओएम नोड को कंसोल/वॉच की तरह, बड़ा किए जा सकने वाले ट्री में दिखाया जाता है.

    • rootTitle

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

      एक्सप्रेशन ट्री के रूट के लिए वैकल्पिक टाइटल.

    • कॉलबैक

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

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

      () => void

    • returns

      Promise<void>

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

      यह एक कॉलबैक है. इसे तब शुरू किया जाता है, जब एक्सप्रेशन के आकलन के नतीजों के साथ साइडबार पैन अपडेट हो जाता है.

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

  • setHeight

    अमान्य

    इससे साइडबार की ऊंचाई सेट की जाती है.

    setHeight फ़ंक्शन इस तरह दिखता है: 

    (height: string) => {...}

    • ऊंचाई

      स्ट्रिंग

      सीएसएस की तरह साइज़ स्पेसिफ़िकेशन, जैसे कि '100px' या '12ex'.

  • setObject

    अमान्य

    Promise

    यह JSON के साथ काम करने वाला ऑब्जेक्ट सेट करता है, ताकि उसे साइडबार पैन में दिखाया जा सके.

    setObject फ़ंक्शन इस तरह दिखता है: 

    (jsonObject: string, rootTitle?: string, callback?: function) => {...}

    • jsonObject

      स्ट्रिंग

      जांचे गए पेज के संदर्भ में दिखाया जाने वाला ऑब्जेक्ट. इसका आकलन कॉलर (एपीआई क्लाइंट) के हिसाब से किया जाता है.

    • rootTitle

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

      एक्सप्रेशन ट्री के रूट के लिए वैकल्पिक टाइटल.

    • कॉलबैक

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

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

      () => void

    • returns

      Promise<void>

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

      यह कॉलबैक, ऑब्जेक्ट से साइडबार अपडेट होने के बाद शुरू होता है.

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

  • setPage

    अमान्य

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

    setPage फ़ंक्शन इस तरह दिखता है: 

    (path: string) => {...}

    • पाथ

      स्ट्रिंग

      साइडबार में दिखाने के लिए, एक्सटेंशन पेज का रिलेटिव पाथ.

SourcesPanel

यह Sources पैनल को दिखाता है.

प्रॉपर्टी

  • onSelectionChanged

    Event<functionvoidvoid>

    यह इवेंट तब ट्रिगर होता है, जब पैनल में कोई ऑब्जेक्ट चुना जाता है.

    onSelectionChanged.addListener फ़ंक्शन इस तरह दिखता है: 

    (callback: function) => {...}

    • कॉलबैक

      फ़ंक्शन

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

      () => void

  • createSidebarPane

    अमान्य

    Promise

    यह पैनल के साइडबार में एक पैनल बनाता है.

    createSidebarPane फ़ंक्शन इस तरह दिखता है: 

    (title: string, callback?: function) => {...}

    • title

      स्ट्रिंग

      साइडबार के कैप्शन में दिखने वाला टेक्स्ट.

    • कॉलबैक

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

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

      (result: ExtensionSidebarPane) => void

      • नतीजा

        ExtensionSidebarPane

        बनाए गए साइडबार पैनल के लिए ExtensionSidebarPane ऑब्जेक्ट.

    • returns

      Promise<ExtensionSidebarPane>

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

      साइडबार बनने पर इस कॉलबैक को शुरू किया जाता है.

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

Theme

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

DevTools में इस्तेमाल की गई थीम.

Enum

"default"
DevTools की डिफ़ॉल्ट थीम. यह हमेशा हल्के रंग वाली थीम होती है.

"dark"
गहरे रंग वाली थीम.

प्रॉपर्टी

elements

एलिमेंट पैनल.

टाइप

ElementsPanel

sources

सोर्स पैनल.

टाइप

SourcesPanel

themeName

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

उपयोगकर्ता की DevTools सेटिंग में सेट की गई रंग वाली थीम का नाम. इन वैल्यू का इस्तेमाल किया जा सकता है: default (डिफ़ॉल्ट) और dark.

टाइप

स्ट्रिंग

तरीके

create()

Promise 
chrome.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
  callback?: function,
): Promise<ExtensionPanel>

एक्सटेंशन पैनल बनाता है.

पैरामीटर

  • title

    स्ट्रिंग

    यह टाइटल, डेवलपर टूलबार में एक्सटेंशन आइकॉन के बगल में दिखता है.

  • iconPath

    स्ट्रिंग

    एक्सटेंशन डायरेक्ट्री के हिसाब से, पैनल के आइकॉन का पाथ.

  • pagePath

    स्ट्रिंग

    एक्सटेंशन डायरेक्ट्री के हिसाब से, पैनल के एचटीएमएल पेज का पाथ.

  • कॉलबैक

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

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

    (panel: ExtensionPanel) => void

    • पैनल

      ExtensionPanel

      बनाए गए पैनल को दिखाने वाला ExtensionPanel ऑब्जेक्ट.

रिटर्न

  • Promise<ExtensionPanel>

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

    पैनल बनाए जाने पर कॉल किया जाने वाला फ़ंक्शन.

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

openResource()

Promise 
chrome.devtools.panels.openResource(
  url: string,
  lineNumber: number,
  columnNumber?: number,
  callback?: function,
): Promise<void>

यह DevTools से, डेवलपर टूल के पैनल में यूआरएल खोलने का अनुरोध करता है.

पैरामीटर

  • url

    स्ट्रिंग

    खोलने के लिए संसाधन का यूआरएल.

  • lineNumber

    संख्या

    इस विकल्प से, रिसॉर्स लोड होने पर स्क्रोल करने के लिए लाइन नंबर तय किया जाता है.

  • columnNumber

    number optional

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

    यह विकल्प, संसाधन लोड होने पर स्क्रोल करने के लिए कॉलम नंबर तय करता है.

  • कॉलबैक

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

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

    () => void

रिटर्न

  • Promise<void>

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

    यह एक ऐसा फ़ंक्शन है जिसे तब कॉल किया जाता है, जब संसाधन लोड हो जाता है.

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

setOpenResourceHandler()

chrome.devtools.panels.setOpenResourceHandler(
  callback?: function,
): void

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

पैरामीटर

  • कॉलबैक

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

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

    (resource: Resource, lineNumber: number) => void

    • रिसॉर्स

      संसाधन

      क्लिक किए गए संसाधन के लिए, devtools.inspectedWindow.Resource ऑब्जेक्ट.

    • lineNumber

      संख्या

      इससे उस संसाधन में लाइन नंबर के बारे में पता चलता है जिस पर क्लिक किया गया था.

setThemeChangeHandler()

Chrome 99 या इसके बाद का वर्शन 
chrome.devtools.panels.setThemeChangeHandler(
  callback?: function,
): void

यह फ़ंक्शन, DevTools में मौजूदा थीम बदलने पर कॉल किया जाता है. हैंडलर को अनसेट करने के लिए, बिना किसी पैरामीटर के तरीके को कॉल करें या पैरामीटर के तौर पर null पास करें.

पैरामीटर

  • कॉलबैक

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

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

    (theme: Theme) => void

    • थीम

      थीम

      DevTools में मौजूदा थीम.