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](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/hello-world/image/hello-extension-6e3eacba176d3.png?authuser=9&hl=pl)
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żeniachrome://
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.
![Przypinanie rozszerzenia](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/hello-world/image/pinning-extension-215cb97773ab6.png?authuser=9&hl=pl)
Kliknij ikonę działania rozszerzenia (ikonę na pasku narzędzi). powinno pojawić się wyskakujące okienko.
![rozszerzenie hello world](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/hello-world/image/hello-world-extension-27a679d21340d.png?authuser=9&hl=pl)
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:
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.
Aby dowiedzieć się więcej o błędzie, kliknij przycisk Błędy:
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:
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. |