Le estensioni possono sfruttare gli stessi vantaggi di debug offerti da Chrome DevTools per le pagine web, ma hanno proprietà di comportamento univoche. Per diventare un debugger di estensioni principali è necessario comprendere questi comportamenti, come funzionano tra loro i componenti delle estensioni e dove intervenire. Questo tutorial fornisce agli sviluppatori una conoscenza di base delle estensioni di debug.
Individua i log
Le estensioni sono composte da molti componenti diversi, che hanno responsabilità individuali. Scarica qui un'estensione non funzionante per iniziare a individuare i log degli errori per diversi componenti dell'estensione.
Script in background
Vai alla pagina di gestione delle estensioni di Chrome all'indirizzo chrome://extensions e assicurati che la modalità sviluppatore sia attiva. Fai clic sul pulsante Carica file non pacchettizzato e seleziona la directory dell'estensione inaccessibile. 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, puoi aprire il riquadro Chrome DevTools per lo script in background selezionando il link blu accanto a Ispeziona visualizzazioni.
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 rimanere in ascolto dell'evento onInstalled, ma il nome della proprietà richiede una "I" in lettere maiuscole. Aggiorna il codice in modo che rifletta la chiamata corretta, fai clic sul pulsante Cancella tutto nell'angolo in alto a destra, quindi ricarica l'estensione.
Popup
Ora che l'estensione viene inizializzata correttamente, è possibile testare gli altri componenti. Aggiorna questa pagina o apri una nuova scheda e vai a una qualsiasi pagina su developer.chrome.com, apri il popup e fai clic sul quadrato verde. E... non succede nulla.
Torna alla pagina Gestione delle estensioni: il pulsante Errori è di nuovo visualizzato. Fai clic per visualizzare il nuovo log.
Uncaught ReferenceError: tabs is not defined
Gli errori dei 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, quindi ricarica l'estensione.
Script dei 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 vedrai il pulsante Errori. La causa più probabile è lo script dei contenuti, che viene eseguito all'interno della pagina web.
Apri il riquadro DevTools nella pagina web che l'estensione sta cercando di modificare.
Nella pagina di gestione delle estensioni verranno registrati solo gli errori di runtime, console.warning e console.error.
Per utilizzare DevTools dallo script di contenuti, fai clic sulla freccia del menu a discesa accanto a In alto e seleziona l'estensione.
L'errore indica che color non è definito. L'estensione non deve trasmettere correttamente la variabile.
Correggi lo script inserito per passare la variabile del colore nel codice.
{code: 'document.body.style.backgroundColor = "' + color + '";'});
Schede delle estensioni
I log delle pagine delle estensioni visualizzate come scheda, ad esempio override delle pagine e delle opzioni a pagina intera, sono disponibili nella console della pagina web e nella pagina di gestione delle estensioni.
Monitora le richieste di rete
Il popup spesso esegue tutte le richieste di rete necessarie prima che anche gli sviluppatori più veloci possano aprire DevTools. Per visualizzare queste richieste, aggiorna dal riquadro Rete. Ricarica il popup senza chiudere il riquadro DevTools.
Dichiara le autorizzazioni
Sebbene le estensioni abbiano funzionalità simili a quelle delle pagine web, spesso hanno bisogno dell'autorizzazione per utilizzare determinate funzionalità, come cookie, archiviazione e XMLHttpRequsts tra origini. Consulta l'articolo sulle autorizzazioni e le API di Chrome disponibili per verificare che un'estensione richieda le autorizzazioni corrette nel 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, visita la pagina Developing and Debugging (Sviluppo e debug delle estensioni). Scopri di più sugli Strumenti per sviluppatori di Chrome leggendo la documentazione.