chrome.devtools.panels

Descrizione

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

Ogni pannello delle estensioni e 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 delle 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 clic su un link a 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 degli strumenti per sviluppatori) il comportamento predefinito o un'estensione per gestire le richieste di apertura delle risorse. Se un'estensione chiama setOpenResourceHandler() più volte, viene conservato solo l'ultimo gestore.

Per un'introduzione generale all'utilizzo delle API DevTools, consulta il Riepilogo delle API DevTools.

Manifest

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

"devtools_page"

Esempio

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

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

Il seguente codice aggiunge un riquadro della barra laterale contenuto in Sidebar.html e intitolato Proprietà del carattere al riquadro Elementi, quindi imposta la sua altezza su 8ex:

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

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

Pannello delle icone delle estensioni nella barra degli strumenti di DevTools
Pannello delle icone delle estensioni sulla barra degli strumenti di DevTools.

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

Tipi

Button

Un pulsante creato dall'estensione.

Proprietà

  • onClicked

    Event<functionvoidvoid>

    Attivato quando viene fatto clic sul pulsante.

    La funzione onClicked.addListener ha questo aspetto: 

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

    • callback

      funzione

      Il parametro callback ha il seguente aspetto: 

      () => void

  • update

    void

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

    La funzione update ha questo 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.

    • disabilitato

      booleano facoltativo

      Indica se il pulsante è disattivato.

ElementsPanel

Rappresenta il riquadro Elementi.

Proprietà

  • onSelectionChanged

    Event<functionvoidvoid>

    Viene attivato quando un oggetto viene selezionato nel riquadro.

    La funzione onSelectionChanged.addListener ha questo aspetto: 

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

    • callback

      funzione

      Il parametro callback ha il seguente aspetto: 

      () => void

  • createSidebarPane

    void

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

    La funzione createSidebarPane ha questo aspetto: 

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

    • titolo

      stringa

      Testo visualizzato nella didascalia della barra laterale.

    • returns

      Promise<ExtensionSidebarPane>

      Chrome 152+

      Un callback richiamato quando viene creata la barra laterale.

ExtensionPanel

Rappresenta un pannello creato da un'estensione.

Proprietà

  • onHidden

    Event<functionvoidvoid>

    Attivato quando l'utente esce dal riquadro.

    La funzione onHidden.addListener ha questo aspetto: 

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

    • callback

      funzione

      Il parametro callback ha il seguente aspetto: 

      () => void

  • onSearch

    Event<functionvoidvoid>

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

    Attivato quando l'utente passa al riquadro.

    La funzione onShown.addListener ha questo aspetto: 

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

    • callback