chrome.devtools.panels

Descrizione

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

Ogni riquadro dell'estensione e barra laterale vengono visualizzati come una 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 con altre API di estensione.

Puoi utilizzare il metodo devtools.panels.setOpenResourceHandler per installare una funzione di callback che gestisce le richieste degli utenti per aprire una risorsa (in genere, basta fare clic sul link di una risorsa nella finestra Strumenti per sviluppatori). Al massimo viene chiamato uno dei gestori installati; che gli utenti possono specificare (utilizzando finestra di dialogo Impostazioni Strumenti per sviluppatori) il comportamento predefinito o un'estensione per gestire richieste aperte. Se un'estensione chiama setOpenResourceHandler() più volte, solo l'ultima viene conservato.

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

Manifest

Per 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 nella Barra degli strumenti degli Strumenti per sviluppatori con l'etichetta Selettore carattere:

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à carattere a il riquadro Elementi, quindi ne imposta l'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:

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

Per provare questa API, installa l'esempio dell'API Devtools Panel da chrome-extension-samples repository Git.

Tipi

Button

Un pulsante creato dall'estensione.

Proprietà

  • onClicked

    Evento<functionvoidvoid>

    Attivato quando l'utente fa clic sul pulsante.

    La funzione onClicked.addListener ha questo aspetto: 

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

    • callback

      funzione

      Il parametro callback ha il seguente aspetto: 

      () => void

  • update

    null

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

    La funzione update ha questo aspetto: 

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

    • iconPath

      stringa facoltativo

      Percorso della nuova icona del pulsante.

    • tooltipText

      stringa facoltativo

      Testo mostrato 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

    Evento<functionvoidvoid>

    Attivato quando viene selezionato un oggetto nel riquadro.

    La funzione onSelectionChanged.addListener ha questo aspetto: 

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

    • callback

      funzione

      Il parametro callback ha il seguente aspetto: 

      () => void

  • createSidebarPane

    null

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

    La funzione createSidebarPane ha questo aspetto: 

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

    • titolo

      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 dall'estensione.

Proprietà

  • onHidden

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

    Evento<functionvoidvoid>

    Attivato a seguito di un'azione di ricerca (avvio di una nuova ricerca, navigazione nei risultati di ricerca o annullamento di una 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 facoltativo

  • onShown

    Evento<functionvoidvoid>

    Attivato quando l'utente passa al riquadro.

    La funzione onShown.addListener ha questo aspetto: 

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

    • callback

      funzione

      Il parametro callback ha il seguente aspetto: 

      (window: Window) => void

      • finestra

        Finestra

  • createStatusBarButton

    null

    Consente di aggiungere un pulsante alla barra di stato del riquadro.

    La funzione createStatusBarButton ha questo 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 32 x 24. L'icona a sinistra viene utilizzata quando il pulsante non è attivo; l'icona a destra viene visualizzata quando si preme il pulsante.

    • tooltipText

      stringa

      Testo mostrato 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

    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 questo 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 pannello che lo ospita.

    La funzione onShown.addListener ha questo aspetto: 

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

    • callback

      funzione

      Il parametro callback ha il seguente aspetto: 

      (window: Window) => void

      • finestra

        Finestra

  • setExpression

    null

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

    La funzione setExpression ha questo 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 allo smartwatch.

    • rootTitle

      stringa facoltativo

      Un titolo facoltativo per la radice della struttura delle espressioni.

    • callback

      funzione facoltativa

      Il parametro callback ha il seguente aspetto: 

      () => void

  • setHeight

    null

    Imposta l'altezza della barra laterale.

    La funzione setHeight ha questo aspetto: 

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

    • altezza

      stringa

      Una specifica delle dimensioni di tipo CSS, ad esempio '100px' o '12ex'.

  • setObject

    null

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

    La funzione setObject ha questo aspetto: 

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

    • jsonObject

      stringa

      Un oggetto da visualizzare nel contesto della pagina ispezionata. Valutazione nel contesto del chiamante (client API).

    • rootTitle

      stringa facoltativo

      Un titolo facoltativo per la radice della struttura delle espressioni.

    • callback

      funzione facoltativa

      Il parametro callback ha il seguente aspetto: 

      () => void

  • setPage

    null

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

    La funzione setPage ha questo aspetto: 

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

    • percorso

      stringa

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

SourcesPanel

Rappresenta il riquadro Origini.

Proprietà

  • onSelectionChanged

    Evento<functionvoidvoid>

    Attivato quando viene selezionato un oggetto nel riquadro.

    La funzione onSelectionChanged.addListener ha questo aspetto: 

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

    • callback

      funzione

      Il parametro callback ha il seguente aspetto: 

      () => void

  • createSidebarPane

    null

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

    La funzione createSidebarPane ha questo aspetto: 

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

    • titolo

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

  • titolo

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

Consente 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 fino a quando la risorsa viene caricata.

  • columnNumber

    numero facoltativo

    Chrome 114 e versioni successive .

    Specifica il numero di colonna fino a cui 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 di una risorsa nella finestra Strumenti per sviluppatori. Per annullare l'impostazione del gestore, chiama il metodo senza parametri o passa un valore nullo come parametro.

Parametri