Rozszerzenia mogą korzystać z tych samych zalet debugowania, które Narzędzia deweloperskie w Chrome zapewniają stronom internetowym, ale mają unikalne właściwości działania. Aby zostać mistrzem debugowania rozszerzeń, musisz zrozumieć te zachowania, sposób, w jaki komponenty rozszerzenia współpracują ze sobą, oraz miejsca, w których mogą pojawiać się błędy. Ten samouczek zawiera podstawowe informacje o debugowaniu rozszerzeń.
Znajdowanie dzienników
Rozszerzenia składają się z wielu różnych komponentów, a każdy z nich ma własne zadania. Aby rozpocząć lokalizowanie logów błędów dotyczących różnych komponentów rozszerzenia, pobierz uszkodzone rozszerzenie tutaj.
Skrypt działający w tle
Otwórz stronę zarządzania rozszerzeniami Chrome pod adresem chrome://extensions i upewnij się, że tryb programisty jest włączony. Kliknij przycisk Wczytaj rozpakowane i wybierz katalog uszkodzonego rozszerzenia. Po załadowaniu rozszerzenia powinny pojawić się 3 przyciski: Szczegóły, Usuń i Błędy (czerwonymi literami).
Aby wyświetlić dziennik błędów, kliknij przycisk Błędy. System rozszerzeń wykrył problem w skrypcie działającym w tle.
Uncaught TypeError: Cannot read property 'addListener' of undefined
Panel Narzędzi deweloperskich w Chrome możesz też otworzyć w przypadku skryptu działającego w tle, klikając niebieski link obok opcji Zbadaj 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 działający w tle próbuje nasłuchiwać zdarzenia onInstalled, ale nazwa właściwości wymaga wielkiej litery „I”. Zaktualizuj kod, aby odzwierciedlał prawidłowe wywołanie, kliknij przycisk Wyczyść wszystko w prawym górnym rogu, a następnie ponownie załaduj rozszerzenie.
Wyskakujące okienko
Teraz, gdy rozszerzenie jest prawidłowo inicjowane, można przetestować inne komponenty. Odśwież tę stronę lub otwórz nową kartę i przejdź na dowolną stronę w domenie developer.chrome.com, otwórz wyskakujące okienko i kliknij zielony kwadrat. I … nic się nie dzieje.
Wróć na stronę zarządzania rozszerzeniami. Przycisk Błędy pojawi się ponownie. Kliknij go, aby wyświetlić nowy log.
Uncaught ReferenceError: tabs is not defined
Błędy wyskakujących okienek można też wyświetlić, sprawdzając wyskakujące okienko.
Błąd tabs is undefined oznacza, że rozszerzenie nie wie, gdzie wstrzyknąć skrypt treści.
Możesz to poprawić, wywołując metodę tabs.query(), a następnie wybierając aktywną kartę.
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 następnie ponownie załaduj rozszerzenie.
Skrypt dotyczący zawartości
Odśwież stronę, otwórz wyskakujące okienko i kliknij zielone pole. I nic z tego, tło nadal nie zmieniło koloru. Wróć na stronę zarządzania rozszerzeniami i zobacz, że nie ma przycisku Błędy. Prawdopodobnie jest to skrypt treści, który działa na stronie internetowej.
Otwórz panel Narzędzia deweloperskie na stronie internetowej, którą rozszerzenie próbuje zmienić.
Na stronie zarządzania rozszerzeniami będą rejestrowane tylko błędy czasu działania console.warning i console.error.
Aby używać Narzędzi deweloperskich w skrypcie treści, kliknij strzałkę menu obok opcji góra i wybierz rozszerzenie.
Błąd informuje, że 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 karta, np. stron zastępujących i opcji pełnoekranowych, znajdziesz 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 programiści zdążą otworzyć Narzędzia deweloperskie. Aby wyświetlić te żądania, odśwież panel sieci. Spowoduje to ponowne wczytanie wyskakującego okienka bez zamykania panelu Narzędzi deweloperskich.
Deklarowanie uprawnień
Chociaż rozszerzenia mają podobne możliwości jak strony internetowe, często potrzebują uprawnień do korzystania z określonych funkcji, takich jak pliki cookie, pamięć i XMLHttpRequest z innej domeny. Zapoznaj się z artykułem o uprawnieniach i dostępnymi interfejsami API Chrome, aby mieć pewność, że rozszerzenie prosi o odpowiednie uprawnienia w swoim pliku manifestu.
{
"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 filmie Developing and Debugging (Tworzenie i debugowanie). Więcej informacji o Narzędziach deweloperskich w Chrome znajdziesz w dokumentacji.