chrome.devtools.panels

Descrizione

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

Ogni riquadro delle estensioni e ogni barra laterale vengono visualizzati come pagina HTML separata. Tutte le pagine delle estensioni visualizzate nella finestra Strumenti per sviluppatori hanno accesso a tutti i moduli nell'API chrome.devtools e all'API chrome.extension. Altre API di estensione non sono disponibili per le pagine nella finestra Strumenti per sviluppatori, ma puoi richiamarle inviando una richiesta alla pagina in background dell'estensione, in modo simile a come viene eseguita negli script di contenuti.

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 clic sul link di una risorsa nella finestra Strumenti per sviluppatori). Viene chiamato al massimo uno dei gestori installati. Gli utenti possono specificare (utilizzando la finestra di dialogo Impostazioni di Strumenti per sviluppatori) il comportamento predefinito o un'estensione per gestire le richieste di apertura delle risorse. Se un'estensione chiama setOpenResourceHandler() più volte, verrà conservato solo l'ultimo gestore.

Consulta il riepilogo delle API degli strumenti per sviluppatori per un'introduzione generale all'utilizzo delle API degli strumenti per sviluppatori.

Manifest

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

"devtools_page"

Esempio

Il seguente codice aggiunge un riquadro contenuto in Panel.html, rappresentato da FontPicker.png sulla barra degli strumenti degli Strumenti per sviluppatori ed etichettato come Selettore carattere:

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

Il seguente codice aggiunge al riquadro Elementi un riquadro della barra laterale contenuto in Sidebar.html e denominato Proprietà carattere, quindi imposta l'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 dell'icona dell'estensione nella barra degli strumenti di DevTools
Riquadro dell'icona dell'estensione nella barra degli strumenti di DevTools.

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

Tipi

Button

Un pulsante creato dall'estensione.

Proprietà

  • onClicked

    Evento<functionvoidvoid>

    Si attiva quando si fa clic sul pulsante.

    La funzione onClicked.addListener ha il seguente aspetto: 

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

    • callback

      funzione

      Il parametro callback ha il seguente aspetto: 

      ()=>void

  • update

    void

    Consente di aggiornare gli attributi del pulsante. Se alcuni argomenti vengono omessi o null, gli attributi corrispondenti non vengono aggiornati.

    La funzione update ha il seguente aspetto: 

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

    • iconPath

      stringa facoltativo

      Percorso della nuova icona del pulsante.

    • tooltipText

      stringa facoltativo

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

    • disattivata

      booleano facoltativo

      Indica se il pulsante è disabilitato.

ElementsPanel

Rappresenta il riquadro Elementi.

Proprietà

  • onSelectionChanged

    Evento<functionvoidvoid>

    Si attiva 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

    void

    Crea un riquadro all'interno della barra laterale del riquadro.

    La funzione createSidebarPane ha il seguente aspetto: 

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

    • title

      stringa

      Testo visualizzato nella didascalia della barra laterale.

    • callback

      funzione 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 per estensione.

Proprietà

  • onHidden

    Evento<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

    Evento<functionvoidvoid>

    Si attiva quando viene eseguita un'azione di ricerca (avvio di una nuova ricerca, navigazione nei risultati di ricerca o annullamento di una 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 facoltativo

  • onShown

    Evento<functionvoidvoid>

    Viene attivato quando l'utente passa al pannello.

    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

    void

    Viene aggiunto 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 formato 32 x 24. L'icona sinistra viene utilizzata quando il pulsante non è attivo; l'icona destra viene visualizzata quando si preme il pulsante.

    • tooltipText

      stringa

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

    • disattivata

      boolean

      Indica se il pulsante è disabilitato.

ExtensionSidebarPane

Una barra laterale creata dall'estensione.

Proprietà

  • onHidden

    Evento<functionvoidvoid>

    Attivato quando il riquadro della barra laterale viene nascosto in seguito all'uscita dell'utente 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

    Evento<functionvoidvoid>

    Attivato quando il riquadro della barra laterale diventa visibile in seguito al 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

    void

    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 o all'orologio.

    • rootTitle

      stringa facoltativo

      Un titolo facoltativo per la radice della struttura ad albero delle espressioni.

    • callback

      funzione facoltativa

      Il parametro callback ha il seguente aspetto: 

      ()=>void

  • setHeight

    void

    Imposta l'altezza della barra laterale.

    La funzione setHeight ha il seguente aspetto: 

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

    • altezza

      stringa

      Una specifica delle dimensioni in stile CSS, ad esempio '100px' o '12ex'.

  • setObject

    void

    Imposta un oggetto conforme a JSON 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. La valutazione viene valutata nel contesto del chiamante (client API).

    • rootTitle

      stringa facoltativo

      Un titolo facoltativo per la radice della struttura ad albero delle espressioni.

    • callback

      funzione facoltativa

      Il parametro callback ha il seguente aspetto: 

      ()=>void

  • setPage

    void

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

    La funzione setPage ha il seguente aspetto: 

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

    • percorso

      stringa

      Percorso relativo della pagina di un'estensione da visualizzare nella barra laterale.

SourcesPanel

Rappresenta il riquadro Origini.

Proprietà

  • onSelectionChanged

    Evento<functionvoidvoid>

    Si attiva 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

    void

    Crea un riquadro all'interno della barra laterale del riquadro.

    La funzione createSidebarPane ha il seguente aspetto: 

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

    • title

      stringa

      Testo visualizzato nella didascalia della barra laterale.

    • callback

      funzione facoltativa

      Il parametro callback ha il seguente aspetto: 

      (result: ExtensionSidebarPane)=>void

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

Proprietà

elements

Riquadro degli elementi.

Tipo

ElementsPanel

sources

Riquadro Origini.

Tipo

SourcesPanel

themeName

Chrome 59 e versioni successive

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

Tipo

stringa

Metodi

create()

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

Crea un riquadro delle estensioni.

Parametri

  • title

    stringa

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

  • iconPath

    stringa

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

  • pagePath

    stringa

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

  • callback

    funzione 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,
)

Richiede a DevTools di aprire un URL in un riquadro Strumenti per sviluppatori.

Parametri

  • url

    stringa

    L'URL della risorsa da aprire.

  • lineNumber

    numero

    Specifica il numero di riga a cui scorrere quando la risorsa viene caricata.

  • columnNumber

    numero facoltativo

    Chrome 114 e versioni successive

    Specifica il numero di colonna da scorrere quando la risorsa viene caricata.

  • callback

    funzione 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 sul 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