Komponenty interfejsu

To jest katalog elementów interfejsu dostępnych w rozszerzeniach. Każdy wpis zawiera:

  • Obraz elementu (jeśli jest dostępny).
  • Opis funkcji.
  • Powiązane elementy interfejsu (jeśli występują).
  • Linki do instrukcji implementacji i przykładów kodu.

Te elementy reprezentują różne sposoby wywoływania funkcji rozszerzeń. Nie musisz stosować ich wszystkich. W niektórych przypadkach mogą nie być one stosowane. Na przykład krótszy link może działać na wyświetlanym adresie URL za pomocą skrótu klawiszowego i automatycznie umieścić go w schowku.

Działania

Działanie to czynność, która następuje, gdy użytkownik kliknie ikonę działania związaną z rozszerzeniem. Akcja może wywołać funkcję rozszerzenia za pomocą interfejsu Action API lub otworzyć wyskakujące okienko, które umożliwia użytkownikom wywoływanie wielu funkcji rozszerzenia. Poinformuj użytkowników, jak działa dana czynność, korzystając z etykiety.

Zarówno przypięte, jak i nieprzypięte rozszerzenie.
Rysunek 1. Rozszerzenia przypięte (po lewej) i odpięte (po prawej)

Aby dowiedzieć się, jak utworzyć działanie, przeczytaj artykuł Wdrażanie działania lub zapoznaj się z przykładami działań.

Ikony działań

Rozszerzenie wymaga co najmniej 1 ikony, aby je reprezentować. Kliknięcie ikony powoduje wywołanie działania niezależnie od tego, czy wywołuje ono funkcję rozszerzenia za pomocą interfejsu Action API, czy otwiera wyskakujące okienko.

Ikona rozszerzenia słownika Google.
Rysunek 2.: Ikona rozszerzenia słownik Google (kolor czerwony)

Do ikony możesz też dodać etykietę, nazywaną „plakietką” informującą na przykład o stanie rozszerzenia lub o tym, że użytkownik musi wykonać jakieś działania.

Aby dowiedzieć się, jak utworzyć działanie, przeczytaj artykuł Wdrażanie działania lub zapoznaj się z przykładami działań.

Odznaki

Plakietki to fragmenty sformatowanego tekstu umieszczane na ikonie działania informujące np. o stanie rozszerzenia lub konieczności wykonania określonych działań przez użytkownika. Aby ustawić tekst plakietki, wywołaj metodę chrome.action.setBadgeText() oraz kolor banera, wywołując metodę chrome.action.setBadgeBackgroundColor().

Ikona rozszerzenia bez plakietki i z plakietką.
Rysunek 3. Ikona rozszerzenia bez plakietki (po lewej) i z plakietką (po prawej).

Aby dowiedzieć się, jak utworzyć działanie, zapoznaj się z artykułem Wdrażanie działania lub przykładową wodą pitną.

Polecenia

Polecenia to kombinacje klawiszy, które wywołują funkcję rozszerzenia. Zdefiniuj kombinacje kluczy w pliku manifest.json i odpowiedz na nie za pomocą interfejsu Commands API. Aby dowiedzieć się, jak wdrożyć polecenie, zapoznaj się z dokumentacją interfejsu API lub przykładem chrome.commands.

Menu kontekstowe

Pojawi się menu kontekstowe dla alternatywnego kliknięcia (często nazywanego prawym przyciskiem myszy). Menu kontekstowe możesz definiować za pomocą interfejsu Context Menus API.

Zagnieżdżone menu kontekstowe.
Rysunek 4. Menu kontekstowe i zagnieżdżone menu podrzędne.

Aby dowiedzieć się, jak zaimplementować menu kontekstowe, zobacz przykłady menu kontekstowego.

Omnibox

Możesz wchodzić w interakcje z użytkownikami, korzystając z omniboksu Chrome. Gdy użytkownik wpisze w omniboksie słowa kluczowe zdefiniowane przez rozszerzenie, rozszerzenie decyduje o tym, co zobaczy w omniboksie. Zdefiniuj słowa kluczowe w pliku manifest.json i odpowiedz na nie za pomocą interfejsu Omnibox API.

W omniboksie przeglądarki.
Rysunek 5.: Pasek omniboksa przeglądarki

O zastępowaniu omniboksu dowiesz się, jak wywoływać działania w omniboksie lub w krótkim pliku referencyjnym interfejsu API.

Zastąp strony

Rozszerzenie może zastąpić jedną z tych wbudowanych stron Chrome:

  • Historia
  • Nowa karta
  • Zakładki
Przykład niestandardowej strony historii.
Rys. 6. Przykład niestandardowej strony historii.

Aby dowiedzieć się, jak zastąpić strony Chrome, przeczytaj artykuł Zastępowanie stron Chrome i przykład zastępowania.

Wyskakujące okienka

Wyskakujące okienko to działanie, które wyświetla okno umożliwiające użytkownikom wywoływanie wielu funkcji rozszerzeń. Wyskakujące okienka można otworzyć tylko wtedy, gdy użytkownik kliknie ikonę działania. Rozszerzenie nie może automatycznie otworzyć wyskakującego okienka.

Przykład wyskakującego okienka.
Rysunek 7. Przykład wyskakującego okienka.

Aby dowiedzieć się, jak utworzyć wyskakujące okienko, przeczytaj artykuł Dodawanie wyskakującego okienka. Możesz też pobrać krok z jednego z przykładów działań.

Panele boczne

Panel boczny umożliwia użytkownikom wywoływanie funkcji rozszerzeń na stronach internetowych (patrz ilustracja). Panel boczny możesz przypiąć do pojedynczej karty lub do całego okna. Do sterowania panelem bocznym służy interfejs Side Panel API.

Rozszerzenie słownikowe definiujące słowo
Rys. 8. Rozszerzenie słownikowe z definicją słowa „Rozszerzenia”.

Aby dowiedzieć się, jak utworzyć panel boczny, zapoznaj się z przypadkami użycia tego panelu lub przejrzyj jego przykłady.

Etykiety

Etykietka służy do informowania, co robi działanie rozszerzenia, gdy użytkownik najedzie na Twoją ikonę działania. Domyślnie etykietka zawiera nazwę rozszerzenia.

Przykładowa etykietka ikony działania.
Rys. 9. Przykładowa etykietka ikony działania.

Aby dowiedzieć się, jak dodać etykietkę, użyj klucza "action" pliku manifestu "default_title".

DevTools

Do Narzędzi deweloperskich możesz dodawać panele niestandardowe (karty nazywane w Narzędziach deweloperskich), korzystając z interfejsu DevTools Panels API. Inne interfejsy API Narzędzi deweloperskich umożliwiają monitorowanie Windows i ruchu sieciowego. Możesz też dostosować panel nagrywania w Narzędziach deweloperskich. Panel Lighthouse, który powstał w Chrome DevTools jako rozszerzenie DevTools.

Powiadomienia

Publikuj wiadomości w obszarze powiadomień użytkownika przy użyciu interfejsu Powiadomienia API lub interfejsu API powiadomień platform internetowych.

Powiadomienie o rozszerzeniu na Macu.
Rysunek 10. Powiadomienie o rozszerzeniach na komputerze Mac

Aby dowiedzieć się, jak korzystać z powiadomień, przeczytaj artykuł Powiadamianie użytkowników.

Motywy

Motyw to specjalne rozszerzenie, które zmienia wygląd przeglądarki. Motywy są łączone w pakiety jak zwykłe rozszerzenia, ale nie zawierają kodu JavaScript ani HTML.

Przykładowy motyw.
Rysunek 11. Przykładowy motyw.

Aby dowiedzieć się, jak utworzyć motyw, zapoznaj się z artykułem Czym są motywy?.

Inne sposoby interakcji z użytkownikami

W tej sekcji opisujemy inne sposoby interakcji rozszerzenia z użytkownikami. Chociaż nie są one bezwzględnie niezbędne w przypadku podstawowego rozszerzenia, mogą być jego istotnymi elementami. Dla wielu użytkowników niektóre z tych funkcji są absolutnie niezbędne, aby móc korzystać z rozszerzenia.

Ułatwienia dostępu

Dla wielu użytkowników ułatwienia dostępu to dosłowny element interfejsu, a jego funkcje mogą być przydatne dla tych, którzy nie potrzebują ułatwień dostępu jako głównego sposobu korzystania z rozszerzenia. Poznaj podstawy udostępniania rozszerzenia.

Internacjonalizacja

Mów do użytkowników w ich języku. Dowiedz się, jak zróżnicować interfejs.