chrome.devtools.panels

ब्यौरा

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

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

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

Developer Tools API के इस्तेमाल के बारे में सामान्य जानकारी के लिए, DevTool API की खास जानकारी देखें.

मेनिफ़ेस्ट

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

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

इस एपीआई को आज़माने के लिए, 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

    • नतीजा

      ExtensionSidebarPane

      बनाए गए साइडबार पैनल के लिए, 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

    • नतीजा

      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

    बनाया गया पैनल दिखाने वाला 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 ऑब्जेक्ट.