Für Erweiterungen stehen die gleichen Debugging-Vorteile zur Verfügung, die die Chrome-Entwicklertools für Webseiten bieten. Sie haben jedoch besondere Eigenschaften. Um ein Master-Erweiterungs-Debugger zu werden, müssen Sie mit diesen Verhaltensweisen vertraut sein, wie Erweiterungskomponenten miteinander funktionieren und wo Fehler behoben werden können. In dieser Anleitung erhalten Entwickler grundlegende Informationen zum Debugging von Erweiterungen.
Logs suchen
Erweiterungen bestehen aus vielen verschiedenen Komponenten und haben individuelle Verantwortlichkeiten. Laden Sie hier eine fehlerhafte Erweiterung herunter, um nach Fehlerlogs für verschiedene Erweiterungskomponenten zu suchen.
Hintergrundskript
Rufen Sie die Verwaltungsseite für Chrome-Erweiterungen unter chrome://extensions auf und prüfen Sie, ob der Entwicklermodus aktiviert ist. Klicken Sie auf die Schaltfläche Load Unpacked (Entpackte Datei laden) und wählen Sie das Verzeichnis der fehlerhaften Erweiterung aus. Nachdem die Erweiterung geladen wurde, sollte sie drei Schaltflächen in roten Buchstaben enthalten: Details, Remove und Errors.
Klicken Sie auf die Schaltfläche Fehler, um das Fehlerprotokoll aufzurufen. Das Erweiterungssystem hat ein Problem im Hintergrundskript erkannt.
Uncaught TypeError: Cannot read property 'addListener' of undefined
Außerdem kann der Bereich mit den Chrome-Entwicklertools für das Hintergrundskript geöffnet werden. Wählen Sie dazu den blauen Link neben Ansichten prüfen aus.
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 Ereignis onInstalled zu warten, aber der Attributname erfordert ein großes „I“. Passen Sie den Code an den korrekten Aufruf an, klicken Sie oben rechts auf die Schaltfläche Alle löschen und aktualisieren Sie die Erweiterung.
Pop-up
Nachdem die Erweiterung nun korrekt initialisiert wird, 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 dann das Pop-up und klicken Sie auf das grüne Quadrat. Und... nichts passiert.
Gehen Sie zurück zur Seite für die Verwaltung von Erweiterungen. Die Schaltfläche Fehler wird wieder angezeigt. Klicken Sie darauf, um das neue Log aufzurufen.
Uncaught ReferenceError: tabs is not defined
Pop-up-Fehler können auch im Pop-up angezeigt werden.
Der Fehler tabs is undefined besagt, dass die Erweiterung nicht weiß, wo das Inhaltsskript eingefügt werden soll.
Sie können das Problem beheben, indem Sie die Methode tabs.query() 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 oben rechts auf die Schaltfläche Alle löschen und aktualisieren Sie dann die Erweiterung.
Inhaltsskript
Aktualisieren Sie die Seite, öffnen Sie das Pop-up-Fenster und klicken Sie auf das grüne Feld. Und... nein, die Farbe des Hintergrunds hat sich immer noch nicht geändert! Wenn Sie zur Seite für die Verwaltung von Erweiterungen zurückkehren, wird die Schaltfläche Fehler nicht angezeigt. Die wahrscheinliche Ursache ist das Inhaltsskript, das auf der Webseite ausgeführt wird.
Öffne den Bereich „Entwicklertools“ der Webseite, die durch die Erweiterung geändert werden soll.
Nur Laufzeitfehler, console.warning und console.error werden auf der Seite zur Verwaltung von Erweiterungen protokolliert.
Um die Entwicklertools im Inhaltsskript zu verwenden, klicken Sie auf den Drop-down-Pfeil neben oben und wählen Sie die Erweiterung aus.
Der Fehler besagt, dass color nicht definiert ist. Die Erweiterung darf die Variable nicht korrekt übergeben.
Korrigieren Sie das eingefügte Skript, um die Farbvariable an den Code zu übergeben.
{code: 'document.body.style.backgroundColor = "' + color + '";'});
Tabs für Erweiterungen
Logs für Erweiterungsseiten, die als Tab angezeigt werden, z. B. Seiten überschreiben und Ganzseitenoptionen, finden Sie in der Webseitenkonsole und auf der Verwaltungsseite für Erweiterungen.
Netzwerkanfragen überwachen
Das Pop-up sendet häufig alle erforderlichen Netzwerkanfragen, bevor selbst die schnellsten Entwickler die Entwicklertools öffnen können. Wenn Sie diese Anfragen sehen möchten, aktualisieren Sie die Seite im Netzwerkbereich. Das Pop-up wird neu geladen, ohne den Bereich „Entwicklertools“ zu schließen.
Erklärung von Berechtigungen
Erweiterungen haben zwar ähnliche Funktionen wie Webseiten, benötigen jedoch häufig eine Berechtigung zur Verwendung bestimmter Funktionen wie Cookies, Speicher und Cross-Origin XMLHttpRequsts. Lesen Sie den Artikel zu Berechtigungen und die verfügbaren Chrome APIs, um sicherzustellen, dass eine Erweiterung die richtigen Berechtigungen im Manifest 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 zur Fehlerbehebung bei Erweiterungen finden Sie unter Entwicklung und Fehlerbehebung. Weitere Informationen zu den Chrome-Entwicklertools finden Sie in der Dokumentation.