Le estensioni sono in grado di sfruttare gli stessi vantaggi di debug offerti da Chrome DevTools per le pagine web, ma hanno proprietà di comportamento uniche. Per diventare un debugger di estensioni esperto, è necessario comprendere questi comportamenti, il modo in cui i componenti delle estensioni interagiscono tra loro e dove scovare i bug. Questo tutorial fornisce agli sviluppatori una conoscenza di base delle estensioni di debug.
Individua i log
Le estensioni sono composte da molti componenti diversi, ognuno con responsabilità specifiche. Scarica un'estensione non funzionante qui per iniziare a individuare i log degli errori per i diversi componenti dell'estensione.
Script di sfondo
Vai alla pagina di gestione delle estensioni di Chrome all'indirizzo chrome://extensions e assicurati che la modalità sviluppatore sia attivata. Fai clic sul pulsante Carica scompattato e seleziona la directory dell'estensione danneggiata. Una volta caricata, l'estensione dovrebbe avere tre pulsanti: Dettagli, Rimuovi ed Errori in lettere rosse.
Fai clic sul pulsante Errori per visualizzare il log degli errori. Il sistema delle estensioni ha rilevato un problema nello script in background.
Uncaught TypeError: Cannot read property 'addListener' of undefined
Inoltre, il riquadro di Chrome DevTools può essere aperto per lo script in background selezionando il link blu accanto a Visualizza ispezione.
Torna al codice.
chrome.runtime.oninstalled.addListener(function() {
chrome.storage.sync.set({color: '#3aa757'}, function() {
console.log('The color is green.');
});
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostEquals: 'developer.chrome.com'},
})],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
Lo script in background sta tentando di ascoltare l'evento onInstalled, ma il nome della proprietà richiede una "I" maiuscola. Aggiorna il codice in modo che rifletta la chiamata corretta, fai clic sul pulsante Cancella
tutto nell'angolo in alto a destra e ricarica l'estensione.
Popup
Ora che l'estensione si inizializza correttamente, puoi testare altri componenti. Aggiorna questa pagina o apri una nuova scheda e vai a qualsiasi pagina su developer.chrome.com, apri il popup e fai clic sul quadrato verde. E... non succede nulla.
Torna alla pagina di gestione delle estensioni. Il pulsante Errori è di nuovo visibile. Fai clic per visualizzare il nuovo log.
Uncaught ReferenceError: tabs is not defined
Gli errori popup possono essere visualizzati anche ispezionando il popup.
L'errore tabs is undefined indica che l'estensione non sa dove inserire lo script di contenuti.
Questo problema può essere corretto chiamando il metodo tabs.query() e selezionando la scheda attiva.
let changeColor = document.getElementById('changeColor');
chrome.storage.sync.get('color', function(data) {
changeColor.style.backgroundColor = data.color;
changeColor.setAttribute('value', data.color);
});
changeColor.onclick = function(element) {
let color = element.target.value;
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.executeScript(
tabs[0].id,
{code: 'document.body.style.backgroundColor = color;'});
});
};
Aggiorna il codice, fai clic sul pulsante Cancella tutto nell'angolo in alto a destra e ricarica l'estensione.
Script di contenuti
Aggiorna la pagina, apri il popup e fai clic sulla casella verde. E… no, lo sfondo non ha ancora cambiato colore. Torna alla pagina di gestione delle estensioni e… non c'è il pulsante Errori. Il probabile colpevole è lo script dei contenuti, che viene eseguito all'interno della pagina web.
Apri il riquadro DevTools della pagina web che l'estensione sta tentando di modificare.
Nella pagina di gestione delle estensioni verranno registrati solo gli errori di runtime console.warning e console.error.
Per utilizzare DevTools all'interno dello script dei contenuti, fai clic sulla Freccia del menu a discesa accanto a top e seleziona l'estensione.
L'errore indica che color non è definito. L'estensione non deve passare la variabile correttamente.
Correggi lo script iniettato per passare la variabile di colore al codice.
{code: 'document.body.style.backgroundColor = "' + color + '";'});
Schede di estensione
I log per le pagine dell'estensione visualizzate come scheda, ad esempio le pagine di override e le opzioni a pagina intera, si trovano nella console della pagina web e nella pagina di gestione delle estensioni.
Monitorare le richieste di rete
Spesso il popup invia tutte le richieste di rete necessarie prima che anche gli sviluppatori più veloci possano aprire DevTools. Per visualizzare queste richieste, aggiorna dal riquadro Rete. Il popup verrà reloaded senza chiudere il riquadro di DevTools.
Dichiarare le autorizzazioni
Sebbene le estensioni abbiano funzionalità simili a quelle delle pagine web, spesso richiedono l'autorizzazione per utilizzare determinate funzionalità, come cookie, spazio di archiviazione e richieste XMLHttp tra origini. Consulta l'articolo sulle autorizzazioni e le API di Chrome disponibili per assicurarti che un'estensione richieda le autorizzazioni corrette nel suo manifest.
{
"name": "Broken Background Color",
"version": "1.0",
"description": "Fix an Extension!",
"permissions": [
"activeTab",
"declarativeContent",
"storage"
],
"options_page": "options.html",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"manifest_version": 2
}
Passaggi successivi
Per ulteriori informazioni sul debug delle estensioni, guarda Sviluppo e debug. Scopri di più su Chrome DevTools leggendo la documentazione.