ब्यौरा
अपने एक्सटेंशन को डेवलपर टूल विंडो के यूज़र इंटरफ़ेस (यूआई) में इंटिग्रेट करने के लिए, chrome.devtools.panels
API का इस्तेमाल करें: अपने पैनल बनाएं, मौजूदा पैनल ऐक्सेस करें, और साइडबार जोड़ें.
हर एक्सटेंशन पैनल और साइडबार को एक अलग एचटीएमएल पेज के तौर पर दिखाया जाता है. डेवलपर टूल विंडो में दिखाए गए सभी एक्सटेंशन पेजों के पास chrome.devtools
एपीआई के सभी मॉड्यूल के साथ-साथ chrome.extension एपीआई का ऐक्सेस होता है. डेवलपर टूल विंडो में मौजूद पेजों पर अन्य एक्सटेंशन एपीआई उपलब्ध नहीं हैं. हालांकि, कॉन्टेंट स्क्रिप्ट की तरह ही, अपने एक्सटेंशन के बैकग्राउंड पेज पर अनुरोध भेजकर उन्हें शुरू किया जा सकता है.
devtools.panels.setOpenResourceHandler
तरीके का इस्तेमाल करके, उस कॉलबैक फ़ंक्शन को इंस्टॉल किया जा सकता है जो किसी संसाधन को खोलने के लिए, उपयोगकर्ता के अनुरोधों को मैनेज करता है. आम तौर पर, ऐसा किसी संसाधन के लिंक पर क्लिक करके किया जाता है, जो डेवलपर टूल विंडो में मौजूद होता है. इंस्टॉल किए गए ज़्यादातर हैंडलर में से किसी एक को कॉल किया जाता है; उपयोगकर्ता (डेवलपर टूल सेटिंग डायलॉग का इस्तेमाल करके), रिसॉर्स के ओपन अनुरोधों को हैंडल करने के लिए, डिफ़ॉल्ट व्यवहार या एक्सटेंशन के बारे में बता सकते हैं. अगर कोई एक्सटेंशन setOpenResourceHandler()
को कई बार कॉल करता है, तो सिर्फ़ आख��री
हैंडलर को ही कॉल किया जाता है.
Developer Tools API के इस्तेमाल के बारे में सामान्य जानकारी के लिए, DevTool 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");
}
);
यह स्क्रीनशॉट, डेवलपर टूल विंडो पर इस उदाहरण के असर को दिखाता है:
इस एपीआई को आज़माने के लिए, chrome-extension-sample डेटा स्टोर करने की जगह से devtools पैनल एपीआई का उदाहरण इंस्टॉल करें.
टाइप
Button
एक्सटेंशन से बनाया गया बटन.
प्रॉपर्टी
-
onClicked
इवेंट<Functionvoidvoid>
बटन पर क्लिक करने पर सक्रिय होता है.
onClicked.addListener
फ़ंक्शन ऐसा दिखता है:(callback: function) => {...}
-
कॉलबैक
फ़ंक्शन
callback
पैरामीटर ऐसा दिखता है:() => void
-
-
अपडेट करो
void
बटन की विशेषताओं को अपडेट करता है. अगर कुछ तर्क शामिल नहीं किए जाते हैं या
null
होते हैं, तो उनसे जुड़े एट्रिब्यूट अपडेट नहीं होते हैं.update
फ़ंक्शन ऐसा दिखता है:(iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}
-
iconPath
स्ट्रिंग ज़रूरी नहीं
बटन के नए आइकॉन पर जाएं.
-
tooltipText
स्ट्रिंग ज़रूरी नहीं
जब उपयोगकर्ता बटन पर माउस घुमाता है, तब टूलटिप के तौर पर दिखने वाला टेक्स्ट.
-
बंद है
बूलियन ज़रूरी नहीं
बटन बंद है या नहीं.
-
ElementsPanel
एलिमेंट पैनल को दिखाता है.
प्रॉपर्टी
-
onSelectionChanged
इवेंट<Functionvoidvoid>
पैनल में कोई ऑब्जेक्ट चुनने पर सक्रिय होता है.
onSelectionChanged.addListener
फ़ंक्शन ऐसा दिखता है:(callback: function) => {...}
-
कॉलबैक
फ़ंक्शन
callback
पैरामीटर ऐसा दिखता है:() => void
-
-
createSidebarPane
void
पैनल के साइडबार में पैनल बनाता है.
createSidebarPane
फ़ंक्शन ऐसा दिखता है:(title: string, callback?: function) => {...}
-
title
स्ट्रिंग
साइडबार के कैप्शन में दिखने वाला टेक्स्ट.
-
कॉलबैक
फ़ंक्शन ज़रूरी नहीं
callback
पैरामीटर ऐसा दिखता है:(result: ExtensionSidebarPane) => void
-
नतीजा
बनाए गए साइडबार पैनल के लिए, extensionsSidebarPane ऑब्जेक्ट.
-
-
ExtensionPanel
एक्सटेंशन के ज़रिए बनाए गए पैनल के बारे में बताता है.
प्रॉपर्टी
-
onHidden
इवेंट<Functionvoidvoid>
तब सक्रिय होता है, जब उपयोगकर्ता पैनल से बाहर जाता है.
onHidden.addListener
फ़ंक्शन ऐसा दिखता है:(callback: function) => {...}
-
कॉलबैक
फ़ंक्शन
callback
पैरामीटर ऐसा दिखता है:() => void
-
-
onSearch
इवेंट<Functionvoidvoid>
खोज कार्रवाई (किसी नई खोज की शुरुआत, खोज नतीजे का नेविगेशन शुरू होने या खोज के रद्द होने पर) होने पर सक्रिय होता है.
onSearch.addListener
फ़ंक्शन ऐसा दिखता है:(callback: function) => {...}
-
कॉलबैक
फ़ंक्शन
callback
पैरामीटर ऐसा दिखता है:(action: string, queryString?: string) => void
-
किसी खास रूटीन से जुड़ी कार्रवाई
स्ट्रिंग
-
queryString
स्ट्रिंग ज़रूरी नहीं
-
-
-
onShown
इवेंट<Functionvoidvoid>
तब सक्रिय होता है, जब उपयोगकर्ता पैनल पर स्विच करता है.
onShown.addListener
फ़ंक्शन ऐसा दिखता है:(callback: function) => {...}
-
कॉलबैक
फ़ंक्शन
callback
पैरामीटर ऐसा दिखता है:(window: Window) => void
-
विंडो
विंडो
-
-
-
createStatusBarButton
void
पैनल के स्टेटस बार में बटन जोड़ता है.
createStatusBarButton
फ़ंक्शन ऐसा दिखता है:(iconPath: string, tooltipText: string, disabled: boolean) => {...}
-
iconPath
स्ट्रिंग
बटन के आइकॉन का पाथ. फ़ाइल में 64x24 पिक्सल की एक इमेज होनी चाहिए, जिसमें दो 32x24 आइकॉन हों. बायां आइकॉन तब दिखता है, जब बटन को दबाया जाता है. वहीं, बटन को दबाने पर यही आइकॉन दिखता है.
-
tooltipText
स्ट्रिंग
जब उपयोगकर्ता बटन पर माउस घुमाता है, तब टूलटिप के तौर पर दिखने वाला टेक्स्ट.
-
बंद है
boolean
बटन बंद है या नहीं.
-
returns
-
ExtensionSidebarPane
एक्सटेंशन से बनाया गया साइडबार.
प्रॉपर्टी
-
onHidden
इवेंट<Functionvoidvoid>
उपयोगकर्ता के, साइडबार पैनल को होस्ट करने वाले पैनल से बाहर स्विच करने की वजह से, साइडबार पैनल छिपाए जाने पर सक्रिय होता है.
onHidden.addListener
फ़ंक्शन ऐसा दिखता है:(callback: function) => {...}
-
कॉलबैक
फ़ंक्शन
callback
पैरामीटर ऐसा दिखता है:() => void
-
-
onShown
इवेंट<Functionvoidvoid>
यह तब ट्रिगर होता है, जब साइडबार पैनल, उपयोगकर्ता को होस्ट करने वाले पैनल पर स्विच करने की वजह से दिखता है.
onShown.addListener
फ़ंक्शन ऐसा दिखता है:(callback: function) => {...}
-
कॉलबैक
फ़ंक्शन
callback
पैरामीटर ऐसा दिखता है:(window: Window) => void
-
विंडो
विंडो
-
-
-
setExpression
void
यह ऐसा एक्सप्रेशन सेट करता है जिसका आकलन, जांच किए गए पेज में किया जाता है. नतीजा, साइडबार पैनल में दिखता है.
setExpression
फ़ंक्शन ऐसा दिखता है:(expression: string, rootTitle?: string, callback?: function) => {...}
-
एक्सप्रेशन
स्ट्रिंग
जांच किए गए पेज के हिसाब से आकलन करने के लिए एक्सप्रेशन. JavaScript ऑब्जेक्ट और DOM नोड, कंसोल/वॉच की तरह ही बड़े होने वाले ट्री में दिखाए जाते हैं.
-
rootTitle
स्ट्रिंग ज़रूरी नहीं
एक्सप्रेशन ट्री के रूट के लिए एक वैकल्पिक टाइटल.
-
कॉलबैक
फ़ंक्शन ज़रूरी नहीं
callback
पैरामीटर ऐसा दिखता है:() => void
-
-
setHeight
void
साइडबार की ऊंचाई सेट करता है.
setHeight
फ़ंक्शन ऐसा दिखता है:(height: string) => {...}
-
ऊंचाई
स्ट्रिंग
सीएसएस जैसी साइज़ की खास जानकारी, जैसे कि
'100px'
या'12ex'
.
-
-
setObject
void
साइडबार पैनल में दिखाने के लिए, JSON के मुताबिक एक ऑब्जेक्ट सेट करता है.
setObject
फ़ंक्शन ऐसा दिखता है:(jsonObject: string, rootTitle?: string, callback?: function) => {...}
-
jsonObject
स्ट्रिंग
जांच किए गए पेज के हिसाब से दिखाया जाने वाला ऑब्जेक्ट. इसका आकलन, कॉलर (एपीआई क्लाइंट) के हिसाब से किया जाता है.
-
rootTitle
स्ट्रिंग ज़रूरी नहीं
एक्सप्रेशन ट्री के रूट के लिए एक वैकल्पिक टाइटल.
-
कॉलबैक
फ़ंक्शन ज़रूरी नहीं
callback
पैरामीटर ऐसा दिखता है:() => void
-
-
setPage
void
साइडबार पैनल में दिखाने के लिए एचटीएमएल पेज सेट करता है.
setPage
फ़ंक्शन ऐसा दिखता है:(path: string) => {...}
-
पाथ
स्ट्रिंग
साइडबार में दिखाने के लिए, किसी एक्सटेंशन पेज का मिलता-जुलता पाथ.
-
SourcesPanel
सोर्स पैनल को दिखाता है.
प्रॉपर्टी
-
onSelectionChanged
इवेंट<Functionvoidvoid>
पैनल में कोई ऑब्जेक्ट चुनने पर सक्रिय होता है.
onSelectionChanged.addListener
फ़ंक्शन ऐसा दिखता है:(callback: function) => {...}
-
कॉलबैक
फ़ंक्शन
callback
पैरामीटर ऐसा दिखता है:() => void
-
-
createSidebarPane
void
पैनल के साइडबार में पैनल बनाता है.
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
-
पैनल
बनाया गया पैनल दिखाने वाला Anपैनल एक्सटेंशन ऑब्जेक्ट.
-
openResource()
chrome.devtools.panels.openResource(
url: string,
lineNumber: number,
columnNumber?: number,
callback?: function,
)
डेवलपर टूल पैनल में यूआरएल खोलने के लिए, DevTools का अनुरोध करता है.
पैरामीटर
-
यूआरएल
स्ट्रिंग
खोले जाने वाले संसाधन का यूआरएल.
-
lineNumber
नंबर
इस लाइन नंबर से यह तय होता है कि रिसॉर्स लोड होने पर, किस लाइन नंबर तक स्क्रोल किया जा सकता है.
-
columnNumber
नंबर ज़रूरी नहीं
Chrome 114 और इसके बाद के वर्शनइस कॉलम की संख्या बता��ा है कि संसाधन लोड होने पर किस कॉलम तक स्क्रोल किया जा सकता है.
-
कॉलबैक
फ़ंक्शन ज़रूरी नहीं
callback
पैरामीटर ऐसा दिखता है:() => void
setOpenResourceHandler()
chrome.devtools.panels.setOpenResourceHandler(
callback?: function,
)
इस नीति से, उस फ़ंक्शन के बारे में पता चलता है जिसे तब कॉल किया जाना है, जब उपयोगकर्ता, डेवलपर टूल की विंडो में मौजूद किसी संसाधन के लिंक पर क्लिक करता है. हैंडलर को अनसेट करने के लिए, बिना पैरामीटर वाले तरीके को कॉल करें या पैरामीटर के तौर पर शून्य को पास करें.
पैरामीटर
-
कॉलबैक
फ़ंक्शन ज़रूरी नहीं
callback
पैरामीटर ऐसा दिखता है:(resource: Resource) => void
-
संसाधन
क्लिक किए गए संसाधन के लिए कोई
devtools.inspectedWindow.Resource
ऑब्जेक्ट.
-