Poznaj podstawy tworzenia rozszerzeń do Chrome, tworząc swoje pierwsze rozszerzenie Hello World.
Opis
Utworzysz przykład aplikacji „Hello World”, wczytasz rozszerzenie lokalnie, zlokalizujesz dzienniki i zapoznasz się z innymi rekomendacjami.
Hello World
Gdy użytkownik kliknie ikonę rozszerzenia na pasku narzędzi, wyświetli się „Cześć Rozszerzenia”.
Zacznij od utworzenia nowego katalogu, w którym będą przechowywane pliki rozszerzeń. Jeśli wolisz, możesz pobrać pełny kod źródłowy z GitHub.
Następnie utwórz w tym katalogu nowy plik o nazwie manifest.json. Ten plik JSON zawiera opis możliwości i konfiguracji rozszerzenia. Na przykład większość plików manifestu zawiera klucz "action", który deklaruje, że obraz powinien być używany przez Chrome jako ikona działania rozszerzenia, a strona HTML jest wyświetlana w wyskakującym okienku 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ę na taką, która jest w kluczu "default_icon".
Na potrzeby wyskakującego okienka utwórz plik o nazwie hello.html i dodaj ten kod:
<html>
<body>
<h1>Hello Extensions</h1>
</body>
</html>
Teraz po kliknięciu ikony rozszerzenia (ikony na pasku narzędzi) rozszerzenie wyświetla się w wyskakującym okienku. Możesz przetestować ten interfejs w Chrome, ładując go lokalnie. Sprawdź, czy wszystkie pliki są zapisane.
Wczytaj rozszerzenie bez pakietu
Aby wczytać rozszerzenie bez pakietu w trybie programisty:
- Otwórz stronę Rozszerzenia, wpisując
chrome://extensionsw nowej karcie. (Z założeniachrome://nie da się utworzyć linku).- Możesz też kliknąć przycisk układanki w menu Rozszerzeniami i wybrać Zarządzaj rozszerzeniami u dołu menu.
- Możesz też kliknąć menu Chrome, najechać kursorem na Więcej narzędzi, a następnie wybrać Rozszerzenia.
- Włącz tryb programisty, klikając przełącznik obok Trybu programisty.
- Kliknij przycisk Wczytaj rozpakowane i wybierz katalog rozszerzenia.
Strona Rozszerzenia (chrome://extensions)
Gotowe! Rozszerzenie zostało zainstalowane. Jeśli w pliku manifestu nie ma żadnych ikon rozszerzeń, zostanie utworzona ogólna ikona rozszerzenia.
Przypnij rozszerzenie
Gdy wczytujesz rozszerzenie lokalnie, domyślnie pojawi się ono w menu rozszerzeń (
). Przypnij rozszerzenie do paska narzędzi, aby mieć do niego szybki dostęp na etapie tworzenia.
Kliknij ikonę działania rozszerzenia (ikonę na pasku narzędzi). Powinno pojawić się wyskakujące okienko.
Załaduj rozszerzenie ponownie
Wróć do kodu i w pliku manifestu zmień nazwę rozszerzenia na „Hello Extensions of the world!”.
{
"manifest_version": 3,
"name": "Hello Extensions of the world!",
...
}
Aby po zapisaniu pliku zobaczyć tę zmianę w przeglądarce, musisz odświeżyć rozszerzenie. Otwórz stronę Rozszerzenia i kliknij ikonę odświeżania obok przełącznika wł./wył.:
Kiedy ponownie wczytywać rozszerzenie
W tabeli poniżej pokazujemy, które komponenty trzeba ponownie załadować, aby zobaczyć zmiany:
| Komponent rozszerzenia | Wymaga ponownego wczytania rozszerzenia |
|---|---|
| Plik manifestu | Tak |
| Skrypt service worker | Tak |
| Skrypty treści | Tak (oraz strona hostująca) |
| Wyskakujące okienko | Nie |
| Strona opcji | Nie |
| Strony HTML innych rozszerzeń | Nie |
Znajdowanie dziennikó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 zlokalizujemy logi 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 w konsoli:
- Otwórz wyskakujące okienko.
- Kliknij wyskakujące okienko prawym przyciskiem myszy.
- Kliknij Zbadaj.
Sprawdzam wyskakujące okienko. - W DevTools przejdź do panelu Konsola.
Sprawdzanie wyskakującego okienka
Logi błędów
Teraz rozłączymy rozszerzenie. Możemy to zrobić, usuwając zamykający cudzysłów w elemencie popup.js:
console.log("This is a popup!) // ❌ broken code
Wejdź na stronę Rozszerzenia i otwórz wyskakujące okienko. Pojawi się przycisk Błędy.
Aby dowiedzieć się więcej o błędzie, kliknij przycisk Błędy:
Więcej informacji o debugowaniu skryptu service worker, strony opcji i skryptów treści znajdziesz w artykule Rozszerzenia debugowania.
Tworzenie struktury projektu rozszerzenia
Projekt rozszerzenia można uporządkować na wiele sposobów. Jedynym wymaganiem jest umieszczenie pliku manifest.json w katalogu głównym rozszerzenia, jak w tym przykładzie:
Używaj TypeScriptu
Jeśli programujesz przy użyciu edytora kodu, takiego jak VSCode lub Atom, możesz użyć pakietu npm chrome-types, aby skorzystać z autouzupełniania w interfejsie Chrome API. Ten pakiet npm jest aktualizowany automatycznie po zmianie kodu źródłowego Chromium.
🚀 Chcesz zacząć tworzyć?
Aby rozpocząć naukę rozszerzeń, wybierz jeden z tych samouczków.
| Rozszerzenie | Czego się nauczysz |
|---|---|
| Uruchamianie skryptów na każdej stronie | Aby automatycznie wstawić element na każdej stronie. |
| Wstaw skrypty 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ń z użyciem skryptu service worker | Sposób obsługi zdarzeń przez skrypt service worker rozszerzenia. |