chrome.devtools.panels

ब्यौरा

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

मेनिफ़ेस्ट

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

"devtools_page"

डेवलपर टूल के एपीआई इस्तेमाल करने के बारे में सामान्य जानकारी पाने के लिए, 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

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

प्रॉपर्टी

  • onSelectionChanged

    Event<functionvoidvoid>

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

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

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

    • कॉलबैक

      फ़ंक्शन

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

      () => void

  • createSidebarPane

    अमान्य

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

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

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

    • title

      स्ट्रिंग

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

    • कॉलबैक

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

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

      (result: ExtensionSidebarPane) => void

      • नतीजा

        ExtensionSidebarPane

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

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

    अमान्य

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

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

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

    • एक्सप्रेशन

      स्ट्रिंग

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

    • rootTitle

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

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

    • कॉलबैक

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

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

      () => void

  • setHeight

    अमान्य

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

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

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

    • ऊंचाई

      स्ट्रिंग

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

  • setObject

    अमान्य

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

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

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

    • jsonObject

      स्ट्रिंग

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

    • rootTitle

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

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

    • कॉलबैक

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

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

      () => void

  • setPage

    अमान्य

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

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

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

    • पाथ

      स्ट्रिंग

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

SourcesPanel

यह सोर्स पैनल को दिखाता है.

प्रॉपर्टी

  • onSelectionChanged

    Event<functionvoidvoid>

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

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

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

    • कॉलबैक

      फ़ंक्शन

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

      () => void

  • createSidebarPane

    अमान्य

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

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

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

    • title

      स्ट्रिंग

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

    • कॉलबैक

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

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

      (result: ExtensionSidebarPane) => void

      • नतीजा

        ExtensionSidebarPane

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

Theme

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

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

Enum

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

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

प्रॉपर्टी

elements

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

टाइप

ElementsPanel

sources

सोर्स पैनल.

टाइप

SourcesPanel

themeName

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

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

टाइप

स्ट्रिंग

तरीके

create()

chrome.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
  callback?: function,
): void

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

पैरामीटर

  • title

    स्ट्रिंग

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

  • iconPath

    स्ट्रिंग

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

  • pagePath

    स्ट्रिंग

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

  • कॉलबैक

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

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

    (panel: ExtensionPanel) => void

    • फलक

      ExtensionPanel

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

openResource()

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

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

पैरामीटर

  • url

    स्ट्रिंग

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

  • lineNumber

    संख्या

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

  • columnNumber

    number ज़रूरी नहीं

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

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

  • कॉलबैक

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

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

    () => void

setOpenResourceHandler()

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

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

पैरामीटर

  • कॉलबैक

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

    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 में मौजूदा थीम.