Extensies kunnen dezelfde debugmogelijkheden benutten als Chrome DevTools voor webpagina's, maar ze hebben unieke gedragseigenschappen. Om een expert in het debuggen van extensies te worden, is het belangrijk om deze gedragingen te begrijpen, te weten hoe de componenten van een extensie met elkaar samenwerken en waar je bugs kunt vinden. Deze handleiding geeft ontwikkelaars een basiskennis van het debuggen van extensies.
Zoek de logboeken op.
Extensies bestaan uit veel verschillende componenten, en elk van deze componenten heeft een eigen taak. Download hier een defecte extensie om de foutenlogboeken voor de verschillende extensiecomponenten te bekijken.
Achtergrondscript
Ga naar de pagina voor extensiebeheer in Chrome via chrome://extensions en zorg ervoor dat de ontwikkelaarsmodus is ingeschakeld. Klik op de knop ' Niet-ingepakte extensie laden' en selecteer de map van de defecte extensie. Nadat de extensie is geladen, zouden er drie knoppen moeten verschijnen: 'Details' , 'Verwijderen' en 'Fouten' (in rode letters).
Klik op de knop Fouten om het foutenlogboek te bekijken. Het extensiesysteem heeft een probleem in het achtergrondscript gevonden.
Uncaught TypeError: Cannot read property 'addListener' of undefined
Daarnaast kan het Chrome DevTools-paneel voor het achtergrondscript worden geopend door op de blauwe link naast 'Inspect views' te klikken.
Ga terug naar de code.
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()]
}]);
});
});
Het achtergrondscript probeert te luisteren naar de onInstalled -gebeurtenis, maar de eigenschapsnaam vereist een hoofdletter "I". Pas de code aan zodat deze de juiste aanroep weergeeft, klik op de knop 'Alles wissen' in de rechterbovenhoek en herlaad vervolgens de extensie.
Pop-up
Nu de extensie correct is geïnitialiseerd, kunnen andere componenten worden getest. Vernieuw deze pagina, of open een nieuw tabblad en ga naar een willekeurige pagina op developer.chrome.com, open de pop-up en klik op het groene vierkantje. En... er gebeurt niets.
Ga terug naar de pagina Extensiebeheer; de knop Fouten is weer verschenen. Klik erop om het nieuwe logboek te bekijken.
Uncaught ReferenceError: tabs is not defined
Foutmeldingen in pop-ups kunnen ook worden bekeken door de pop-up te inspecteren.
De foutmelding ' tabs is undefined geeft aan dat de extensie niet weet waar het content-script moet worden ingevoegd. Dit kan worden verholpen door de methode tabs.query() aan te roepen en vervolgens het actieve tabblad te selecteren.
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;'});
});
};
Werk de code bij, klik op de knop 'Alles wissen' in de rechterbovenhoek en herlaad vervolgens de extensie.
Inhoudsscript
Vernieuw de pagina, open de pop-up en klik op het groene vakje. En... nee, de achtergrond is nog steeds niet van kleur veranderd! Ga terug naar de pagina voor extensiebeheer en... er is geen knop 'Fouten' . De waarschijnlijke boosdoener is het content-script dat in de webpagina wordt uitgevoerd.
Open het DevTools-paneel van de webpagina die de extensie probeert te wijzigen.
Alleen runtimefouten, console.warning en console.error worden geregistreerd op de pagina voor extensiebeheer.
Om DevTools vanuit het contentscript te gebruiken, klikt u op het uitklapmenu naast 'boven' en selecteert u de extensie.
De foutmelding geeft aan dat color niet is gedefinieerd. De extensie geeft de variabele waarschijnlijk niet correct door. Corrigeer het geïnjecteerde script zodat de variabele 'color' correct in de code wordt doorgegeven.
{code: 'document.body.style.backgroundColor = "' + color + '";'});
Uitbreidingstabbladen
Logboeken voor extensiepagina's die als tabblad worden weergegeven, zoals overschrijvingspagina's en opties voor volledige pagina's , zijn te vinden in de webpagina-console en op de pagina voor extensiebeheer.
Monitor netwerkverzoeken
Het pop-upvenster voert vaak alle benodigde netwerkverzoeken uit voordat zelfs de snelste ontwikkelaars de DevTools kunnen openen. Om deze verzoeken te bekijken, vernieuw je de pagina vanuit het netwerkpaneel. Hierdoor wordt het pop-upvenster opnieuw geladen zonder dat het DevTools-paneel wordt gesloten.
Machtigingen declareren
Hoewel extensies vergelijkbare mogelijkheden hebben als webpagina's, hebben ze vaak toestemming nodig om bepaalde functies te gebruiken, zoals cookies , opslag en Cross-Origin XMLHttpRequest . Raadpleeg het artikel over machtigingen en de beschikbare Chrome API's om ervoor te zorgen dat een extensie de juiste machtigingen aanvraagt in het 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
}
Volgende stappen
Voor meer informatie over het debuggen van extensies kunt u de video 'Ontwikkelen en debuggen' bekijken. Lees de documentatie voor meer informatie over Chrome Devtools .