chrome.devtools.panels

Beschrijving

Gebruik de chrome.devtools.panels API om je extensie te integreren in de UI van het venster Ontwikkelaarstools: maak je eigen deelvensters, open bestaande deelvensters en voeg zijbalken toe.

Elk extensievenster en elke zijbalk wordt getoond als een afzonderlijke HTML-pagina. Alle extensiepagina's die worden weergegeven in het venster Tools voor ontwikkelaars, hebben toegang tot alle delen van de chrome.devtools API en alle andere extensie-API's.

Je kunt de methode devtools.panels.setOpenResourceHandler gebruiken om een callbackfunctie te installeren die gebruikersverzoeken verwerkt om een bron te openen (meestal een klik op een bronlink in het venster Tools voor ontwikkelaars). Maximaal één van de geïnstalleerde handlers wordt aangeroepen. Gebruikers kunnen (via het dialoogvenster Instellingen voor tools voor ontwikkelaars) het standaardgedrag of een extensie opgeven om openstaande verzoeken voor bronnen te verwerken. Als een extensie setOpenResourceHandler() meerdere keren aanroept, wordt alleen de laatste handler bewaard.

Ga naar Overzicht van DevTools API's voor een algemene inleiding over het gebruik van API's voor ontwikkelaarstools.

Manifest

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

"devtools_page"

Voorbeeld

De volgende code voegt een deelvenster toe dat is opgenomen in Panel.html, vertegenwoordigd door FontPicker.png op de werkbalk Hulpprogramma's voor ontwikkelaars en gelabeld als Lettertypekiezer:

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

De volgende code voegt een zijbalkvenster toe dat is opgenomen in Sidebar.html en de titel Font Properties heeft aan het deelvenster Elementen en stelt de hoogte in op 8ex:

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

Het screenshot illustreert het effect dat dit voorbeeld heeft op het venster Hulpprogramma's voor ontwikkelaars:

Deelvenster met extensie-icoon op de DevTools-werkbalk
Deelvenster met extensie-iconen op de DevTools-werkbalk.

Als je deze API wilt proberen, installeer je het voorbeeld van de devtools panels API uit de repository chrome-extension-samples.

Typen

Button

Een knop die door de extensie is gemaakt.

Eigenschappen

  • onClicked

    Event<functionvoidvoid>

    Wordt geactiveerd als er op de knop wordt geklikt.

    De functie onClicked.addListener ziet er zo uit: 

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

    • callback

      functie

      De parameter callback ziet er zo uit: 

      () => void

  • update

    void

    Updatet de kenmerken van de knop. Als sommige argumenten worden weggelaten of null zijn, worden de bijbehorende kenmerken niet geüpdatet.

    De functie update ziet er zo uit: 

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

    • iconPath

      tekenreeks optioneel

      Pad naar het nieuwe icoon van de knop.

    • tooltipText

      tekenreeks optioneel

      Tekst die als tooltip wordt getoond wanneer de gebruiker de muisaanwijzer op de knop plaatst.

    • uitgezet

      booleaans optioneel

      Of de knop is uitgezet.

ElementsPanel

Vertegenwoordigt het deelvenster Elementen.

Eigenschappen

  • onSelectionChanged

    Event<functionvoidvoid>

    Wordt geactiveerd als er een object wordt geselecteerd in het deelvenster.

    De functie onSelectionChanged.addListener ziet er zo uit: 

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

    • callback

      functie

      De parameter callback ziet er zo uit: 

      () => void

  • createSidebarPane

    ongeldig

    Maakt een deelvenster in de zijbalk van het deelvenster.

    De functie createSidebarPane ziet er zo uit: 

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

    • titel

      tekenreeks

      Tekst die wordt getoond in het bijschrift van de zijbalk.

    • returns

      Promise<ExtensionSidebarPane>

      Chrome 152+

      Een callback die wordt aangeroepen als de zijbalk wordt gemaakt.

ExtensionPanel

Staat voor een deelvenster dat is gemaakt door een extensie.

Eigenschappen

  • onHidden

    Event<functionvoidvoid>

    Wordt geactiveerd als de gebruiker het deelvenster verlaat.

    De functie onHidden.addListener ziet er zo uit: 

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

    • callback

      functie

      De parameter callback ziet er zo uit: 

      () => void

  • onSearch

    Event<functionvoidvoid>

    Wordt geactiveerd bij een zoekactie (start van een nieuwe zoekopdracht, navigatie door zoekresultaten of annulering van een zoekopdracht).

    De functie onSearch.addListener ziet er zo uit: 

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

    • callback

      functie

      De parameter callback ziet er zo uit: 

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

      • actie

        tekenreeks

      • queryString

        tekenreeks optioneel

  • onShown

    Event<functionvoidvoid>

    Wordt geactiveerd als de gebruiker naar het deelvenster overschakelt.

    De functie onShown.addListener ziet er zo uit: 

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

    • callback

      functie

      De parameter callback ziet er zo uit: 

      (window: Window) => void

      • venster

        Venster

  • createStatusBarButton

    void

    Voegt een knop toe aan de statusbalk van het deelvenster.

    De functie createStatusBarButton ziet er zo uit: 

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

    • iconPath

      tekenreeks

      Pad naar het icoon van de knop. Het bestand moet een afbeelding van 64 x 24 pixels bevatten die bestaat uit 2 iconen van 32 x 24 pixels. Het linkericoon wordt gebruikt als de knop inactief is. Het rechtericoon wordt getoond als de knop wordt ingedrukt.

    • tooltipText

      tekenreeks

      Tekst die als tooltip wordt getoond wanneer de gebruiker de muisaanwijzer op de knop plaatst.

    • uitgezet

      booleaans

      Of de knop is uitgezet.

  • weergeven

    void

    Chrome 140+ browser.* sinds Chrome 152

    Toont het deelvenster door het bijbehorende tabblad te activeren.

    De functie show ziet er zo uit: 

    () => {...}

ExtensionSidebarPane

Een zijbalk die is gemaakt door de extensie.

Eigenschappen

  • onHidden

    Event<functionvoidvoid>

    Wordt geactiveerd als het zijbalkdeelvenster wordt verborgen omdat de gebruiker overschakelt van het deelvenster dat het zijbalkdeelvenster host.

    De functie onHidden.addListener ziet er zo uit: 

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

    • callback

      functie

      De parameter callback ziet er zo uit: 

      () => void

  • onShown

    Event<functionvoidvoid>

    Wordt geactiveerd als het zijbalkvenster zichtbaar wordt omdat de gebruiker overschakelt naar het deelvenster waarin het wordt gehost.

    De functie onShown.addListener ziet er zo uit: 

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

    • callback

      functie

      De parameter callback ziet er zo uit: 

      (window: Window) => void

      • venster

        Venster

  • setExpression

    void

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

    De functie setExpression ziet er zo uit: 

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

    • expressie

      tekenreeks

      Een expressie die moet worden geëvalueerd in de context van de geïnspecteerde pagina. JavaScript-objecten en DOM-nodes worden getoond in een uitvouwbare boomstructuur die lijkt op de console/watch.

    • rootTitle

      tekenreeks optioneel

      Een optionele titel voor de root van de expressiestructuur.

    • returns

      Promise<void>

      Chrome 152+

      Een callback die wordt aangeroepen nadat het zijbalkvenster is geüpdatet met de resultaten van de expressie-evaluatie.

  • setHeight

    void

    Hiermee stel je de hoogte van de zijbalk in.

    De functie setHeight ziet er zo uit: 

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

    • hoogte

      tekenreeks

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

  • setObject

    void

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

    De functie setObject ziet er zo uit: 

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

    • jsonObject

      tekenreeks

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

    • rootTitle

      tekenreeks optioneel

      Een optionele titel voor de root van de expressiestructuur.

    • returns

      Promise<void>

      Chrome 152+

      Een callback die wordt aangeroepen nadat de zijbalk is geüpdatet met het object.

  • setPage

    void

    Stelt een HTML-pagina in die moet worden weergegeven in het zijbalkdeelvenster.

    De functie setPage ziet er zo uit: 

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

    • pad

      tekenreeks

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

SourcesPanel

Het deelvenster Bronnen.

Eigenschappen

  • onSelectionChanged

    Event<functionvoidvoid>

    Wordt geactiveerd als er een object wordt geselecteerd in het deelvenster.

    De functie onSelectionChanged.addListener ziet er zo uit: 

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

    • callback

      functie

      De parameter callback ziet er zo uit: 

      () => void

  • createSidebarPane

    ongeldig

    Maakt een deelvenster in de zijbalk van het deelvenster.

    De functie createSidebarPane ziet er zo uit: 

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

    • titel

      tekenreeks

      Tekst die wordt getoond in het bijschrift van de zijbalk.

    • returns

      Promise<ExtensionSidebarPane>

      Chrome 152+

      Een callback die wordt aangeroepen als de zijbalk wordt gemaakt.

Theme

Chrome 99+ browser.* sinds Chrome 152

Thema dat wordt gebruikt door DevTools.

Enum

"default"
Standaard DevTools-thema. Dit is altijd het lichte thema.

"dark"
Donker thema.

Eigenschappen

elements

Het deelvenster Elementen.

Type

ElementsPanel

sources

deelvenster Bronnen.

Type

SourcesPanel

themeName

Chrome 59 of hoger browser.* sinds Chrome 152

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

Type

tekenreeks

Methoden

create()

browser.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
): Promise<ExtensionPanel>

Maakt een extensievenster.

Parameters

  • titel

    tekenreeks

    Titel die naast het extensie-icoon wordt getoond in de werkbalk van de tools voor ontwikkelaars.

  • iconPath

    tekenreeks

    Pad van het icoon van het deelvenster ten opzichte van de extensiemap.

  • pagePath

    tekenreeks

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

Retourzendingen

  • Promise<ExtensionPanel>

    Chrome 152+

    Een functie die wordt aangeroepen als het deelvenster wordt gemaakt.

openResource()

browser.devtools.panels.openResource(
  url: string,
  lineNumber: number,
  columnNumber?: number,
): Promise<void>

Vraagt DevTools om een URL te openen in een deelvenster met tools voor ontwikkelaars.

Parameters

  • url

    tekenreeks

    De URL van de bron die moet worden geopend.

  • lineNumber

    getal

    Hiermee geef je het regelnummer aan waarnaar moet worden gescrold als de bron is geladen.

  • columnNumber

    number optioneel

    Chrome 114 of hoger browser.* sinds Chrome 152

    Geeft het kolomnummer aan waarnaar moet worden gescrold als de bron is geladen.

Retourzendingen

  • Promise<void>

    Chrome 152+

    Een functie die wordt aangeroepen als de bron is geladen.

setOpenResourceHandler()

browser.devtools.panels.setOpenResourceHandler(
  callback?: function,
): void

Hiermee geef je de functie aan die moet worden aangeroepen als de gebruiker op een bronlink klikt in het venster Tools voor ontwikkelaars. Als u de handler wilt verwijderen, roept u de methode aan zonder parameters of geeft u null door als parameter.

Parameters

  • callback

    functie optioneel

    De parameter callback ziet er zo uit: 

    (resource: Resource, lineNumber: number) => void

setThemeChangeHandler()

Chrome 99+ browser.* sinds Chrome 152 
browser.devtools.panels.setThemeChangeHandler(
  callback?: function,
): void

Hiermee wordt de functie aangegeven die moet worden aangeroepen als het huidige thema verandert in DevTools. Als u de handler ongedaan wilt maken, roept u de methode aan zonder parameters of geeft u null door als parameter.

Parameters

  • callback

    functie optioneel

    De parameter callback ziet er zo uit: 

    (theme: Theme) => void

    • thema

      Thema

      Huidig thema in DevTools.