Rozszerzenia mogą korzystać z tych samych korzyści związanych z debugowaniem stron internetowych, które są dostępne w Narzędziach deweloperskich w Chrome, ale mają swoje unikalne właściwości. Aby zostać głównym debugerem rozszerzeń, musisz znać te zachowania oraz wiedzieć, jak współdziałają komponenty rozszerzeń i gdzie znaleźć błędy. Ten samouczek przedstawia podstawowe informacje o debugowaniu rozszerzeń.
Znajdowanie logów
Rozszerzenia składają się z wielu różnych komponentów, które odpowiadają różnym komponentom. Pobierz tutaj uszkodzone rozszerzenie, aby zacząć znajdować dzienniki błędów dotyczące różnych komponentów rozszerzenia.
Skrypt w tle
Wejdź na stronę zarządzania rozszerzeniami do Chrome (chrome://extensions) i upewnij się, że tryb programisty jest włączony. Kliknij przycisk Wczytaj bez pakietu i wybierz uszkodzony katalog rozszerzenia. Po załadowaniu rozszerzenia powinno ono mieć 3 przyciski: Szczegóły, Usuń i Błędy z czerwonymi literami.
Kliknij przycisk Błędy, aby wyświetlić dziennik błędów. System rozszerzeń wykrył problem w skrypcie działającym w tle.
Uncaught TypeError: Cannot read property 'addListener' of undefined
Dodatkowo możesz otworzyć panel Narzędzi deweloperskich w Chrome w przypadku skryptu działającego w tle, klikając niebieski link obok opcji Sprawdź 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 wielkich liter „I”. Zaktualizuj kod, aby odzwierciedlał prawidłowe wywołanie, kliknij przycisk Wyczyść wszystko w prawym górnym rogu, a następnie załaduj ponownie rozszerzenie.
Wyskakujące okienko
Gdy rozszerzenie zostanie poprawnie zainicjowane, można przetestować inne komponenty. Odśwież tę stronę lub otwórz nową kartę i przejdź na dowolną stronę na developers.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 dziennik.
Uncaught ReferenceError: tabs is not defined
Błędy związane z wyskakującymi okienkami można również sprawdzić, sprawdzając je.
Błąd (tabs is undefined) informuje, że rozszerzenie nie wie, gdzie wstawić skrypt treści.
Aby rozwiązać ten problem, wywołaj metodę tabs.query(), a następnie wybierz 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, kliknij przycisk Wyczyść wszystko w prawym górnym rogu, a następnie załaduj ponownie rozszerzenie.
Skrypt treści
Odśwież stronę, otwórz wyskakujące okienko i kliknij zielone pole. I tak, tło nadal nie zmieniło koloru! Wróć na stronę zarządzania rozszerzeniami i... nie ma przycisku Błędy. Prawdopodobną przyczyną problemu jest skrypt treści, który działa w obrębie strony internetowej.
Otwórz panel Narzędzi deweloperskich na stronie internetowej, którą rozszerzenie próbuje zmienić.
Na stronie zarządzania rozszerzeniami będą rejestrowane tylko błędy środowiska wykonawczego, console.warning i console.error.
Aby użyć Narzędzi deweloperskich z poziomu skryptu dotyczącego treści, kliknij strzałkę w dół obok góry i wybierz rozszerzenie.
Informuje o tym, że color nie jest zdefiniowany. Rozszerzenie nie może prawidłowo przekazywać zmiennej.
Skoryguj wstrzyknięty skrypt, aby przekazywał do kodu zmienną koloru.
{code: 'document.body.style.backgroundColor = "' + color + '";'});
Karty rozszerzeń
Dzienniki stron rozszerzeń wyświetlanych na karcie, takie jak zastępowanie stron i opcje pełnoekranowe, można znaleźć w konsoli stron internetowych oraz na stronie zarządzania rozszerzeniami.
Monitorowanie żądań sieciowych
W wyskakującym okienku często wyświetlają się wszystkie wymagane żądania sieciowe, zanim nawet najwięksi programiści będą mogli otworzyć Narzędzia deweloperskie. Aby wyświetlić te żądania, odśwież w panelu sieci. Wyskakujące okienko zostanie ponownie wczytane bez zamykania panelu Narzędzi deweloperskich.
Deklarowanie uprawnień
Rozszerzenia mają podobne funkcje jak strony internetowe, ale często wymagają uprawnień do korzystania z określonych funkcji, takich jak pliki cookie, miejsce na dane i parametry XMLHttpRequsts pochodzące z różnych domen. Zapoznaj się z artykułem na temat uprawnień i dostępnymi interfejsami API Chrome, aby upewnić się, że rozszerzenie żąda odpowiednich uprawnień w swoim manifeście.
{
"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 na temat tworzenia i debugowania. Więcej informacji o Narzędziach deweloperskich Chrome znajdziesz w dokumentacji.