Erweiterungen können dieselben Vorteile beim Entwickeln nutzen, die die Chrome-Entwicklertools für Webseiten bieten. Sie haben jedoch spezifische Verhaltenseigenschaften. Wenn Sie ein Meister im Entfernen von Erweiterungsfehlern werden möchten, müssen Sie diese Verhaltensweisen verstehen, wissen, wie Erweiterungskomponenten miteinander interagieren und wo Sie Fehler finden. In dieser Anleitung erhalten Entwickler ein grundlegendes Verständnis von Debugging-Erweiterungen.
Logs suchen
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 Ungepackt laden und wählen Sie das Verzeichnis der fehlerhaften Erweiterung aus. Nach dem Laden der Erweiterung sollten drei Schaltflächen angezeigt werden: Details, Entfernen und Fehler in roten Buchstaben.
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 können Sie das Chrome-Entwicklertools-Steuerfeld für das Hintergrundskript öffnen, indem Sie den blauen Link neben Ansichten prüfen 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 Ereignis onInstalled zu warten, aber der Property-Name muss mit einem großen „I“ beginnen. Aktualisieren Sie den Code, damit er den korrekten Aufruf enthält. Klicken Sie dann oben rechts auf die Schaltfläche Alles löschen und laden Sie die Erweiterung neu.
Pop-up
Nachdem die Erweiterung jetzt richtig 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 „Erweiterungsverwaltung“ zurück. Die Schaltfläche Fehler ist wieder sichtbar. Klicken Sie darauf, um das neue Protokoll aufzurufen.
Uncaught ReferenceError: tabs is not defined
Pop-up-Fehler können auch im Pop-up selbst angezeigt werden.
Der Fehler tabs is undefined gibt an, dass die Erweiterung nicht weiß, wo das Content-Script eingefügt werden soll.
Das kann korrigiert werden, indem die Methode tabs.query() aufgerufen und dann der aktive Tab ausgewählt wird.
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 laden Sie die Erweiterung dann neu.
Inhaltsskript
Aktualisiere die Seite, öffne das Pop-up und klicke auf das grüne Feld. Und… nein, der Hintergrund hat immer noch nicht die Farbe geändert. Ich kehre zur Seite „Erweiterungsverwaltung“ zurück und sehe, dass die Schaltfläche Fehler nicht angezeigt wird. Der wahrscheinliche Schuldige ist das Inhaltsskript, das auf der Webseite ausgeführt wird.
Öffnen Sie den DevTools-Bereich der Webseite, die die Erweiterung ändern soll.
Auf der Seite „Erweiterungen verwalten“ werden nur Laufzeitfehler, console.warning und console.error protokolliert.
Wenn Sie die Entwicklertools direkt im Inhaltsscript verwenden möchten, klicken Sie auf den Drop-down-Pfeil neben top (oben) und wählen Sie die Erweiterung aus.
Der Fehler weist darauf hin, dass color nicht definiert ist. Die Variable wird von der Erweiterung nicht richtig übergeben.
Korrigieren Sie das eingeschleuste Script, damit die Variable „color“ an den Code übergeben wird.
{code: 'document.body.style.backgroundColor = "' + color + '";'});
Tabs für Erweiterungen
Protokolle für Erweiterungsseiten, die als Tab angezeigt werden, z. B. Überschreibungsseiten und Optionen für die Vollansicht, finden Sie in der Konsole für Webseiten und auf der Seite zum Verwalten von Erweiterungen.
Netzwerkanfragen überwachen
Das Pop-up sendet häufig alle erforderlichen Netzwerkanfragen, bevor selbst die schnellsten Entwickler die DevTools öffnen können. Wenn Sie diese Anfragen sehen möchten, aktualisieren Sie den Netzwerkbereich. Das Pop-up wird neu geladen, ohne dass das DevTools-Steuerfeld geschlossen wird.
Berechtigungen deklarieren
Erweiterungen haben ähnliche Funktionen wie Webseiten, benötigen aber oft eine Berechtigung, um bestimmte Funktionen wie Cookies, Speicher und Cross-Origin XMLHttpRequsts zu verwenden. Lesen Sie den Artikel zu Berechtigungen und die Informationen zu den verfügbaren Chrome APIs, um sicherzustellen, dass eine Erweiterung in ihrem 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 Debuggen von Erweiterungen finden Sie im Video Entwickeln und Debuggen. Weitere Informationen zu den Chrome-Entwicklertools finden Sie in der Dokumentation.