Rozszerzenia debugowania

Rozszerzenia mają dostęp do tych samych Narzędzi deweloperskich w Chrome co strony internetowe. Aby zostać ekspertem w zakresie debugowania rozszerzeń, musisz wiedzieć, jak znaleźć dzienniki i błędy dotyczące różnych komponentów rozszerzeń. W tym samouczku omawiamy podstawowe techniki debugowania rozszerzenia.

Zanim zaczniesz

W tym przewodniku zakładamy, że masz podstawowe doświadczenie w tworzeniu stron internetowych. Zalecamy zapoznanie się z artykułem Podstawy programowania, który zawiera wprowadzenie do procesu tworzenia rozszerzeń. W artykule Zaprojektuj interfejs znajdziesz wprowadzenie do elementów interfejsu użytkownika dostępnych w rozszerzeniach.

Złamanie rozszerzenia

Ten samouczek pokazuje, jak naprawić jeden komponent rozszerzenia naraz, a następnie zademonstruje, jak to naprawić. Pamiętaj, by przed przejściem do kolejnej sekcji cofnąć błędy wprowadzone w jednej z nich. Zacznij od pobrania przykładowego koloru z błędnymi kolorami z GitHuba.

Debugowanie pliku manifestu

Najpierw rozbijmy plik manifestu, zmieniając klucz "version" na "versions":

manifest.json:

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

Teraz spróbuj załadować rozszerzenie lokalnie. Zostanie wyświetlone okno dialogowe błędu wskazującego problem:

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.

Gdy klucz manifestu jest nieprawidłowy, rozszerzenie nie wczytuje się, ale Chrome wyświetla wskazówkę, jak rozwiązać ten problem.

Cofnij tę zmianę i wpisz nieprawidłowe uprawnienie, 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 załadować je ponownie. Tym razem powinno się to udać. Na stronie zarządzania rozszerzeniem widoczne są 3 przyciski: Szczegóły, Usuń i Błędy. Gdy wystąpi błąd, etykieta przycisku Błędy 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, z powrotem przywróć odpowiednie uprawnienia. Kliknij Wyczyść wszystko w prawym górnym rogu, aby wyczyścić dzienniki, i załaduj ponownie rozszerzenie.

Debugowanie skryptu service worker

Znajdowanie logów

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

Znajdowanie 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 coś poszło nie tak:

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, który zaprezentowaliśmy, 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 budzi się w celu wykonania zadań, wykonaj te czynności:

1. Skopiuj identyfikator rozszerzenia znajdujący się nad sekcją „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 Application (Aplikacja).
5. Otwórz panel Service Workers.

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

Poza tym po wprowadzeniu zmian w kodzie skryptu service worker możesz kliknąć Aktualizuj lub PomijajOczekiwanie, aby natychmiast zastosować zmiany.

Debugowanie wyskakującego okienka

Teraz, gdy rozszerzenie zainicjuje się poprawnie, otwórzmy wyskakujące okienko, dodając komentarz do zaznaczonych 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ądzania rozszerzeniami. Pojawi się ponownie przycisk Błędy. Kliknij go, aby wyświetlić nowy dziennik. Wyświetla się taki komunikat o błędzie:

Uncaught ReferenceError: tabs is not defined

Aby otworzyć Narzędzia deweloperskie w wyskakującym okienku, przejrzyj wyskakujące okienko.

Błąd tabs is undefined wskazuje, że rozszerzenie nie wie, gdzie wstawić skrypt treści. Popraw to, dzwoniąc pod numer tabs.query() i wybierając aktywną kartę.

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

Debugowanie skryptów treści

A teraz zróbmy porządek w skrypcie 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.

Na stronie zarządzania rozszerzeniami przycisk Błędy nie jest widoczny. Dzieje się tak, ponieważ na stronie Zarządzanie rozszerzeniami są rejestrowane tylko błędy czasu działania (console.warning i console.error).

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

Uncaught ReferenceError: colors is not defined

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

Pojawia się komunikat o błędzie informujący, że element colors nie jest zdefiniowany. Rozszerzenie nie może prawidłowo przekazywać zmiennej. Skoryguj wstrzykiwany skrypt, aby przekazać zmienną koloru do kodu.

Monitorowanie żądań sieciowych

Często wysyła ono wszystkie wymagane żądania sieciowe, zanim nawet najwięksi programiści mogą otworzyć Narzędzia deweloperskie. Aby wyświetlić te żądania, odśwież stronę w panelu sieci. 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 na temat uprawnień i interfejsami Chrome API, aby upewnić się, że rozszerzenie żąda odpowiednich uprawnień w pliku manifestu.

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

Więcej informacji

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