chrome.devtools.panels

Beschrijving

Gebruik de chrome.devtools.panels API om uw extensie te integreren in de gebruikersinterface van het Developer Tools-venster: maak uw eigen panelen, krijg toegang tot bestaande panelen en voeg zijbalken toe.

Elk extensiepaneel en zijbalk wordt weergegeven als een afzonderlijke HTML-pagina. Alle extensiepagina's die worden weergegeven in het venster Ontwikkelaarstools hebben toegang tot alle modules in chrome.devtools API, evenals tot de chrome.extension API. Andere extensie-API's zijn niet beschikbaar voor de pagina's in het venster Developer Tools, maar u kunt ze oproepen door een verzoek te sturen naar de achtergrondpagina van uw extensie, op dezelfde manier als hoe dit wordt gedaan in de inhoudsscripts .

U kunt de methode devtools.panels.setOpenResourceHandler gebruiken om een ​​callback-functie te installeren die gebruikersverzoeken om een ​​bron te openen afhandelt (meestal klikt u op een bronkoppeling in het venster Developer Tools). Hooguit wordt één van de geïnstalleerde handlers aangeroepen; gebruikers kunnen (met behulp van het dialoogvenster Instellingen voor ontwikkelaarstools) het standaardgedrag of een extensie opgeven om open verzoeken voor bronnen af ​​te handelen. Als een extensie setOpenResourceHandler() meerdere keren aanroept, wordt alleen de laatste handler behouden.

Zie het overzicht van DevTools API's voor een algemene inleiding tot het gebruik van Developer Tools API's.

Manifest

De volgende sleutels moeten in het manifest worden gedeclareerd om deze API te kunnen gebruiken.

"devtools_page"

Voorbeeld

De volgende code voegt een paneel toe in Panel.html , vertegenwoordigd door FontPicker.png op de werkbalk Developer Tools en gelabeld als Font Picker :

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

De volgende code voegt een zijbalkvenster in Sidebar.html met de titel Lettertype-eigenschappen toe aan het paneel Elementen, en stelt vervolgens de hoogte in op 8ex :

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

De schermafbeelding illustreert het effect dat dit voorbeeld zou hebben op het venster Developer Tools:

Extensiepictogrampaneel op de DevTools-werkbalk
Extensiepictogrampaneel op de DevTools-werkbalk.

Om deze API te proberen, installeert u het devtools panels API-voorbeeld uit de chrome-extension-samples- repository.

Soorten

Button

Een knop gemaakt door de extensie.

Eigenschappen

  • opgeklikt

    Gebeurtenis<functionvoidvoid>

    Wordt geactiveerd wanneer op de knop wordt geklikt.

    De onClicked.addListener -functie ziet er als volgt uit: 

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

    • Bel terug

      functie

      De callback parameter ziet er als volgt uit: 

      ()=>void

  • update

    leegte

    Werkt de kenmerken van de knop bij. Als sommige argumenten worden weggelaten of null , worden de overeenkomstige attributen niet bijgewerkt.

    De update ziet er als volgt uit: 

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

    • iconPad

      tekenreeks optioneel

      Pad naar het nieuwe pictogram van de knop.

    • tooltipTekst

      tekenreeks optioneel

      Tekst die wordt weergegeven als tooltip wanneer de gebruiker de muis over de knop beweegt.

    • gehandicapt

      Booleaans optioneel

      Of de knop is uitgeschakeld.

ElementsPanel

Vertegenwoordigt het paneel Elementen.

Eigenschappen

  • onSelectieGewijzigd

    Gebeurtenis<functionvoidvoid>

    Wordt geactiveerd wanneer een object in het paneel wordt geselecteerd.

    De functie onSelectionChanged.addListener ziet er als volgt uit: 

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

    • Bel terug

      functie

      De callback parameter ziet er als volgt uit: 

      ()=>void

  • createSidebarPane

    leegte

    Creëert een venster in de zijbalk van het paneel.

    De createSidebarPane -functie ziet er als volgt uit: 

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

    • titel

      snaar

      Tekst die wordt weergegeven in het bijschrift in de zijbalk.

    • Bel terug

      functie optioneel

      De callback parameter ziet er als volgt uit: 

      (result: ExtensionSidebarPane)=>void

      • Een ExtensionSidebarPane-object voor het gemaakte zijbalkvenster.

ExtensionPanel

Vertegenwoordigt een paneel dat is gemaakt door uitbreiding.

Eigenschappen

  • opVerborgen

    Gebeurtenis<functionvoidvoid>

    Wordt geactiveerd wanneer de gebruiker het paneel verlaat.

    De functie onHidden.addListener ziet er als volgt uit: 

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

    • Bel terug

      functie

      De callback parameter ziet er als volgt uit: 

      ()=>void

  • opZoeken

    Gebeurtenis<functionvoidvoid>

    Wordt geactiveerd na een zoekactie (start van een nieuwe zoekopdracht, navigatie in zoekresultaten of zoekopdracht die wordt geannuleerd).

    De onSearch.addListener -functie ziet er als volgt uit: 

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

    • Bel terug

      functie

      De callback parameter ziet er als volgt uit: 

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

      • actie

        snaar

      • queryString

        tekenreeks optioneel

  • opGetoond

    Gebeurtenis<functionvoidvoid>

    Wordt geactiveerd wanneer de gebruiker naar het paneel overschakelt.

    De onShown.addListener -functie ziet er als volgt uit: 

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

    • Bel terug

      functie

      De callback parameter ziet er als volgt uit: 

      (window: Window)=>void

      • raam

        Raam

  • createStatusBarButton

    leegte

    Voegt een knop toe aan de statusbalk van het paneel.

    De createStatusBarButton -functie ziet er als volgt uit: 

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

    • iconPad

      snaar

      Pad naar het pictogram van de knop. Het bestand moet een afbeelding van 64x24 pixels bevatten, bestaande uit twee pictogrammen van 32x24. Het linkerpictogram wordt gebruikt als de knop inactief is; het rechterpictogram wordt weergegeven wanneer de knop wordt ingedrukt.

    • tooltipTekst

      snaar

      Tekst die wordt weergegeven als tooltip wanneer de gebruiker de muis over de knop beweegt.

    • gehandicapt

      Booleaans

      Of de knop is uitgeschakeld.

ExtensionSidebarPane

Een zijbalk gemaakt door de extensie.

Eigenschappen

  • opVerborgen

    Gebeurtenis<functionvoidvoid>

    Wordt geactiveerd wanneer het zijbalkvenster verborgen raakt als gevolg van het feit dat de gebruiker overschakelt van het paneel waarin het zijbalkvenster is gehost.

    De functie onHidden.addListener ziet er als volgt uit: 

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

    • Bel terug

      functie

      De callback parameter ziet er als volgt uit: 

      ()=>void

  • opGetoond

    Gebeurtenis<functionvoidvoid>

    Wordt geactiveerd wanneer het zijbalkvenster zichtbaar wordt als gevolg van het overschakelen van de gebruiker naar het paneel waarin het wordt gehost.

    De onShown.addListener -functie ziet er als volgt uit: 

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

    • Bel terug

      functie

      De callback parameter ziet er als volgt uit: 

      (window: Window)=>void

      • raam

        Raam

  • setExpressie

    leegte

    Stelt een expressie in die wordt geëvalueerd binnen de geïnspecteerde pagina. Het resultaat wordt weergegeven in het zijbalkvenster.

    De setExpression -functie ziet er als volgt uit: 

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

    • uitdrukking

      snaar

      Een expressie die moet worden geëvalueerd in de context van de geïnspecteerde pagina. JavaScript-objecten en DOM-knooppunten worden weergegeven in een uitbreidbare boom, vergelijkbaar met de console/watch.

    • hoofdtitel

      tekenreeks optioneel

      Een optionele titel voor de hoofdmap van de expressieboom.

    • Bel terug

      functie optioneel

      De callback parameter ziet er als volgt uit: 

      ()=>void

  • setHoogte

    leegte

    Stelt de hoogte van de zijbalk in.

    De setHeight -functie ziet er als volgt uit: 

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

    • hoogte

      snaar

      Een CSS-achtige groottespecificatie, zoals '100px' of '12ex' .

  • setObject

    leegte

    Stelt in dat een JSON-compatibel object wordt weergegeven in het zijbalkvenster.

    De setObject functie ziet er als volgt uit: 

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

    • jsonObject

      snaar

      Een object dat moet worden weergegeven in de context van de geïnspecteerde pagina. Geëvalueerd in de context van de beller (API-client).

    • hoofdtitel

      tekenreeks optioneel

      Een optionele titel voor de hoofdmap van de expressieboom.

    • Bel terug

      functie optioneel

      De callback parameter ziet er als volgt uit: 

      ()=>void

  • zet pagina

    leegte

    Stelt in dat een HTML-pagina wordt weergegeven in het zijbalkvenster.

    De setPage functie ziet er als volgt uit: 

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

    • pad

      snaar

      Relatief pad van een extensiepagina die in de zijbalk moet worden weergegeven.

SourcesPanel

Vertegenwoordigt het paneel Bronnen.

Eigenschappen

  • onSelectieGewijzigd

    Gebeurtenis<functionvoidvoid>

    Wordt geactiveerd wanneer een object in het paneel wordt geselecteerd.

    De functie onSelectionChanged.addListener ziet er als volgt uit: 

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

    • Bel terug

      functie

      De callback parameter ziet er als volgt uit: 

      ()=>void

  • createSidebarPane

    leegte

    Creëert een venster in de zijbalk van het paneel.

    De createSidebarPane -functie ziet er als volgt uit: 

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

    • titel

      snaar

      Tekst die wordt weergegeven in het bijschrift in de zijbalk.

    • Bel terug

      functie optioneel

      De callback parameter ziet er als volgt uit: 

      (result: ExtensionSidebarPane)=>void

      • Een ExtensionSidebarPane-object voor het gemaakte zijbalkvenster.

Eigenschappen

elements

Elementen paneel.

Type

ElementenPanel

sources

Bronnenpaneel.

Type

BronnenPanel

themeName

Chroom 59+

De naam van het kleurthema dat is ingesteld in de DevTools-instellingen van de gebruiker. Mogelijke waarden: default (de standaard) en dark .

Type

snaar

Methoden

create()

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

Creëert een uitbreidingspaneel.

Parameters

  • titel

    snaar

    Titel die wordt weergegeven naast het extensiepictogram op de werkbalk Ontwikkelaarstools.

  • iconPad

    snaar

    Pad van het paneelpictogram ten opzichte van de extensiemap.

  • paginaPad

    snaar

    Pad van de HTML-pagina van het paneel ten opzichte van de extensiemap.

  • Bel terug

    functie optioneel

    De callback parameter ziet er als volgt uit: 

    (panel: ExtensionPanel)=>void

    • Een ExtensionPanel-object dat het gemaakte paneel vertegenwoordigt.

openResource()

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

Vraagt ​​DevTools om een ​​URL te openen in een paneel met ontwikkelaarstools.

Parameters

  • URL

    snaar

    De URL van de bron die moet worden geopend.

  • lijnnummer

    nummer

    Specificeert het regelnummer waarnaar moet worden gescrolld wanneer de bron wordt geladen.

  • kolomNummer

    nummer optioneel

    Chroom 114+

    Specificeert het kolomnummer waarnaar moet worden gescrolld wanneer de bron wordt geladen.

  • Bel terug

    functie optioneel

    De callback parameter ziet er als volgt uit: 

    ()=>void

setOpenResourceHandler()

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

Specificeert de functie die moet worden aangeroepen wanneer de gebruiker op een bronkoppeling in het venster Ontwikkelaarshulpmiddelen klikt. Om de handler uit te schakelen, roept u de methode zonder parameters aan of geeft u null als parameter door.

Parameters