Deze pagina is vertaald door de Cloud Translation API.

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.

Manifest

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

"devtools_page"

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

Overzicht

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 (doorgaans een klik 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.

Voorbeelden

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");
  }
);

Deze schermafbeelding demonstreert het effect dat de bovenstaande voorbeelden zouden hebben op het venster Developer Tools:

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) => {...}
```
- terugbellen
  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 zijn, 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 onSelectionChanged.addListener -functie ziet er als volgt uit:
```
(callback: function) => {...}
```
- terugbellen
  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.
- terugbellen
  functie optioneel
  De callback parameter ziet er als volgt uit:
```
(result: ExtensionSidebarPane) => void
```
  - resultaat
    ExtensieZijbalkPaan
    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 onHidden.addListener -functie ziet er als volgt uit:
```
(callback: function) => {...}
```
- terugbellen
  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) => {...}
```
- terugbellen
  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) => {...}
```
- terugbellen
  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.
- retourneert
  Knop

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 onHidden.addListener -functie ziet er als volgt uit:
```
(callback: function) => {...}
```
- terugbellen
  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) => {...}
```
- terugbellen
  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.
- terugbellen
  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.
- terugbellen
  functie optioneel
  De callback parameter ziet er als volgt uit:
```
() => void
```
setPagina
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) => {...}
```
- terugbellen
  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.
- terugbellen
  functie optioneel
  De callback parameter ziet er als volgt uit:
```
(result: ExtensionSidebarPane) => void
```
  - resultaat
    ExtensieZijbalkPaan
    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.
terugbellen
functie optioneel
De callback parameter ziet er als volgt uit:
```
(panel: ExtensionPanel) => void
```
- paneel
  Extensiepaneel
  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.
terugbellen
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

terugbellen
functie optioneel
De callback parameter ziet er als volgt uit:
```
(resource: Resource) => void
```
- bron
  Bron
  Een devtools.inspectedWindow.Resource -object voor de bron waarop is geklikt.