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 e barra laterale dell'estensione viene visualizzato come pagina HTML separata. Tutte le pagine delle estensioni visualizzate nella finestra degli 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 alla 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.
Consulta il riepilogo delle API DevTools per un'introduzione generale all'utilizzo delle API Strumenti per sviluppatori.
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 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à 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 degli strumenti per sviluppatori:
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 si fa clic sul pulsante.
La funzione
onClicked.addListenerha il seguente aspetto:(callback: function) => {...}
-
callback
funzione
Il parametro
callbackha 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
updateha il seguente aspetto:(iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}
-
iconPath
stringa facoltativa
Percorso della nuova icona del pulsante.
-
tooltipText
stringa facoltativa
Testo mostrato come descrizione comando quando l'utente passa il mouse sopra il pulsante.
-
disabilitato
boolean facoltativo
Indica se il pulsante è disattivato.
-
ElementsPanel
Rappresenta il riquadro Elementi.
Proprietà
-
onSelectionChanged
Event<functionvoidvoid>
Attivato quando un oggetto viene selezionato nel riquadro.
La funzione
onSelectionChanged.addListenerha il seguente aspetto:(callback: function) => {...}
-
callback
funzione
Il parametro
callbackha il seguente aspetto:() => void
-
-
createSidebarPane
void
Crea un riquadro all'interno della barra laterale del riquadro.
La funzione
createSidebarPaneha il seguente 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 riquadro creato da un'estensione.
Proprietà
-
onHidden
Event<functionvoidvoid>
Attivato quando l'utente esce dal riquadro.
La funzione
onHidden.addListenerha il seguente aspetto:(callback: function) => {...}
-
callback
funzione
Il parametro
callbackha il seguente aspetto:() => void
-
-
onSearch
Event<functionvoidvoid>
Attivato in seguito a un'azione di ricerca (inizio di una nuova ricerca, navigazione nei risultati di ricerca o annullamento della ricerca).
La funzione
onSearch.addListenerha il seguente aspetto:(callback: function) => {...}
-
callback
funzione
Il parametro
callbackha 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.addListenerha il seguente aspetto:(callback: function) => {...}
-
callback
funzione
Il parametro
callbackha il seguente aspetto:(window: Window) => void
-
finestra
Finestra
-
-
-
createStatusBarButton
void
Aggiunge un pulsante alla barra di stato del riquadro.
La funzione
createStatusBarButtonha 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. 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 mostrato come descrizione comando quando l'utente passa il mouse sopra il pulsante.
-
disabilitato
booleano
Indica se il pulsante è disattivato.
-
returns
-
-
mostra
void
Browser Chrome 140 e versioni successive. * Da Chrome 152Mostra il riquadro attivando la scheda corrispondente.
La funzione
showha il seguente aspetto:() => {...}
ExtensionSidebarPane
Una barra laterale creata dall'estensione.
Proprietà
-
onHidden
Event<functionvoidvoid>
Attivato quando il riquadro della barra laterale viene nascosto perché l'utente si allontana dal riquadro che lo ospita.
La funzione
onHidden.addListenerha il seguente aspetto:(callback: function) => {...}
-
callback
funzione
Il parametro
callbackha il seguente aspetto:() => void
-
-
onShown
Event<functionvoidvoid>
Attivato quando il riquadro della barra laterale diventa visibile in seguito al passaggio dell'utente al riquadro che lo ospita.
La funzione
onShown.addListenerha il seguente aspetto:(callback: function) => {...}
-
callback
funzione
Il parametro
callbackha 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
setExpressionha il seguente aspetto:(expression: string, rootTitle?: string) => {...}
-
espressione
stringa
Un'espressione da valutare nel contesto della pagina ispezionata. Gli oggetti JavaScript e i nodi DOM vengono visualizzati in un albero espandibile simile alla console/watch.
-
rootTitle
stringa facoltativa
Un titolo facoltativo per la radice dell'albero delle espressioni.
-
returns
Promise<void>
Chrome 152+Un callback richiamato dopo l'aggiornamento del riquadro della barra laterale con i risultati della valutazione dell'espressione.
-
-
setHeight
void
Imposta l'altezza della barra laterale.
La funzione
setHeightha il seguente aspetto:(height: string) => {...}
-
altezza
stringa
Una specifica delle dimensioni simile a CSS, ad esempio
'100px'o'12ex'.
-
-
setObject
void
Imposta un oggetto conforme a JSON da visualizzare nel riquadro della barra laterale.
La funzione
setObjectha il seguente aspetto:(jsonObject: string, rootTitle?: string) => {...}
-
jsonObject
stringa
Un oggetto da visualizzare nel contesto della pagina ispezionata. Valutato nel contesto del chiamante (client API).
-
rootTitle
stringa facoltativa
Un titolo facoltativo per la radice dell'albero delle espressioni.
-
returns
Promise<void>
Chrome 152+Un callback richiamato dopo l'aggiornamento della barra laterale con l'oggetto.
-
-
setPage
void
Imposta una pagina HTML da visualizzare nel riquadro della barra laterale.
La funzione
setPageha il seguente aspetto:(path: string) => {...}
-
percorso
stringa
Percorso relativo di una pagina dell'estensione da visualizzare nella barra laterale.
-
SourcesPanel
Rappresenta il riquadro Fonti.
Proprietà
-
onSelectionChanged
Event<functionvoidvoid>
Attivato quando un oggetto viene selezionato nel riquadro.
La funzione
onSelectionChanged.addListenerha il seguente aspetto:(callback: function) => {...}
-
callback
funzione
Il parametro
callbackha il seguente aspetto:() => void
-
-
createSidebarPane
void
Crea un riquadro all'interno della barra laterale del riquadro.
La funzione
createSidebarPaneha il seguente 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.
-
Theme
Tema utilizzato da DevTools.
Enum
"default"
Tema predefinito di DevTools. Questo è sempre il tema chiaro.
"dark"
Tema scuro.
Proprietà
elements
Riquadro Elementi.
Tipo
sources
Riquadro Fonti.
Tipo
themeName
Il nome del tema cromatico impostato nelle impostazioni di DevTools dell'utente. I valori possibili sono: default (predefinito) e dark.
Tipo
stringa
Metodi
create()
browser.devtools.panels.create(
title: string,
iconPath: string,
pagePath: string,
): Promise<ExtensionPanel>
Crea un riquadro delle estensioni.
Parametri
-
titolo
stringa
Titolo visualizzato accanto all'icona dell'estensione nella barra degli strumenti 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.
Resi
-
Promise<ExtensionPanel>
Chrome 152+Una funzione che viene chiamata quando viene creato il riquadro.
openResource()
browser.devtools.panels.openResource(
url: string,
lineNumber: number,
columnNumber?: number,
): Promise<void>
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
number optional
Browser Chrome 114+ * da Chrome 152Specifica il numero di colonna a cui scorrere quando la risorsa viene caricata.
Resi
-
Promise<void>
Chrome 152+Una funzione che viene chiamata quando la risorsa è stata caricata correttamente.
setOpenResourceHandler()
browser.devtools.panels.setOpenResourceHandler(
callback?: function,
): void
Specifica la funzione da chiamare quando l'utente fa clic su un link alla risorsa nella finestra degli strumenti per sviluppatori. Per annullare l'impostazione del gestore, chiama il metodo senza parametri o passa null come parametro.
Parametri
-
callback
funzione elemento facoltativo
Il parametro
callbackha il seguente aspetto:(resource: Resource, lineNumber: number) => void
-
risorsa
Un oggetto
devtools.inspectedWindow.Resourceper la risorsa su cui è stato fatto clic. -
lineNumber
numero
Specifica il numero di riga all'interno della risorsa su cui è stato fatto clic.
-
setThemeChangeHandler()
browser.devtools.panels.setThemeChangeHandler(
callback?: function,
): void
Specifica la funzione da chiamare quando il tema corrente cambia in DevTools. Per annullare l'impostazione del gestore, chiama il metodo senza parametri o passa null come parametro.