chrome.devtools.panels

ब्यौरा

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

मेनिफ़ेस्ट

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

"devtools_page"

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

खास जानकारी

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

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

उदाहरण

यह कोड 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 टूलबार पर एक्सटेंशन आइकॉन पैनल

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

टाइप

Button

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

प्रॉपर्टी

  • onClicked

    इवेंट<Functionvoid>

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

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

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

    • कॉलबैक

      फ़ंक्शन

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

      () => void

  • अपडेट करें

    अमान्य

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

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

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

    • iconPath

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

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

    • tooltipText

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

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

    • बंद है

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

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

ElementsPanel

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

प्रॉपर्टी

  • onSelectionChanged

    इवेंट<Functionvoid>

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

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

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

    • कॉलबैक

      फ़ंक्शन

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

      () => void

  • createSidebarPane

    अमान्य

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

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

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

    • title

      स्ट्रिंग

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

    • कॉलबैक

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

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

      (result: ExtensionSidebarPane) => void

      • नतीजा

        ExtensionSidebarPane

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

ExtensionPanel

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

प्रॉपर्टी

  • onHidden

    इवेंट<Functionvoid>

    उपयोगकर्ता के पैनल से दूर स्विच करने पर सक्रिय होता है.

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

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

    • कॉलबैक

      फ़ंक्शन

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

      () => void

  • onSearch

    इवेंट<Functionvoid>

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

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

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

    • कॉलबैक

      फ़ंक्शन

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

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

      • ऐक्शन गेम

        स्ट्रिंग

      • queryString

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

  • onShown

    इवेंट<Functionvoid>

    उपयोगकर्ता के पैनल पर स्विच करने पर सक्रिय होता है.

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

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

    • कॉलबैक

      फ़ंक्शन

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

      (window: Window) => void

      • विंडो

        विंडो

  • createStatusBarButton

    अमान्य

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

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

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

    • iconPath

      स्ट्रिंग

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

    • tooltipText

      स्ट्रिंग

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

    • बंद है

      बूलियन

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

ExtensionSidebarPane

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

प्रॉपर्टी

  • onHidden

    इवेंट<Functionvoid>

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

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

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

    • कॉलबैक

      फ़ंक्शन

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

      () => void

  • onShown

    इवेंट<Functionvoid>

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

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

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

    • कॉलबैक

      फ़ंक्शन

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

      (window: Window) => void

      • विंडो

        विंडो

  • setExpression

    अमान्य

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

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

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

    • एक्सप्रेशन

      स्ट्रिंग

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

    • 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

    इवेंट<Functionvoid>

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

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

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

    • कॉलबैक

      फ़ंक्शन

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

      () => void

  • createSidebarPane

    अमान्य

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

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

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

    • title

      स्ट्रिंग

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

    • कॉलबैक

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

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

      (result: ExtensionSidebarPane) => void

      • नतीजा

        ExtensionSidebarPane

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

प्रॉपर्टी

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

      एक्सटेंशन पैनल ऑब्जेक्ट, बनाए गए पैनल को दिखा रहा है.

openResource()

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

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

पैरामीटर

  • url

    स्ट्रिंग

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

  • lineNumber

    संख्या

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

  • columnNumber

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

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

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

  • कॉलबैक

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

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

    () => void

setOpenResourceHandler()

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

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

पैरामीटर

  • कॉलबैक

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

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

    (resource: Resource) => void