ब्यौरा
अपने एक्सटेंशन को Developer Tools विंडो के यूज़र इंटरफ़ेस (यूआई) के साथ इंटिग्रेट करने के लिए, chrome.devtools.panels
एपीआई का इस्तेमाल करें: अपने पैनल बनाएं, मौजूदा पैनल ऐक्सेस करें, और साइडबार जोड़ें.
हर एक्सटेंशन पैनल और साइडबार को एक अलग एचटीएमएल पेज के तौर पर दिखाया जाता है. सभी एक्सटेंशन पेज दिखाए गए
'डेवलपर टूल' विंडो में, chrome.devtools
API के सभी हिस्सों के साथ-साथ सभी
अन्य एक्सटेंशन API का उपयोग कर सकते हैं.
कॉलबैक फ़ंक्शन इंस्टॉल करने के लिए, devtools.panels.setOpenResourceHandler
तरीके का इस्तेमाल किया जा सकता है
जो संसाधन को खोलने के लिए उपयोगकर्ता अनुरोधों को हैंडल करता है (आम तौर पर,
डेवलपर टूल विंडो). इंस्टॉल किए गए हैंडलर में से ज़्यादा से ज़्यादा एक को कॉल किया जाता है; उपयोगकर्ता निर्दिष्ट कर सकते हैं (
(जैसे, डेवलपर टूल सेटिंग डायलॉग बॉक्स).
खुले अनुरोध. अगर कोई एक्सटेंशन setOpenResourceHandler()
को कई बार कॉल करता है, तो सिर्फ़ आखिरी बार
हैंडलर को बनाए रखा जाएगा.
डेवलपर टूल एपीआई इस्तेमाल करने के बारे में सामान्य जानकारी के लिए, DevTools API की खास जानकारी देखें.
मेनिफ़ेस्ट
उदाहरण
यह कोड 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 टूलबार पर एक्सटेंशन आइकॉन पैनल](https://developer.chrome.com/static/docs/extensions/reference/api/devtools/panels/images/devtools-panels.png?authuser=7&hl=hi)
इस एपीआई को आज़माने के लिए, 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
-
नतीजा
बनाए गए साइडबार पैनल के लिए एक 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
स्ट्रिंग
जब उपयोगकर्ता बटन पर माउस घुमाता है, तब यह टेक्स्ट टूलटिप के तौर पर दिखता है.
-
बंद है
बूलियन
बटन बंद है या नहीं.
-
returns
-
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
-
नतीजा
बनाए गए साइडबार पैनल के लिए एक extensionsSidebarPane ऑब्जेक्ट.
-
-
प्रॉपर्टी
elements
एलिमेंट पैनल.
टाइप
sources
सोर्स पैनल.
टाइप
themeName
उपयोगकर्ता की DevTools सेटिंग में सेट की गई रंग की थीम का नाम. संभावित वैल्यू: default
(डिफ़ॉल्ट) और dark
.
टाइप
स्ट्रिंग
तरीके
create()
chrome.devtools.panels.create(
title: string,
iconPath: string,
pagePath: string,
callback?: function,
)
यह एक्सटेंशन पैनल बनाता है.
पैरामीटर
-
title
स्ट्रिंग
वह टाइटल जो डेवलपर टूल टूलबार में एक्सटेंशन आइकॉन के बगल में दिखता है.
-
iconPath
स्ट्रिंग
एक्सटेंशन डायरेक्ट्री से जुड़े पैनल के आइकॉन का पाथ.
-
pagePath
स्ट्रिंग
एक्सटेंशन डायरेक्ट्री से जुड़े पैनल के एचटीएमएल पेज का पाथ.
-
कॉलबैक
फ़ंक्शन वैकल्पिक
callback
पैरामीटर ऐसा दिखता है:(panel: ExtensionPanel) => void
-
फलक
एक्सटेंशन पैनल ऑब्जेक्ट, बनाए गए पैनल को दिखा रहा है.
-
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
-
संसाधन
क्लिक किए गए संसाधन के लिए
devtools.inspectedWindow.Resource
ऑब्जेक्ट.
-