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.
Manifest
Per poter utilizzare questa API, le seguenti chiavi devono essere dichiarate nel manifest.
"devtools_page"
Consulta il riepilogo delle API degli strumenti per sviluppatori per un'introduzione generale all'utilizzo delle API degli strumenti per sviluppatori.
Panoramica
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.
Esempi
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");
}
);
Questo screenshot mostra l'effetto degli esempi precedenti sulla finestra Strumenti per sviluppatori:
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
-
risultato
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.
-
returns
-
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
-
risultato
Un oggetto ExtensionSidebarPane per il riquadro della barra laterale creato.
-
-
Proprietà
elements
Riquadro degli elementi.
Tipo
sources
Riquadro Origini.
Tipo
themeName
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
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 successiveSpecifica 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
-
callback
funzione facoltativa
Il parametro
callback
ha il seguente aspetto:(resource: Resource) => void
-
risorsa
Un oggetto
devtools.inspectedWindow.Resource
per la risorsa su cui è stato fatto clic.
-