Le estensioni possono accedere agli stessi Chrome DevTools disponibili per le pagine web. Per diventare esperti nel debug delle estensioni, dovrai sapere come individuare i log e gli errori dei diversi componenti delle estensioni. Questo tutorial illustra tecniche di base per eseguire il debug dell'estensione.
Prima di iniziare
Questa guida presuppone che tu abbia esperienza di base di sviluppo web. Ti consigliamo di leggere Nozioni di base sullo sviluppo per un'introduzione al flusso di lavoro per lo sviluppo delle estensioni. Progettare l'interfaccia utente offre un'introduzione all'utente di interfaccia utente disponibili nelle estensioni.
Annulla l'estensione
Questo tutorial interromperà un componente dell'estensione alla volta, quindi mostrerà come correggerlo. Ricordati di annullare i bug introdotti in una sezione prima di passare alla sezione successiva. Scarica l'esempio di Broken Color su GitHub.
Eseguire il debug del manifest
Per prima cosa, rompi il file manifest modificando la chiave "version" in "versions":
manifest.json:
{
"name": "Broken Background Color",
"version": "1.0",
"versions": "1.0",
"description": "Fix an Extension!",
...
}
Ora proviamo a caricare l'estensione localmente. Verrà visualizzata una finestra di dialogo di errore che rimanda al problema:
Failed to load extension
Required value version is missing or invalid. It must be between 1-4 dot-separated integers each between 0 and 65536.
Could not load manifest.
Quando una chiave manifest non è valida, l'estensione non viene caricata, ma Chrome ti fornisce un suggerimento su come risolvere il problema.
Annulla la modifica e inserisci un'autorizzazione non valida per vedere cosa succede.
Modifica l'autorizzazione "activeTab" in minuscolo "activetab":
manifest.json:
{
...
"permissions": ["activeTab", "scripting", "storage"],
"permissions": ["activetab", "scripting", "storage"],
...
}
Salva l'estensione e prova a caricarla di nuovo. Dovrebbe essere caricato questa volta. Nell'estensione Nella pagina di gestione vedrai tre pulsanti: Dettagli, Rimuovi ed Errori. La sezione Errori l'etichetta del pulsante diventa rossa quando si verifica un errore. Fai clic sul pulsante Errori per visualizzare il seguente errore:
Permission 'activetab' is unknown or URL pattern is malformed.
Prima di andare avanti, modifica nuovamente l'autorizzazione, fai clic su Cancella tutto nell'angolo in alto a destra per cancellare i log e ricaricare l'estensione.
Esegui il debug del service worker
Localizzazione dei log
Il service worker imposta il colore predefinito sullo spazio di archiviazione e lo registra nella console. Per visualizzare questo log, apri il riquadro Chrome DevTools selezionando il link blu accanto a Esamina visualizzazioni.
Errori di localizzazione
Interrompiamo il service worker modificando onInstalled in oninstalled minuscolo:
service-worker.js:
// There's a typo in the line below;
// ❌ oninstalled should be ✅ onInstalled.
chrome.runtime.onInstalled.addListener(() => {
chrome.runtime.oninstalled.addListener(() => {
chrome.storage.sync.set({ color: '#3aa757' }, () => {
console.log('The background color is green.');
});
});
Aggiorna e fai clic su Errori per visualizzare il log degli errori. Il primo errore ti informa che la registrazione del service worker non è riuscita. Questo significa che si è verificato un problema durante l'avvio:
Service worker registration failed. Status code: 15.
L'errore effettivo si verifica dopo:
Uncaught TypeError: Cannot read properties of undefined (reading 'addListener')
Annulla il bug che abbiamo introdotto, fai clic su Cancella tutto nell'angolo in alto a destra e ricarica l'estensione.
Controllare lo stato del service worker
Puoi identificare quando il service worker si riattiva per eseguire le attività seguendo questi passaggi:
- Copia l'ID estensione che si trova sopra "Esamina visualizzazioni".
. ID estensione nella pagina Gestione delle estensioni. - Apri il file manifest nel browser. Ad esempio:
text chrome-extension://YOUR_EXTENSION_ID/manifest.json - Esamina il file.
- Vai al riquadro Applicazione.
- Vai al riquadro Service worker.
Per testare il codice, avvia o arresta il service worker utilizzando i link accanto a status.
Inoltre, se hai apportato modifiche al codice del service worker, puoi fare clic su Aggiorna o su skipwaiting per applicarle immediatamente.
Esegui il debug del popup
Ora che l'estensione è stata inizializzata correttamente, rompiamo il popup commentando le righe evidenziate di seguito:
popup.js:
...
changeColorButton.addEventListener('click', (event) => {
const color = event.target.value;
// Query the active tab before injecting the content script
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
// Use the Scripting API to execute a script
chrome.scripting.executeScript({
target: { tabId: tabs[0].id },
args: [color],
func: setColor
});
});
});
Torna alla pagina Gestione delle estensioni. Il pulsante Errori viene visualizzato di nuovo. Fai clic per visualizza il nuovo log. Viene visualizzato il seguente messaggio di errore:
Uncaught ReferenceError: tabs is not defined
Puoi aprire i DevTools del popup ispezionando il popup.
L'errore tabs is undefined indica che l'estensione non sa dove inserire lo script dei contenuti.
Per risolvere il problema, chiama tabs.query() e seleziona la scheda attiva.
Per aggiornare il codice, fai clic sul pulsante Cancella tutto nell'angolo in alto a destra, quindi ricarica la sezione .
Esegui il debug degli script di contenuti
Ora interrompiamo lo script dei contenuti modificando la variabile "color" in "colors":
content.js:
...
function setColor(color) {
// There's a typo in the line below;
// ❌ colors should be ✅ color.
document.body.style.backgroundColor = color;
document.body.style.backgroundColor = colors;
}
Aggiorna la pagina, apri il popup e fai clic sulla casella verde. Non accade niente.
Se vai alla pagina Gestione delle estensioni, il pulsante Errori non viene visualizzato. Il motivo è che solo gli errori di runtime, console.warning e,
console.error sono registrate nella pagina Gestione delle estensioni.
Gli script di contenuti vengono eseguiti all'interno di un sito web. Per individuare questi errori dobbiamo esaminare la pagina web che l'estensione sta cercando di modificare:
Uncaught ReferenceError: colors is not defined
Per utilizzare DevTools dallo script dei contenuti, fai clic sulla freccia del menu a discesa accanto ad in alto e seleziona l'estensione.
L'errore indica che colors non è definito. L'estensione non deve trasmettere correttamente la variabile.
Correggi lo script inserito per passare la variabile color nel codice.
Monitora le richieste di rete
Spesso il popup effettua tutte le richieste di rete necessarie prima ancora della più veloce gli sviluppatori possono aprire DevTools. Per visualizzare queste richieste, aggiorna dal riquadro Rete. it ricarica il popup senza chiudere il riquadro DevTools.
Dichiara le autorizzazioni
Alcune API delle estensioni richiedono le autorizzazioni. Consulta l'articolo sulle autorizzazioni e la documentazione di Chrome API per garantire che un'estensione richieda le autorizzazioni corrette nel manifest.
{
"name": "Broken Background Color",
...
"permissions": [
"activeTab",
"declarativeContent",
"storage"
],
...
}
Per approfondire
Scopri di più sugli strumenti per sviluppatori di Chrome leggendo la documentazione.