Ta strona została przetłumaczona przez Cloud Translation API.

Rozszerzenie Hello World

Poznaj podstawy tworzenia rozszerzeń do Chrome, tworząc pierwsze rozszerzenie Hello World.

Omówienie

Utworzysz „Hello World”. na przykład wczytać rozszerzenie lokalnie, zlokalizuj dzienniki i zapoznaj się z innymi zaleceniami.

Hello World

Gdy użytkownik kliknie ikonę rozszerzenia na pasku narzędzi, to rozszerzenie wyświetli komunikat „Hello Extensions”.

Rozszerzenie Hello — Wyskakujące okienko rozszerzenia Hello

Zacznij od utworzenia nowego katalogu, w którym będą przechowywane pliki rozszerzeń. Jeśli wolisz, możesz pobrać pełną wersję kodu źródłowego z GitHub.

Następnie utwórz w tym katalogu nowy plik o nazwie manifest.json. Ten plik JSON opisuje rozszerzenie możliwości i konfiguracji. Na przykład większość plików manifestu zawiera klucz "action", który deklaruje obrazu, którego Chrome ma używać jako ikony działania rozszerzenia, a strony HTML, która ma być wyświetlana w wyskakującym okienku, gdy po kliknięciu ikony działania rozszerzenia.

{
  "manifest_version": 3,
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  }
}

Pobierz ikonę do katalogu i zmień jej nazwę, aby pasowała do klucza "default_icon".

W wyskakującym okienku utwórz plik o nazwie hello.html i dodaj ten kod:

<html>
  <body>
    <h1>Hello Extensions</h1>
  </body>
</html>

Rozszerzenie wyświetla teraz wyskakujące okienko po kliknięciu ikony działania rozszerzenia (ikony na pasku narzędzi). Możesz przetestować w Chrome, wczytając go lokalnie. Upewnij się, że wszystkie pliki są zapisane.

Wczytaj rozszerzenie bez pakietu

Aby wczytać rozszerzenie bez pakietu w trybie programisty:

Otwórz stronę Rozszerzenia, wpisując chrome://extensions w nowej karcie. (Z założenia chrome:// adresów URL nie można tworzyć linków).
- Możesz też kliknąć przycisk menu rozszerzeń i na dole menu wybrać Zarządzaj rozszerzeniami.
- Możesz też kliknąć menu Chrome, najechać kursorem na Więcej narzędzi i wybrać Rozszerzenia.
Włącz tryb programisty, klikając przełącznik obok Trybu programisty.
Kliknij przycisk Wczytaj rozpakowane i wybierz katalog rozszerzenia.

Strona rozszerzeń (chrome://extensions)

Tadam! Rozszerzenie zostało zainstalowane. Jeśli nie ma ikon rozszerzeń pliku manifestu, zostanie utworzona ogólna ikona rozszerzenia.

Przypnij rozszerzenie

Domyślnie, gdy wczytasz rozszerzenie lokalnie, pojawi się ono w menu rozszerzeń (). Przypnij rozszerzenie do paska narzędzi, aby mieć do niego szybki dostęp w trakcie tworzenia aplikacji.

Kliknij ikonę działania rozszerzenia (ikonę na pasku narzędzi). powinno pojawić się wyskakujące okienko.

rozszerzenie hello world — Rozszerzenie Hello World

Załaduj ponownie rozszerzenie

Wróć do kodu i zmień nazwę rozszerzenia na „Hello Extensions of the world!”. w pliku manifestu.

{
  "manifest_version": 3,
  "name": "Hello Extensions of the world!",
  ...
}

Aby po zapisaniu pliku zmiana była widoczna w przeglądarce, musisz także odświeżyć rozszerzenie. Otwórz Otwórz stronę Rozszerzenia i kliknij ikonę odświeżania obok przełącznika wł./wyłączenia:

Ponowne wczytywanie rozszerzenia

Kiedy ponownie załadować rozszerzenie

W tabeli poniżej znajdziesz komponenty, które musisz ponownie załadować, aby zobaczyć zmiany:

Komponent rozszerzenia	Wymaga ponownego załadowania rozszerzenia
Plik manifestu	Tak
Skrypt service worker	Tak
Skrypty treści	Tak (plus strona hostująca)
Wyskakujące okienko	Nie
Strona opcji	Nie
Strony HTML innych rozszerzeń	Nie

Znajdowanie logów i błędów konsoli

Dzienniki konsoli

W trakcie programowania możesz debugować kod, korzystając z dzienników konsoli przeglądarki. W tym przypadku zlokalizuje dzienniki wyskakującego okienka. Zacznij od dodania tagu skryptu do hello.html.

<html>
  <body>
    <h1>Hello Extensions</h1>
    <script src="popup.js"></script>
  </body>
</html>

Utwórz plik popup.js i dodaj do niego ten kod:

console.log("This is a popup!")

Aby wyświetlić ten komunikat zapisany w konsoli:

Otwórz wyskakujące okienko.
Kliknij wyskakujące okienko prawym przyciskiem myszy.
Kliknij Zbadaj.

Sprawdzam wyskakujące okienko.
W DevTools otwórz panel Konsola.

Sprawdzanie wyskakującego okienka

Logi błędów

Zakończmy rozszerzenie. Aby to zrobić, usuń cudzysłów zamykający w polu popup.js:

console.log("This is a popup!) // ❌ broken code

Przejdź na stronę Rozszerzenia i otwórz wyskakujące okienko. Pojawi się przycisk Błędy.

Strona rozszerzeń z przyciskiem błędu

Aby dowiedzieć się więcej o błędzie, kliknij przycisk Błędy:

Szczegóły błędu rozszerzenia

Więcej informacji na temat debugowania skryptu service worker, strony opcji i skryptów treści znajdziesz w artykule Debugowanie .

Tworzenie struktury projektu rozszerzenia

Istnieje wiele sposobów tworzenia struktury projektu rozszerzenia: Jedynym wstępnym wstępem jest jednak umieszczenie manifest.json w katalogu głównym rozszerzenia, jak w tym przykładzie:

Zawartość folderu rozszerzenia: manifest.json, background.js, Script folder, popup folder and images folder.

Użyj TypeScript

Jeśli programujesz przy użyciu edytora kodu, takiego jak VSCode lub Atom, możesz użyć npm pakietu chrome-type, aby skorzystać z autouzupełniania dla Chrome API. Ten pakiet npm jest aktualizowany automatycznie, gdy kod źródłowy Chromium zmian.

🚀 Chcesz zacząć tworzyć?

Wybierz jeden z poniższych samouczków, aby dowiedzieć się więcej o rozszerzeniach.

Rozszerzenie	Czego się nauczysz
Uruchamianie skryptów na każdej stronie	Automatyczne wstawianie elementu na każdej stronie.
Wstawianie skryptów na aktywnej karcie	Aby uruchomić kod na bieżącej stronie po kliknięciu działania rozszerzenia.
Zarządzanie kartami	Aby utworzyć wyskakujące okienko do zarządzania kartami przeglądarki.
Obsługa zdarzeń za pomocą mechanizmów Service Worker	Jak skrypt usługi rozszerzenia obsługuje zdarzenia.