chrome.devtools.panels

Descrizione

Utilizza l'API chrome.devtools.panels per integrare l'estensione nell'interfaccia utente della finestra Strumenti per gli sviluppatori: crea i tuoi riquadri, accedi a quelli esistenti e aggiungi barre laterali.

Ogni riquadro delle estensioni e ogni barra laterale viene visualizzato come pagina HTML separata. Tutte le pagine delle estensioni visualizzate nella finestra Strumenti per sviluppatori hanno accesso a tutte le parti dell'API chrome.devtools, nonché a tutte le altre API di estensioni.

Puoi utilizzare il metodo devtools.panels.setOpenResourceHandler per installare una funzione di callback che gestisce le richieste degli utenti di aprire una risorsa (in genere, un link a una risorsa nella finestra Strumenti per gli sviluppatori). Viene chiamato al massimo uno dei gestori installati. Gli utenti possono specificare (utilizzando la finestra di dialogo Impostazioni di Strumenti per gli sviluppatori) il comportamento predefinito o un'estensione per gestire le richieste di apertura delle risorse. Se un'estensione chiama setOpenResourceHandler() più volte, viene mantenuto solo l'ultimo gestore.

Consulta il riepilogo delle API DevTools per un'introduzione generale all'utilizzo delle API DevTools.

Manifest

Per utilizzare questa API, le seguenti chiavi devono essere dichiarate nel file manifest.

"devtools_page"

Esempio

Il seguente codice aggiunge un riquadro contenuto in Panel.html, rappresentato da FontPicker.png nella barra degli strumenti Strumenti per sviluppatori e etichettato come Selettore di caratteri:

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

Il codice seguente aggiunge un riquadro della barra laterale contenuto in Sidebar.html e denominato Proprietà dei caratteri al riquadro Elementi, quindi imposta la relativa altezza su 8ex:

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

Lo screenshot mostra l'effetto che questo esempio avrebbe sulla finestra Strumenti per sviluppatori:

Riquadro delle icone delle estensioni nella barra degli strumenti di DevTools
Riquadro delle icone delle estensioni nella barra degli strumenti di DevTools.

Per provare questa API, installa l'esempio di API dei riquadri devtools dal repository chrome-extension-samples.

Tipi

Button

Un pulsante creato dall'estensione.

Proprietà

  • onClicked

    Event<functionvoidvoid>

    Viene attivato quando viene fatto clic sul pulsante.

    La funzione onClicked.addListener ha il seguente aspetto: 

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

    • callback

      funzione

      Il parametro callback ha il seguente aspetto: 

      () => void

  • update

    nullo

    Aggiorna gli attributi del pulsante. Se alcuni degli argomenti vengono omessi o sono null, gli attributi corrispondenti non vengono aggiornati.

    La funzione update ha il seguente aspetto: 

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

    • iconPath

      stringa facoltativa

      Percorso della nuova icona del pulsante.

    • tooltipText

      stringa facoltativa

      Testo visualizzato come descrizione comando quando l'utente passa il mouse sopra il pulsante.

    • disattivato

      booleano facoltativo

      Indica se il pulsante è disattivato.

ElementsPanel

Rappresenta il riquadro Elementi.

Proprietà

  • onSelectionChanged

    Event<functionvoidvoid>

    Viene attivato quando viene selezionato un oggetto nel riquadro.

    La funzione onSelectionChanged.addListener ha il seguente aspetto: 

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

    • callback

      funzione

      Il parametro callback ha il seguente aspetto: 

      () => void

  • createSidebarPane

    nullo

    Crea un riquadro nella barra laterale del riquadro.

    La funzione createSidebarPane ha il seguente aspetto: 

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

    • titolo

      stringa

      Testo visualizzato nella didascalia della barra laterale.

    • callback

      function facoltativa

      Il parametro callback ha il seguente aspetto: 

      (result: ExtensionSidebarPane) => void

      • Un oggetto ExtensionSidebarPane per il riquadro della barra laterale creato.

ExtensionPanel

Rappresenta un riquadro creato dall'estensione.

Proprietà

  • onHidden

    Event<functionvoidvoid>

    Viene attivato quando l'utente esce dal riquadro.

    La funzione onHidden.addListener ha il seguente aspetto: 

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

    • callback

      funzione

      Il parametro callback ha il seguente aspetto: 

      () => void

  • onSearch

    Event<functionvoidvoid>

    Viene attivato in seguito a un'azione di ricerca (avvio di una nuova ricerca, navigazione nei risultati di ricerca o annullamento della ricerca).

    La funzione onSearch.addListener ha il seguente aspetto: 

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

    • callback

      funzione

      Il parametro callback ha il seguente aspetto: 

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

      • azione

        stringa

      • queryString

        stringa facoltativa

  • onShown

    Event<functionvoidvoid>

    Si attiva quando l'utente passa al riquadro.

    La funzione onShown.addListener ha il seguente aspetto: 

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

    • callback

      funzione

      Il parametro callback ha il seguente aspetto: 

      (window: Window) => void

      • finestra

        Finestra

  • createStatusBarButton

    nullo

    Aggiunge un pulsante alla barra di stato del riquadro.

    La funzione createStatusBarButton ha il seguente aspetto: 

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

    • iconPath

      stringa

      Percorso dell'icona del pulsante. Il file deve contenere un'immagine di 64 x 24 pixel composta da due icone di 32 x 24 pixel. L'icona a sinistra viene utilizzata quando il pulsante non è attivo; l'icona a destra viene visualizzata quando il pulsante viene premuto.

    • tooltipText

      stringa

      Testo visualizzato come descrizione comando quando l'utente passa il mouse sopra il pulsante.

    • disattivato

      booleano

      Indica se il pulsante è disattivato.

ExtensionSidebarPane

Una barra laterale creata dall'estensione.

Proprietà

  • onHidden

    Event<functionvoidvoid>

    Viene attivato quando il riquadro della barra laterale viene nascosto perché l'utente esce dal riquadro che lo ospita.

    La funzione onHidden.addListener ha il seguente aspetto: 

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

    • callback

      funzione

      Il parametro callback ha il seguente aspetto: 

      () => void

  • onShown

    Event<functionvoidvoid>

    Viene attivato quando il riquadro della barra laterale diventa visibile a seguito del passaggio dell'utente al riquadro che lo ospita.

    La funzione onShown.addListener ha il seguente aspetto: 

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

    • callback

      funzione

      Il parametro callback ha il seguente aspetto: 

      (window: Window) => void

      • finestra

        Finestra

  • setExpression

    nullo

    Imposta un'espressione che viene valutata all'interno della pagina ispezionata. Il risultato viene visualizzato nel riquadro della barra laterale.

    La funzione setExpression ha il seguente aspetto: 

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

    • espressione

      stringa

      Un'espressione da valutare nel contesto della pagina ispezionata. Gli oggetti JavaScript e i nodi DOM vengono visualizzati in una struttura ad albero espandibile simile alla console/alla visualizzazione in anteprima.

    • rootTitle

      stringa facoltativa

      Un titolo facoltativo per la radice dell'albero delle espressioni.

    • callback

      function facoltativa

      Il parametro callback ha il seguente aspetto: 

      () => void

  • setHeight

    nullo

    Imposta l'altezza della barra laterale.

    La funzione setHeight ha il seguente aspetto: 

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

    • altezza

      stringa

      Una specifica delle dimensioni simile a CSS, ad esempio '100px' o '12ex'.

  • setObject

    nullo

    Imposta un oggetto JSON conforme da visualizzare nel riquadro della barra laterale.

    La funzione setObject ha il seguente aspetto: 

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

    • jsonObject

      stringa

      Un oggetto da visualizzare nel contesto della pagina ispezionata. Valutato nel contesto dell'utente chiamante (client API).

    • rootTitle

      stringa facoltativa

      Un titolo facoltativo per la radice dell'albero delle espressioni.

    • callback

      function facoltativa

      Il parametro callback ha il seguente aspetto: 

      () => void

  • setPage

    nullo

    Imposta una pagina HTML da visualizzare nel riquadro della barra laterale.

    La funzione setPage ha il seguente aspetto: 

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

    • percorso

      stringa

      Percorso relativo di una pagina dell'estensione da visualizzare nella barra laterale.

SourcesPanel

Rappresenta il riquadro Origini.

Proprietà

  • onSelectionChanged

    Event<functionvoidvoid>

    Viene attivato quando viene selezionato un oggetto nel riquadro.

    La funzione onSelectionChanged.addListener ha il seguente aspetto: 

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

    • callback

      funzione

      Il parametro callback ha il seguente aspetto: 

      () => void

  • createSidebarPane

    nullo

    Crea un riquadro nella barra laterale del riquadro.

    La funzione createSidebarPane ha il seguente aspetto: 

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

    • titolo

      stringa

      Testo visualizzato nella didascalia della barra laterale.

    • callback

      function facoltativa

      Il parametro callback ha il seguente aspetto: 

      (result: ExtensionSidebarPane) => void

      • Un oggetto ExtensionSidebarPane per il riquadro della barra laterale creato.

Proprietà

elements

Riquadro Elementi.

Tipo

ElementsPanel

sources

Riquadro Origini.

Tipo

SourcesPanel

themeName

Chrome 59 e versioni successive

Il nome del tema a colori impostato nelle impostazioni di DevTools dell'utente. Valori possibili: default (il valore predefinito) e dark.

Tipo

stringa

Metodi

create()

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

Crea un riquadro di estensione.

Parametri

  • titolo

    stringa

    Titolo visualizzato accanto all'icona dell'estensione nella barra degli strumenti di Strumenti per sviluppatori.

  • iconPath

    stringa

    Percorso dell'icona del riquadro rispetto alla directory dell'estensione.

  • pagePath

    stringa

    Percorso della pagina HTML del riquadro rispetto alla directory dell'estensione.

  • callback

    function facoltativa

    Il parametro callback ha il seguente aspetto: 

    (panel: ExtensionPanel) => void

    • pannello

      ExtensionPanel

      Un oggetto ExtensionPanel che rappresenta il riquadro creato.

openResource()

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

Chiede a DevTools di aprire un URL in un riquadro di DevTools.

Parametri

  • url

    stringa

    L'URL della risorsa da aprire.

  • lineNumber

    numero

    Specifica il numero di riga fino al quale scorrere quando la risorsa viene caricata.

  • columnNumber

    number facoltativo

    Chrome 114 e versioni successive

    Specifica il numero di colonna fino al quale scorrere quando la risorsa viene caricata.

  • callback

    function facoltativa

    Il parametro callback ha il seguente aspetto: 

    () => void

setOpenResourceHandler()

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

Specifica la funzione da chiamare quando l'utente fa clic su un link a una risorsa nella finestra Strumenti per sviluppatori. Per annullare l'impostazione del gestore, chiama il metodo senza parametri o passa null come parametro.

Parametri