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”.
![Rozszerzenie Hello](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/hello-world/image/hello-extension-6e3eacba176d3.png?authuser=0&hl=pl)
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://extensions
w 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.
![Przypinanie rozszerzenia](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/hello-world/image/pinning-extension-215cb97773ab6.png?authuser=0&hl=pl)
Kliknij ikonę działania rozszerzenia (ikonę na pasku narzędzi). Powinno pojawić się wyskakujące okienko.
![rozszerzenie hello world](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/hello-world/image/hello-world-extension-27a679d21340d.png?authuser=0&hl=pl)
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. |