Fehler bei Erweiterungen beheben

Erweiterungen können die gleichen Debugging-Vorteile nutzen, die Chrome-Entwicklertools für Web seiten bieten. Sie haben jedoch einzigartige Verhaltensmerkmale. Um ein Experte im Debugging von Erweiterungen zu werden, müssen Sie diese Verhaltensmerkmale, die Funktionsweise der Erweiterungskomponenten und die Stellen kennen, an denen Fehler auftreten können. In diesem Tutorial erhalten Entwickler ein grundlegendes Verständnis des Debuggings von Erweiterungen.

Protokolle finden

Erweiterungen bestehen aus vielen verschiedenen Komponenten, die jeweils unterschiedliche Aufgaben haben. Laden Sie hier eine fehlerhafte Erweiterung herunter, um Fehlerprotokolle für verschiedene Erweiterungskomponenten zu finden.

Hintergrundskript

Rufen Sie die Seite zur Verwaltung von Chrome-Erweiterungen unter chrome://extensions auf und prüfen Sie, ob der Entwicklermodus aktiviert ist. Klicken Sie auf die Schaltfläche Entpackte Erweiterung laden und wählen Sie das Verzeichnis der fehlerhaften Erweiterung aus. Nachdem die Erweiterung geladen wurde, sollten drei Schaltflächen angezeigt werden: Details, Entfernen und Fehler in roter Schrift.

Klicken Sie auf die Schaltfläche Fehler , um das Fehlerprotokoll aufzurufen. Das Erweiterungssystem hat ein Problem im Hintergrundskript gefunden.

Uncaught TypeError: Cannot read property 'addListener' of undefined

Außerdem kann das Chrome-Entwicklertools-Panel für das Hintergrundskript geöffnet werden, indem Sie den blauen Link neben Ansichten untersuchen auswählen.

Kehren Sie zum Code zurück.

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

Das Hintergrundskript versucht, auf das onInstalled Ereignis zu warten. Der Eigenschafts name muss jedoch ein großes "I" enthalten. Aktualisieren Sie den Code, um den korrekten Aufruf widerzuspiegeln, klicken Sie rechts oben auf die Schaltfläche Alle löschen und laden Sie die Erweiterung neu.

Pop-up

Nachdem die Erweiterung korrekt initialisiert wurde, können andere Komponenten getestet werden. Aktualisieren Sie diese Seite oder öffnen Sie einen neuen Tab und rufen Sie eine beliebige Seite auf developer.chrome.com auf. Öffnen Sie das Pop-up und klicken Sie auf das grüne Quadrat. Und... nichts passiert.

Kehren Sie zur Seite zur Verwaltung von Erweiterungen zurück. Die Schaltfläche Fehler ist wieder da. Klicken Sie darauf, um das neue Protokoll aufzurufen.

Uncaught ReferenceError: tabs is not defined

Pop-up-Fehler können auch durch Untersuchen des Pop-ups angezeigt werden.

Der Fehler tabs is undefined bedeutet, dass die Erweiterung nicht weiß, wo das Content-Script eingefügt werden soll. Sie können dies korrigieren, indem Sie die tabs.query() Methode aufrufen und dann den aktiven Tab auswählen.

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

Aktualisieren Sie den Code, klicken Sie rechts oben auf die Schaltfläche Alle löschen und laden Sie die Erweiterung neu.

Content-Script

Aktualisieren Sie die Seite, öffnen Sie das Pop-up und klicken Sie auf das grüne Feld. Und... nein, die Hintergrundfarbe hat sich immer noch nicht geändert. Kehren Sie zur Seite zur Verwaltung von Erweiterungen zurück. Es gibt keine Schaltfläche Fehler. Der wahrscheinliche Grund ist das Content-Script, das auf der Webseite ausgeführt wird.

Öffnen Sie das Entwicklertools-Panel der Webseite, die die Erweiterung ändern möchte.

Auf der Seite zur Verwaltung von Erweiterungen werden nur Laufzeitfehler, console.warning und console.error aufgezeichnet.

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

Der Fehler besagt, dass color nicht definiert ist. Die Erweiterung übergibt die Variable möglicherweise nicht korrekt. Korrigieren Sie das eingefügte Skript, um die Farbvariable in den Code zu übergeben.

  {code: 'document.body.style.backgroundColor = "' + color + '";'});

Erweiterungstabs

Protokolle für Erweiterungsseiten, die als Tab angezeigt werden, z. B. Überschreibungsseiten und Optionen für die gesamte Seite, finden Sie in der Konsole der Webseite und auf der Seite zur Verwaltung von Erweiterungen.

Netzwerkanfragen überwachen

Das Pop-up führt oft alle erforderlichen Netzwerkanfragen aus, bevor auch der schnellste Entwickler die Entwicklertools öffnen kann. Wenn Sie diese Anfragen aufrufen möchten, aktualisieren Sie die Seite im Netzwerkbereich. Dadurch wird das Pop-up neu geladen, ohne das Entwicklertools-Panel zu schließen.

Berechtigungen deklarieren

Erweiterungen haben ähnliche Funktionen wie Webseiten, benötigen aber oft die Berechtigung, bestimmte Funktionen zu verwenden, z. B. Cookies, Speicher und Cross-Origin-XMLHttpRequest. Im Artikel zu Berechtigungen und in den verfügbaren Chrome-APIs finden Sie Informationen dazu, ob eine Erweiterung im Manifest die richtigen Berechtigungen anfordert.

  {
    "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
  }

Nächste Schritte

Weitere Informationen zum Debugging von Erweiterungen finden Sie unter Entwickeln und Debuggen. Weitere Informationen zu den Chrome-Entwicklertools finden Sie in der Dokumentation.