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 Developer Tools hebben toegang tot alle delen van de chrome.devtools
API, evenals tot alle andere extensie-API's.
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](https://developer.chrome.google.cn/static/docs/extensions/reference/api/devtools/panels/images/devtools-panels.png?authuser=8&hl=nl)
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 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
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) => {...}
- 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
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) => {...}
- 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
Een ExtensionSidebarPane-object voor het gemaakte zijbalkvenster.
Eigenschappen
elements
Elementen paneel.
Type
sources
Bronnenpaneel.
Type
themeName
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
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
Een
devtools.inspectedWindow.Resource
-object voor de bron waarop is geklikt.