chrome.devtools.panels

ब्यौरा

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

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

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

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

मेनिफ़ेस्ट

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

"devtools_page"

उदाहरण

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

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

नीचे दिया गया कोड, एलिमेंट पैनल में Sidebar.html में मौजूद और फ़ॉन्ट प्रॉपर्टी शीर्षक वाला साइडबार पैनल जोड़ता है. इसके बाद, इसकी ऊंचाई को 8ex पर सेट करता है:

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

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

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

इस एपीआई को आज़माने के लिए, chrome-extension-samples रिपॉज़िटरी से devtools पैनल एपीआई का उदाहरण इंस्टॉल करें.

टाइप

Button

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

प्रॉपर्टी

  • onClicked

    Event<functionvoidvoid>

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

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

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

    • कॉलबैक

      फ़ंक्शन

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

      () => void

  • अपडेट करें

    अमान्य

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

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

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

    • iconPath

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

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

    • tooltipText

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

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

    • बंद है

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

      बटन बंद है या नहीं.

ElementsPanel

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

प्रॉपर्टी

  • 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

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

  • onShown

    Event<functionvoidvoid>

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

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

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

    • कॉलबैक

      फ़ंक्शन

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

      (window: Window) => void

      • विंडो

        विंडो

  • createStatusBarButton

    अमान्य

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

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

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

    • iconPath

      स्ट्रिंग

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

    • tooltipText

      स्ट्रिंग

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

    • बंद है

      बूलियन

      बटन बंद है या नहीं.

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

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

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

    • कॉलबैक

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

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

      () => void

  • setHeight

    अमान्य

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

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

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

    • ऊंचाई

      स्ट्रिंग

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

  • setObject

    अमान्य

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

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

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

    • jsonObject

      स्ट्रिंग

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

    • rootTitle

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

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

    • कॉलबैक

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

      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 ऑब्जेक्ट.

प्रॉपर्टी

elements

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

टाइप

ElementsPanel

sources

सोर्स पैनल.

टाइप

SourcesPanel

themeName

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

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

टाइप

स्ट्रिंग

तरीके

create()

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

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

पैरामीटर

  • title

    स्ट्रिंग

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

  • iconPath

    स्ट्रिंग

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

  • pagePath

    स्ट्रिंग

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

  • कॉलबैक

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

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

    (panel: ExtensionPanel) => void

    • फलक

      ExtensionPanel

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

openResource()

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

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

पैरामीटर

  • url

    स्ट्रिंग

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

  • lineNumber

    संख्या

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

  • columnNumber

    number ज़रूरी नहीं

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

    यह उस कॉलम नंबर की जानकारी देता है जिस पर संसाधन लोड होने के बाद स्क्रोल किया जाना है.

  • कॉलबैक

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

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

    () => void

setOpenResourceHandler()

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

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

पैरामीटर

  • कॉलबैक

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

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

    (resource: Resource) => void