chrome.devtools.panels (original) (raw)

Beschrijving

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

Elk extensiepaneel en elke zijbalk wordt weergegeven als een aparte HTML-pagina. Alle extensiepagina's die in het venster Developer Tools worden weergegeven, hebben toegang tot alle onderdelen van de chrome.devtools API en alle andere extensie-API's.

U kunt de methode devtools.panels.setOpenResourceHandler gebruiken om een ​​callbackfunctie te installeren die gebruikersverzoeken voor het openen van een resource afhandelt (meestal een klik op een resourcekoppeling in het venster Developer Tools). Maximaal één van de geïnstalleerde handlers wordt aangeroepen; gebruikers kunnen (via het dialoogvenster 'Instellingen Developer Tools') het standaardgedrag of een extensie opgeven om verzoeken voor het openen van resources 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 gebruiken.

"devtools_page"

Voorbeeld

De volgende code voegt een paneel toe dat is opgenomen 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 de hoogte ervan 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.

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

Typen

Button

Een knop die door de extensie is gemaakt.

Eigenschappen

• opGeklikt
  Gebeurtenis
  Wordt geactiveerd wanneer op de knop wordt geklikt.
  De functie onClicked.addListener ziet er als volgt uit:
  (callback: function) => {...}
  • De callback ziet er als volgt uit:
    () => void
• Werkt de kenmerken van de knop bij. Als sommige argumenten worden weggelaten of null , worden de bijbehorende kenmerken niet bijgewerkt.
  De update ziet er als volgt uit:
  (iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}
  • pictogramPad
    string optioneel
    Pad naar het nieuwe pictogram van de knop.
  • tooltipTekst
    string optioneel
    Tekst die als tooltip wordt weergegeven wanneer de gebruiker met de muis over de knop beweegt.
  • gehandicapt
    boolean optioneel
    Of de knop is uitgeschakeld.

ElementsPanel

Vertegenwoordigt het Elementenpaneel.

Eigenschappen

• onSelectionChanged
  Gebeurtenis
  Wordt geactiveerd wanneer een object in het paneel wordt geselecteerd.
  De functie onSelectionChanged.addListener ziet er als volgt uit:
  (callback: function) => {...}
  • De callback ziet er als volgt uit:
    () => void
• Maakt een deelvenster in de zijbalk van het paneel.
  De createSidebarPane functie ziet er als volgt uit:
  (title: string, callback?: function) => {...}
  • Tekst die in de zijbalk wordt weergegeven.
  • De callback ziet er als volgt uit:
    (result: ExtensionSidebarPane) => void
    * Een ExtensionSidebarPane-object voor het gemaakte zijbalkvenster.

ExtensionPanel

Geeft een paneel weer dat is gemaakt door een extensie.

Eigenschappen

• onHidden
  Gebeurtenis
  Wordt geactiveerd wanneer de gebruiker het paneel verlaat.
  De functie onHidden.addListener ziet er als volgt uit:
  (callback: function) => {...}
  • De callback ziet er als volgt uit:
    () => void
• opZoeken
  Gebeurtenis
  Wordt geactiveerd bij een zoekactie (start van een nieuwe zoekopdracht, navigatie door zoekresultaten of annulering van een zoekopdracht).
  De functie onSearch.addListener ziet er als volgt uit:
  (callback: function) => {...}
  • De callback ziet er als volgt uit:
    (action: string, queryString?: string) => void
    * queryString
    string optioneel
• opGetoond
  Gebeurtenis
  Wordt geactiveerd wanneer de gebruiker naar het paneel overschakelt.
  De functie onShown.addListener ziet er als volgt uit:
  (callback: function) => {...}
  • De callback ziet er als volgt uit:
    (window: Window) => void
• createStatusBarButton
  leegte
  Voegt een knop toe aan de statusbalk van het paneel.
  De functie createStatusBarButton ziet er als volgt uit:
  (iconPath: string, tooltipText: string, disabled: boolean) => {...}
  • Pad naar het pictogram van de knop. Het bestand moet een afbeelding van 64x24 pixels bevatten, bestaande uit twee pictogrammen van 32x24 pixels. Het linkerpictogram wordt gebruikt wanneer de knop inactief is; het rechterpictogram wordt weergegeven wanneer de knop wordt ingedrukt.
  • Tekst die als tooltip wordt weergegeven wanneer de gebruiker met de muis over de knop beweegt.
  • Of de knop is uitgeschakeld.
• Geeft het paneel weer door het overeenkomstige tabblad te activeren.
  De show ziet er als volgt uit:
  () => {...}

Een zijbalk gemaakt door de extensie.

Eigenschappen

• Gebeurtenis
  Wordt geactiveerd wanneer het zijbalkvenster verborgen raakt doordat de gebruiker het paneel verlaat waarop het zijbalkvenster zich bevindt.
  De functie onHidden.addListener ziet er als volgt uit:
  (callback: function) => {...}
  • De callback ziet er als volgt uit:
    () => void
• Gebeurtenis
  Wordt geactiveerd wanneer het zijbalkvenster zichtbaar wordt doordat de gebruiker overschakelt naar het paneel waarop het wordt gehost.
  De functie onShown.addListener ziet er als volgt uit:
  (callback: function) => {...}
  • De callback ziet er als volgt uit:
    (window: Window) => void
• Stelt een expressie in die binnen de geïnspecteerde pagina wordt geëvalueerd. Het resultaat wordt weergegeven in het zijbalkvenster.
  De setExpression functie ziet er als volgt uit:
  (expression: string, rootTitle?: string, callback?: function) => {...}
  • Een expressie die moet worden geëvalueerd in de context van de geïnspecteerde pagina. JavaScript-objecten en DOM-knooppunten worden weergegeven in een uitvouwbare boomstructuur, vergelijkbaar met de console/watch.
  • Een optionele titel voor de root van de expressieboom.
  • De callback ziet er als volgt uit:
    () => void
• Stelt de hoogte van de zijbalk in.
  De setHeight functie ziet er als volgt uit:
  (height: string) => {...}
  • Een CSS-achtige specificatie van de grootte, zoals '100px' of '12ex' .
• Hiermee stelt u 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) => {...}
  • Een object dat moet worden weergegeven in de context van de geïnspecteerde pagina. Geëvalueerd in de context van de aanroeper (API-client).
  • Een optionele titel voor de root van de expressieboom.
  • De callback ziet er als volgt uit:
    () => void
• Hiermee stelt u in dat een HTML-pagina in het zijbalkvenster wordt weergegeven.
  De setPage functie ziet er als volgt uit:
  (path: string) => {...}
  • Relatief pad van een extensiepagina die in de zijbalk moet worden weergegeven.

SourcesPanel

Vertegenwoordigt het paneel Bronnen.

Eigenschappen

• onSelectionChanged
  Gebeurtenis
  Wordt geactiveerd wanneer een object in het paneel wordt geselecteerd.
  De functie onSelectionChanged.addListener ziet er als volgt uit:
  (callback: function) => {...}
  • De callback ziet er als volgt uit:
    () => void
• Maakt een deelvenster in de zijbalk van het paneel.
  De createSidebarPane functie ziet er als volgt uit:
  (title: string, callback?: function) => {...}
  • Tekst die in de zijbalk wordt weergegeven.
  • De callback ziet er als volgt uit:
    (result: ExtensionSidebarPane) => void
    * Een ExtensionSidebarPane-object voor het gemaakte zijbalkvenster.

Theme

Thema gebruikt door DevTools.

Enum

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

"donker"
Donker thema.

Eigenschappen

elements

Elementenpaneel.

Type

Type

themeName

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

Methoden

create()

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

Maakt een extensiepaneel.

Parameters

• Titel die naast het extensiepictogram in de werkbalk Hulpmiddelen voor ontwikkelaars wordt weergegeven.
• Pad van het paneelpictogram ten opzichte van de extensiemap.
• Pad van de HTML-pagina van het paneel ten opzichte van de extensiemap.
• terugbellen
  functie optioneel
  De callback 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,
): void

Vraagt ​​DevTools om een ​​URL te openen in een Developer Tools-paneel.

Parameters

• De URL van de te openen bron.
• Geeft het regelnummer op waarnaar moet worden gescrold wanneer de resource is geladen.
• kolomnummer
  nummer optioneel
  Geeft het kolomnummer op waarnaar moet worden gescrold wanneer de resource wordt geladen.
• terugbellen
  functie optioneel
  De callback ziet er als volgt uit:
  () => void

setOpenResourceHandler()

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

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

Parameters

• terugbellen
  functie optioneel
  De callback ziet er als volgt uit:
  (resource: Resource, lineNumber: number) => void
  • Een devtools.inspectedWindow.Resource -object voor de resource waarop is geklikt.
  • Geeft het regelnummer op binnen de bron waarop is geklikt.

setThemeChangeHandler()

chrome.devtools.panels.setThemeChangeHandler(
  callback?: function,
): void

Geeft aan welke functie moet worden aangeroepen wanneer het huidige thema in DevTools verandert. Om de handler uit te schakelen, roept u de methode aan zonder parameters of geeft u null als parameter op.

Parameters

• terugbellen
  functie optioneel
  De callback ziet er als volgt uit:
  (theme: Theme) => void
  • Huidig ​​thema in DevTools.