Fehler in Erweiterungen beheben

Erweiterungen können auf dieselben Chrome-Entwicklertools zugreifen wie Webseiten. Um ein Experte für das Debugging von Erweiterungen zu werden, müssen Sie wissen, wie Sie Protokolle und Fehler der verschiedenen Erweiterungskomponenten finden. In dieser Anleitung werden grundlegende Methoden zum Debuggen Ihrer Erweiterung vorgestellt.

Hinweis

In diesem Leitfaden wird davon ausgegangen, dass Sie über grundlegende Kenntnisse in der Webentwicklung verfügen. Wir empfehlen, Grundlagen zur Entwicklung für eine Einführung in den Workflow zur Entwicklung von Erweiterungen. Das Entwerfen der Benutzeroberfläche bietet eine Einführung für die Nutzer. Oberflächenelemente, die in Erweiterungen verfügbar sind.

Erweiterung deaktivieren

In diesem Tutorial wird nur eine Erweiterungskomponente nach der anderen gestört und anschließend wird gezeigt, wie sie behoben wird. Denken Sie daran, die in einem Abschnitt eingeführten Fehler rückgängig zu machen, bevor Sie mit dem nächsten Abschnitt fortfahren. Laden Sie zuerst das Broken Color-Beispiel auf GitHub herunter.

Manifestfehler beheben

Zerbrechen wir zuerst die Manifestdatei, indem wir den Schlüssel "version" in "versions" ändern:

manifest.json:

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

Versuchen wir nun, die Erweiterung lokal zu laden. Ein Fehlerdialogfeld wird angezeigt, das auf das Problem verweist:

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.

</ph>

Wenn ein Manifestschlüssel ungültig ist, kann die Erweiterung nicht geladen werden. wie das Problem behoben werden kann.

Machen Sie die Änderung rückgängig und geben Sie eine ungültige Berechtigung ein, um zu sehen, was passiert. Ändern Sie die Berechtigung "activeTab" zu "activetab" in Kleinbuchstaben:

manifest.json:

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

Speichern Sie die Erweiterung und versuchen Sie, sie noch einmal zu laden. Sie sollte diesmal erfolgreich geladen werden. In der Erweiterung Auf der Verwaltungsseite sehen Sie drei Schaltflächen: Details, Entfernen und Fehler. Das Feld Fehler Wenn ein Fehler vorliegt, wird die Beschriftung der Schaltfläche rot. Klicken Sie auf die Schaltfläche Fehler, um die folgenden Fehler:

Permission 'activetab' is unknown or URL pattern is malformed.

</ph>

Bevor Sie fortfahren, ändern Sie die Berechtigung wieder. Klicken Sie dann rechts oben auf Alle löschen, um die Protokolle zu löschen, und aktualisieren Sie die Erweiterung.

</ph> <ph type="x-smartling-placeholder">

Fehler im Service Worker beheben

Logs suchen

Der Service Worker legt die Standardfarbe für den Speicher fest und protokolliert sie in der Konsole. Wenn Sie sich dieses Protokoll ansehen möchten, öffnen Sie den Bereich mit den Chrome-Entwicklertools, indem Sie auf den blauen Link neben Ansichten prüfen klicken.

</ph> <ph type="x-smartling-placeholder">

Fehler ermitteln

Zerstören wir den Service Worker, indem wir onInstalled in den Kleinbuchstaben oninstalled ändern:

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

Aktualisieren Sie die Seite und klicken Sie auf Fehler, um das Fehlerprotokoll aufzurufen. Der erste Fehler informiert Sie darüber, dass der Service Worker nicht registriert werden konnte. Dies bedeutet, dass bei der Initiierung ein Fehler aufgetreten ist:

Service worker registration failed. Status code: 15.

</ph>

Der tatsächliche Fehler tritt auf:

Uncaught TypeError: Cannot read properties of undefined (reading 'addListener')

</ph>

Machen Sie den von uns vorgestellten Fehler rückgängig, klicken Sie oben rechts auf Alle löschen und aktualisieren Sie die Erweiterung.

Service Worker-Status prüfen

So können Sie ermitteln, wann der Service Worker zum Ausführen von Aufgaben aufgeweckt wird:

1. Kopieren Sie die Erweiterungs-ID, die sich über „Ansichten prüfen“ befindet. <ph type="x-smartling-placeholder">

   </ph> <ph type="x-smartling-placeholder">

2. Öffnen Sie die Manifestdatei im Browser. Beispiel: text chrome-extension://YOUR_EXTENSION_ID/manifest.json
3. Überprüfen Sie die Datei.
4. Gehen Sie zum Bereich Anwendung.
5. Wechseln Sie zum Bereich Service Worker.

Zum Testen des Codes starten oder beenden Sie den Service Worker über die Links neben status.

</ph> <ph type="x-smartling-placeholder">

Wenn Sie Änderungen am Service Worker-Code vorgenommen haben, können Sie auf Aktualisieren oder skip Waiting klicken, um die Änderungen sofort zu übernehmen.

</ph> <ph type="x-smartling-placeholder">

Fehler im Pop-up beheben

Nachdem die Erweiterung nun korrekt initialisiert wurde, können wir das Pop-up unterbrechen, indem wir die unten hervorgehobenen Zeilen auskommentieren:

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

Kehren Sie zur Seite „Verwaltung von Erweiterungen“ zurück. Die Schaltfläche Fehler wird wieder angezeigt. Klicken Sie darauf, um um sich das neue Log anzusehen. Es wird die folgende Fehlermeldung angezeigt:

Uncaught ReferenceError: tabs is not defined

</ph>

Sie können die Entwicklertools des Pop-ups öffnen, indem Sie das Pop-up überprüfen.

</ph> <ph type="x-smartling-placeholder">

Der Fehler tabs is undefined besagt, dass die Erweiterung nicht weiß, wo das Inhaltsskript eingefügt werden soll. Korrigieren Sie dies, indem Sie tabs.query() aufrufen und den aktiven Tab auswählen.

Klicken Sie zum Aktualisieren des Codes oben rechts auf die Schaltfläche Clear all (Alle löschen) und aktualisieren Sie dann das .

Fehler in Content-Skripts beheben

Unterbrechen wir nun das Content-Skript, indem wir die Variable "color" in "colors" ändern:

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

Aktualisieren Sie die Seite, öffnen Sie das Pop-up und klicken Sie auf das grüne Kästchen. Es passiert nichts.

Auf der Seite „Erweiterungsverwaltung“ wird die Schaltfläche Fehler nicht angezeigt. Das liegt daran, dass nur die Laufzeitfehler console.warning und console.error werden auf der Seite „Verwaltung von Erweiterungen“ aufgezeichnet.

Content-Skripts werden auf einer Website ausgeführt. Um diese Fehler zu finden, müssen wir die Webseite überprüfen, die die Erweiterung zu ändern versucht:

Uncaught ReferenceError: colors is not defined

</ph>

Wenn Sie die Entwicklertools im Content-Skript verwenden möchten, klicken Sie auf den Drop-down-Pfeil neben oben und wählen Sie die Erweiterung aus.

</ph> <ph type="x-smartling-placeholder">

Der Fehler besagt, dass colors nicht definiert ist. Die Erweiterung darf die Variable nicht richtig übergeben. Korrigieren Sie das eingefügte Skript, damit die Variable "color" an den Code übergeben wird.

Netzwerkanfragen überwachen

Das Pop-up-Fenster führt oft alle erforderlichen Netzwerkanfragen aus, können Entwickler die Entwicklertools öffnen. Wenn Sie diese Anfragen sehen möchten, aktualisieren Sie die Seite im Netzwerkbereich. Es lädt das Pop-up-Fenster neu, ohne den Entwicklertools-Bereich zu schließen.

</ph> <ph type="x-smartling-placeholder">

Erklärung von Berechtigungen

Einige Erweiterungs-APIs Berechtigungen erfordern. Weitere Informationen finden Sie im Artikel Berechtigungen und in der Chrome-Hilfe APIs, um sicherzustellen, dass eine Erweiterung die richtigen Berechtigungen im Manifest anfordert.

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

Weitere Informationen

Weitere Informationen zu den Chrome-Entwicklertools finden Sie in der Dokumentation.