Debug extensies

Extensies hebben toegang tot dezelfde Chrome DevTools als webpagina's. Om een ​​expert te worden in het debuggen van extensies, moet u weten hoe u logbestanden en fouten van de verschillende extensiecomponenten kunt lokaliseren. Deze tutorial biedt fundamentele technieken voor het opsporen van fouten in uw extensie.

Voordat je begint

In deze handleiding wordt ervan uitgegaan dat u over basiservaring op het gebied van webontwikkeling beschikt. We raden u aan de Basisbeginselen van ontwikkeling te lezen voor een inleiding tot de workflow voor het ontwikkelen van extensies. Ontwerp de gebruikersinterface geeft u een introductie tot de gebruikersinterface-elementen die beschikbaar zijn in extensies.

Breek de extensie

In deze zelfstudie wordt één extensiecomponent tegelijk afgebroken en wordt vervolgens gedemonstreerd hoe u dit kunt oplossen. Vergeet niet om de bugs die in een sectie zijn geïntroduceerd ongedaan te maken voordat u doorgaat naar de volgende sectie. Begin met het downloaden van het Broken Color-voorbeeld op GitHub.

Debug het manifest

Laten we eerst het manifestbestand opsplitsen door de sleutel "version" te wijzigen in "versions" :

manifest.json:

{
  "name": "Broken Background Color",
  "version": "1.0",
  "versions": "1.0",
  "description": "Fix an Extension!",
  ...
}

Laten we nu proberen de extensie lokaal te laden . U zult een foutdialoogvenster zien dat naar het probleem verwijst:

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.
Een extensie met een ongeldige manifestsleutel die een foutdialoogvenster activeert bij een poging om te laden.
Een ongeldig manifest-sleutelfoutdialoogvenster.

Wanneer een manifestsleutel ongeldig is, kan de extensie niet worden geladen, maar Chrome geeft u een hint over hoe u het probleem kunt oplossen.

Maak die wijziging ongedaan en voer een ongeldige machtiging in om te zien wat er gebeurt. Wijzig de machtiging "activeTab" in kleine letters "activetab" :

manifest.json:

{
  ...
  "permissions": ["activeTab", "scripting", "storage"],
  "permissions": ["activetab", "scripting", "storage"],
  ...
}

Sla de extensie op en probeer hem opnieuw te laden. Deze keer zou het succesvol moeten laden. Op de pagina Extensiebeheer ziet u drie knoppen: Details , Verwijderen en Fouten . Het label van de knop Fouten wordt rood als er een fout is opgetreden. Klik op de knop Fouten om de volgende fout te zien:

Permission 'activetab' is unknown or URL pattern is malformed.
Er wordt op de foutknop geklikt en er wordt een fout weergegeven
Zoek een foutmelding door op de knop Fouten te klikken.

Voordat u verdergaat, wijzigt u de toestemming terug, klikt u op Alles wissen in de rechterbovenhoek om de logboeken te wissen en laadt u de extensie opnieuw.

Knop Alles wissen
Extensiefouten wissen.

Debug de servicemedewerker

Logboeken lokaliseren

De servicemedewerker stelt de standaardkleur in op opslag en registreert deze op de console. Om dit logboek te bekijken, opent u het Chrome DevTools-paneel door de blauwe link naast Weergaven inspecteren te selecteren.

De DevTools openen voor de extensieservicemedewerker.
Servicemedewerker logt in in het Chrome DevTools-paneel.

Fouten lokaliseren

Laten we de servicemedewerker verbreken door onInstalled te veranderen in kleine letters oninstalled :

service-werker.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.');
  });
});

Vernieuw en klik op Fouten om het foutenlogboek te bekijken. De eerste foutmelding laat u weten dat de servicemedewerker zich niet heeft kunnen registreren. Dit betekent dat er iets mis is gegaan tijdens de initiatie:

Service worker registration failed. Status code: 15.
Registratie van servicemedewerker is mislukt. Statuscode: 15 foutmelding
Foutmelding bij registratie van servicemedewerker.

De daadwerkelijke fout komt na:

Uncaught TypeError: Cannot read properties of undefined (reading 'addListener')
Uncaught TypeError: Kan eigenschappen van ongedefinieerd foutbericht niet lezen
Niet-opgevangen TypeError-bericht.

Maak de bug die we hebben geïntroduceerd ongedaan, klik op Alles wissen in de rechterbovenhoek en laad de extensie opnieuw.

Controleer de status van de servicemedewerker

U kunt vaststellen wanneer de servicemedewerker wakker wordt om taken uit te voeren door deze stappen te volgen:

  1. Kopieer uw extensie-ID boven 'Weergaven inspecteren'.
    Extensie-ID op de pagina Extensiebeheer
    Extensie-ID op de pagina Extensiebeheer.
  2. Open uw manifestbestand in de browser. Bijvoorbeeld: text chrome-extension://YOUR_EXTENSION_ID/manifest.json
  3. Inspecteer het bestand.
  4. Navigeer naar het applicatiepaneel .
  5. Ga naar het deelvenster Servicemedewerkers .

Om uw code te testen, start of stopt u de servicemedewerker via de links naast status .

Status van servicemedewerker in het toepassingspaneel
Status van servicemedewerker in het toepassingspaneel. (Klik om de afbeelding te vergroten.)

Als u wijzigingen heeft aangebracht in de servicemedewerkercode, kunt u ook op Bijwerken of Wachten overslaan klikken om de wijzigingen onmiddellijk toe te passen.

Status van servicemedewerker in het toepassingspaneel
De servicemedewerker vernieuwen in het toepassingspaneel. (Klik om de afbeelding te vergroten.)

Debug de pop-up

Nu de extensie correct is geïnitialiseerd, gaan we de pop-up afbreken door commentaar te geven op de gemarkeerde regels hieronder:

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
    });
  });
});

Navigeer terug naar de pagina Extensiebeheer. De knop Fouten verschijnt opnieuw. Klik erop om het nieuwe logboek te bekijken. Het toont de volgende foutmelding:

Uncaught ReferenceError: tabs is not defined
Extensiebeheerpagina met pop-upfout
Extensiebeheerpagina met pop-upfout.

U kunt de DevTools van de pop-up openen door de pop-up te inspecteren.

DevTools geeft een pop-upfout weer.
DevTools geeft een pop-upfout weer.

De fout, tabs is undefined , zegt dat de extensie niet weet waar het inhoudsscript moet worden geïnjecteerd. Corrigeer dit door tabs.query() aan te roepen en vervolgens het actieve tabblad te selecteren.

Om de code bij te werken, klikt u op de knop Alles wissen in de rechterbovenhoek en laadt u de extensie opnieuw.

Foutopsporing in inhoudsscripts

Laten we nu het inhoudsscript afbreken door de variabele "kleur" te veranderen in "kleuren":

inhoud.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;
}  

Vernieuw de pagina, open de pop-up en klik op het groene vakje. Er gebeurt niets.

Als u naar de pagina Extensiebeheer gaat, verschijnt de knop Fouten niet. Dit komt omdat alleen runtime-fouten, console.warning en console.error worden geregistreerd op de pagina Extensiebeheer.

Inhoudsscripts worden binnen een website uitgevoerd. Om deze fouten te vinden, moeten we dus de webpagina inspecteren die de extensie probeert te wijzigen:

Uncaught ReferenceError: colors is not defined
Extensiefout weergegeven in webpaginaconsole
Extensiefout weergegeven in webpaginaconsole.

Om DevTools vanuit het inhoudsscript te gebruiken, klikt u op de vervolgkeuzepijl naast bovenaan en selecteert u de extensie.

Uncaught ReferenceError: kleuren zijn niet gedefinieerd
Uncaught ReferenceError: kleuren zijn niet gedefinieerd.

De fout zegt colors niet zijn gedefinieerd. De extensie mag de variabele niet correct doorgeven. Corrigeer het geïnjecteerde script om de kleurvariabele door te geven aan de code.

Netwerkverzoeken monitoren

De pop-up doet vaak alle vereiste netwerkverzoeken voordat zelfs de snelste ontwikkelaars DevTools kunnen openen. Om deze verzoeken te bekijken, vernieuwt u vanuit het netwerkpaneel. Het laadt de pop-up opnieuw zonder het DevTools-paneel te sluiten.

Vernieuw binnen het netwerkpaneel om pop-upnetwerkverzoeken te bekijken
Vernieuw binnen het netwerkpaneel om pop-upnetwerkverzoeken te bekijken.

Machtigingen declareren

Voor sommige extensie-API's zijn machtigingen vereist. Raadpleeg het machtigingsartikel en de Chrome API's om er zeker van te zijn dat een extensie de juiste machtigingen in het manifest vraagt.

  {
    "name": "Broken Background Color",
    ...
    "permissions": [
      "activeTab",
      "declarativeContent",
      "storage"
    ],
  ...
  }

Verder lezen

Lees meer over Chrome Devtools door de documentatie te lezen.