Rozszerzenia debugowania

Rozszerzenia mają dostęp do tych samych Narzędzi deweloperskich w Chrome co strony internetowe. Aby zostać ekspertem w debugowaniu rozszerzeń, musisz wiedzieć, jak odnajdywać dzienniki i błędy związane z różnymi komponentami rozszerzeń. W tym samouczku znajdziesz podstawowe techniki debugowania rozszerzenia.

Zanim zaczniesz

W tym przewodniku zakładamy, że masz już podstawowe doświadczenie w tworzeniu stron internetowych. Zalecamy przeczytanie Podstawy tworzenia rozszerzeń, w których znajdziesz wprowadzenie do przepływu pracy tworzenia rozszerzeń. Sekcja Zaprojektuj interfejs zawiera wprowadzenie: elementów interfejsu dostępnych w rozszerzeniach.

Zerwij rozszerzenie

Ten samouczek zepsuje tylko jeden komponent rozszerzenia i pokazuje, jak go naprawić. Pamiętaj, by usunąć błędy wprowadzone w jednej sekcji, zanim przejdziesz do następnej. Zacznij od pobrania próbki koloru uszkodzonego z GitHuba.

Debugowanie pliku manifestu

Najpierw podzielmy plik manifestu przez zmianę klucza "version" na "versions":

manifest.json:

{
  "name": "Broken Background Color",
  "version": "1.0",
  "versions": "1.0",
  "description": "Fix an Extension!",
  ...
}

Teraz załaduj rozszerzenie lokalnie. Wyświetli się okno dialogowe błędu z informacją o problemie:

Failed to load extension
Required value version is missing or invalid. It must be between 1-4 dot-separated integers each between 0 and 65536.
Could not load manifest.

.

Jeśli klucz manifestu jest nieprawidłowy, rozszerzenie nie może się załadować, ale Chrome wyświetla wskazówkę dotyczącą jak rozwiązać problem.

Cofnij tę zmianę i wpisz nieprawidłowe uprawnienia, aby sprawdzić, co się stanie. Zmień uprawnienie "activeTab" na małe litery "activetab":

manifest.json:

{
  ...
  "permissions": ["activeTab", "scripting", "storage"],
  "permissions": ["activetab", "scripting", "storage"],
  ...
}

Zapisz rozszerzenie i spróbuj wczytać je ponownie. Tym razem powinno się wczytać. W rozszerzeniu Na stronie zarządzania zobaczysz 3 przyciski: Szczegóły, Usuń i Błędy. Błędy W przypadku wystąpienia błędu etykieta przycisku zmienia kolor na czerwony. Kliknij przycisk Błędy, aby wyświetlić ten błąd:

Permission 'activetab' is unknown or URL pattern is malformed.

.

Zanim przejdziesz dalej, cofnij uprawnienia i kliknij Wyczyść wszystko w prawym górnym rogu, aby wyczyścić dzienniki i ponownie załadować rozszerzenie.

.

Debugowanie skryptu service worker

Lokalizuję logi

Skrypt service worker ustawia kolor domyślny na pamięć i rejestruje go w konsoli. Aby wyświetlić ten dziennik, otwórz panel Narzędzi deweloperskich w Chrome, klikając niebieski link obok Zbadaj widoki.

.

Lokalizowanie błędów

Podzielmy skrypt service worker, zmieniając onInstalled na małe litery oninstalled:

service-worker.js:

// There's a typo in the line below;
// ❌ oninstalled should be ✅ onInstalled.
chrome.runtime.onInstalled.addListener(() => { 
chrome.runtime.oninstalled.addListener(() => { 
  chrome.storage.sync.set({ color: '#3aa757' }, () => {
    console.log('The background color is green.');
  });
});

Odśwież stronę i kliknij Błędy, aby wyświetlić dziennik błędów. Pierwszy błąd informuje, że skrypt service worker nie został zarejestrowany. Oznacza to, że podczas inicjowania wystąpił błąd:

Service worker registration failed. Status code: 15.

. .

Rzeczywisty błąd występuje po:

Uncaught TypeError: Cannot read properties of undefined (reading 'addListener')

.

Cofnij błąd, kliknij Wyczyść wszystko w prawym górnym rogu i załaduj ponownie rozszerzenie.

Sprawdzanie stanu skryptu service worker

Aby określić, kiedy skrypt service worker wybudza się w celu wykonania zadań, wykonaj te czynności:

1. Skopiuj identyfikator rozszerzenia znajdujący się nad opcją „Sprawdź widoki”.

   

2. Otwórz plik manifestu w przeglądarce. Na przykład:text chrome-extension://YOUR_EXTENSION_ID/manifest.json
3. Sprawdź plik.
4. Przejdź do panelu Aplikacja.
5. Otwórz panel Skrypty service worker.

Aby przetestować kod, uruchom lub zatrzymaj skrypt service worker za pomocą linków obok opcji status.

.

Poza tym po wprowadzeniu zmian w kodzie skryptu service worker możesz od razu zastosować zmiany, klikając Aktualizuj lub pomiń.

. .

Debugowanie wyskakującego okienka

Gdy rozszerzenie zainicjuje się już prawidłowo, podzielmy to wyskakujące okienko, dodając komentarze do wyróżnionych poniżej wierszy:

popup.js:

...
changeColorButton.addEventListener('click', (event) => {
  const color = event.target.value;

  // Query the active tab before injecting the content script
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => { 
    // Use the Scripting API to execute a script
    chrome.scripting.executeScript({
      target: { tabId: tabs[0].id },
      args: [color],
      func: setColor
    });
  });
});

Wróć na stronę Zarządzanie rozszerzeniami. Przycisk Błędy pojawi się ponownie. Kliknij go, aby: wyświetli nowy dziennik. Pojawia się następujący komunikat o błędzie:

Uncaught ReferenceError: tabs is not defined

.

Narzędzia deweloperskie w tym wyskakującym okienku możesz otworzyć, sprawdzając jego zawartość.

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() i wybierz aktywną kartę.

Aby zaktualizować kod, w prawym górnym rogu kliknij przycisk Wyczyść wszystko, a następnie załaduj ponownie .

Debuguj skrypty treści

Podzielmy teraz skrypt treści, zmieniając zmienną „color” na „colors”:

content.js:

...
function setColor(color) {
  // There's a typo in the line below;
  // ❌ colors should be ✅ color.
  document.body.style.backgroundColor = color;
  document.body.style.backgroundColor = colors;
}  

Odśwież stronę, otwórz wyskakujące okienko i kliknij zielone pole. Nic się nie dzieje.

Jeśli otworzysz stronę Zarządzanie rozszerzeniami, przycisk Błędy nie będzie widoczny. Dzieje się tak, ponieważ tylko błędy czasu działania, console.warning i, console.error są rejestrowane na stronie Zarządzanie rozszerzeniami.

Skrypty treści działają w witrynie. Aby znaleźć te błędy, musimy sprawdzić stronę internetową, którą rozszerzenie próbuje zmienić:

Uncaught ReferenceError: colors is not defined

.

Aby użyć Narzędzi deweloperskich ze skryptu treści, kliknij strzałkę w dół obok opcji góra i wybierz rozszerzenie.

Komunikat o błędzie informuje, że element colors nie jest zdefiniowany. Rozszerzenie nie może prawidłowo przekazywać zmiennej. Popraw wstawiony skrypt tak, aby przekazywał zmienną koloru do kodu.

Monitorowanie żądań sieciowych

Wyskakujące okienko często wysyła wszystkie wymagane żądania sieciowe, jeszcze zanim będzie najszybszy mogą otwierać Narzędzia deweloperskie. Aby wyświetlić te żądania, odśwież panel w panelu sieci. it ponownie wczytuje wyskakujące okienko bez zamykania panelu Narzędzi deweloperskich.

Deklarowanie uprawnień

Niektóre interfejsy API rozszerzeń wymagają uprawnień. Zapoznaj się z artykułem o uprawnieniach i w Chrome, interfejsów API, aby upewnić się, że rozszerzenie żąda odpowiednich uprawnień w manifeście.

  {
    "name": "Broken Background Color",
    ...
    "permissions": [
      "activeTab",
      "declarativeContent",
      "storage"
    ],
  ...
  }

Więcej informacji

Więcej informacji o narzędziach deweloperskich Chrome znajdziesz w dokumentacji.