Rozszerzenia mogą korzystać z tych samych funkcji debugowania, które Narzędzia deweloperskie w Chrome udostępniają w przypadku stron internetowych, ale mają unikalne właściwości działania. Aby stać się mistrzem debugowania rozszerzeń, musisz zrozumieć te zachowania, sposób współpracy komponentów rozszerzenia oraz miejsca, w których można znaleźć błędy. Ten samouczek zawiera podstawowe informacje o debugowaniu rozszerzeń.
Znajdowanie dzienników
Rozszerzenia składają się z wielu różnych komponentów, które mają swoje indywidualne zadania. Aby rozpocząć wyszukiwanie logów błędów dotyczących różnych komponentów rozszerzenia, pobierz uszkodzone rozszerzenie tutaj.
Skrypt tła
Otwórz stronę zarządzania rozszerzeniami Chrome (chrome://extensions) i upewnij się, że tryb programisty jest włączony. Kliknij przycisk Wczytaj rozpakowany plik i wybierz katalog uszkodzonej rozszerzenia. Po załadowaniu rozszerzenia powinny pojawić się 3 przyciski: Szczegóły, Usuń i Błędy (w czerwieni).
Aby wyświetlić dziennik błędów, kliknij przycisk Błędy. System rozszerzeń wykrył problem ze skryptem w tle.
Uncaught TypeError: Cannot read property 'addListener' of undefined
Dodatkowo panel Narzędzi deweloperskich w Chrome można otworzyć dla skryptu uruchamianego w tle, klikając niebieski link obok Wyświetl widoki.
Wróć do kodu.
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()]
}]);
});
});
Skrypt w tle próbuje nasłuchiwać zdarzenia onInstalled, ale nazwa właściwości wymaga wielkiej litery „I”. Zaktualizuj kod, aby odzwierciedlał prawidłowy wywołanie, kliknij w prawym górnym rogu przycisk Wyczyść wszystko, a następnie ponownie załaduj rozszerzenie.
Wyskakujące okienko
Teraz, gdy rozszerzenie jest prawidłowo inicjowane, możesz przetestować inne komponenty. Odśwież tę stronę lub otwórz nową kartę i wejdź na dowolną stronę na stronie developer.chrome.com, otwórz wyskakujące okienko i kliknij zielony kwadrat. I... nic się nie dzieje.
Wróć na stronę zarządzania rozszerzeniami. Ponownie pojawi się przycisk Błędy. Kliknij go, aby wyświetlić nowy dziennik.
Uncaught ReferenceError: tabs is not defined
Błędy wyskakujących okienek możesz też sprawdzić, wyświetlając je.
Błąd tabs is undefined wskazuje, że rozszerzenie nie wie, gdzie wstrzyknąć skrypt treści.
Można to naprawić, wywołując metodę tabs.query(), a następnie wybierając kartę aktywną.
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;'});
});
};
Zaktualizuj kod, w prawym górnym rogu kliknij przycisk Wyczyść wszystko, a potem ponownie załaduj rozszerzenie.
Skrypt treści
Odśwież stronę, otwórz wyskakujące okienko i kliknij zielone pole. Nie, tło nadal nie zmieniło kolorów. Wróć na stronę zarządzania rozszerzeniami. Nie ma tam przycisku Błędy. Prawdopodobnym winowajcą jest skrypt treści, który działa na stronie internetowej.
Otwórz panel Narzędzi deweloperskich strony internetowej, którą rozszerzenie próbuje zmodyfikować.
Na stronie zarządzania rozszerzeniami będą rejestrowane tylko błędy czasu wykonywania, console.warning i console.error.
Aby użyć Narzędzi deweloperskich w ramach skryptu treści, kliknij strzałkę w dół obok opcji góra i wybierz rozszerzenie.
Błąd: zmienna color jest niezdefiniowana. Rozszerzenie nie przekazuje zmiennej prawidłowo.
Popraw wstrzyknięty skrypt, aby przekazać zmienną koloru do kodu.
{code: 'document.body.style.backgroundColor = "' + color + '";'});
Karty rozszerzeń
Dzienniki stron rozszerzeń wyświetlanych jako karty, np. strony zastępcze i opcje pełnej strony, można znaleźć w konsoli strony internetowej i na stronie zarządzania rozszerzeniami.
Monitorowanie żądań sieciowych
Wyskakujące okienko często wysyła wszystkie wymagane żądania sieciowe, zanim nawet najszybsi deweloperzy zdążą otworzyć DevTools. Aby wyświetlić te żądania, odśwież panel sieci. Spowoduje to ponowne załadowanie wyskakującego okienka bez zamykania panelu Narzędzia deweloperskie.
Deklarowanie uprawnień
Chociaż rozszerzenia mają podobne możliwości jak strony internetowe, często potrzebują uprawnień do korzystania z pewnych funkcji, takich jak pliki cookie, magazynowanie i żądania XMLHttpRequsts między domenami. Aby sprawdzić, czy rozszerzenie prosi o prawidłowe uprawnienia w manifest, zapoznaj się z artykułem o uprawnieniach i dostępnymi interfejsami API Chrome.
{
"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
}
Dalsze kroki
Więcej informacji o debugowaniu rozszerzeń znajdziesz w artykule Tworzenie i debugowanie. Dowiedz się więcej o Narzędziach deweloperskich w Chrome, czytając dokumentację.