Komponenty interfejsu

Jest to katalog elementów interfejsu użytkownika dostępnych w rozszerzeniach. Każdy wpis zawiera:

  • Obraz elementu (w stosownych przypadkach).
  • opis jego przeznaczenia;
  • powiązane elementy interfejsu (jeśli występują);
  • Linki do instrukcji implementacji i przykładowych fragmentów kodu.

Są to różne sposoby wywoływania funkcji rozszerzeń. Nie musisz wdrażać wszystkich tych funkcji. W niektórych przypadkach użycia nie są one w ogóle wykorzystywane. Na przykład skracacz linków może działać na wyświetlany adres URL za pomocą skrótu klawiszowego i programowo umieszczać skrócony link w schowku.

Działania

Działanie to to, co się dzieje, gdy użytkownik kliknie ikonę działania w przypadku Twojego rozszerzenia. Działanie może wywoływać funkcję rozszerzenia za pomocą interfejsu Action API lub otwierać wyskakujące okienko, które umożliwia użytkownikom wywoływanie wielu funkcji rozszerzenia. Za pomocą etykietki wyjaśnij użytkownikom, co robi dane działanie.

zarówno przypięte, jak i odpięte rozszerzenie.
Ilustracja 1. Przypięte (po lewej) i odpięte (po prawej) rozszerzenia.

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

Ikony czynności

Rozszerzenie musi mieć co najmniej 1 ikonę. Użytkownicy klikają ikonę, aby wywołać działanie, które wywołuje funkcję rozszerzenia za pomocą interfejsu Action API lub otwiera wyskakujące okienko.

Ikona rozszerzenia Słownik Google.
Ilustracja 2. Ikona rozszerzenia Słownik Google (w kolorze czerwonym).

Możesz też dodać do ikony etykietę, zwaną tu „odznaką”, aby przekazywać informacje takie jak stan rozszerzenia lub to, że użytkownik musi wykonać określone działania.

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

Odznaki

Odznaki to sformatowany tekst umieszczany nad ikoną działania, który wskazuje np. stan rozszerzenia lub to, że użytkownik musi wykonać określone działania. Tekst plakietki możesz ustawić, wywołując funkcję chrome.action.setBadgeText(), a kolor banera – wywołując funkcję chrome.action.setBadgeBackgroundColor().

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

Aby dowiedzieć się, jak utworzyć działanie, przeczytaj artykuł Wdrażanie działania lub zapoznaj się z przykładowym działaniem Pij wodę.

Polecenia

Polecenia to kombinacje klawiszy, które wywołują funkcję rozszerzenia. Określ kombinacje klawiszy w pliku manifest.json i odpowiadaj na nie za pomocą interfejsu Commands API. Aby dowiedzieć się, jak zaimplementować polecenie, zapoznaj się z dokumentacją interfejsu API lub z przykładowym kodem chrome.commands.

Menu kontekstowe

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

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

Aby dowiedzieć się, jak wdrożyć menu kontekstowe, zapoznaj się z przykładami menu kontekstowego.

Omnibox

Możesz wchodzić w interakcje z użytkownikami za pomocą paska adresu Chrome. Gdy użytkownik wpisze w omniboksie słowa kluczowe zdefiniowane przez rozszerzenie, to rozszerzenie będzie kontrolować, co użytkownik zobaczy w omniboksie. Określ słowa kluczowe w pliku manifest.json i odpowiadaj na nie za pomocą interfejsu Omnibox API.

Pasek wielofunkcyjny przeglądarki.
Ilustracja 5. Omniboks przeglądarki.

Aby dowiedzieć się, jak zastąpić omniboks, zapoznaj się z sekcją Wywoływanie działań z omniboksu lub z przykładem szybkiego odwołania do interfejsu API.

Zastępowanie stron

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

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

Aby dowiedzieć się, jak zastępować strony Chrome, przeczytaj artykuł Zastępowanie stron Chrome lub zapoznaj się z przykładem override.

Wyskakujące okienka

Wyskakujące okienko to działanie, które wyświetla okno umożliwiające użytkownikom korzystanie z wielu funkcji rozszerzenia. Wyskakujące okienka można otworzyć, klikając ikonę działania, za pomocą skrótu klawiszowego lub przez wywołanie chrome.action.openPopup().

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

Aby dowiedzieć się, jak utworzyć wyskakujące okienko, przeczytaj artykuł Dodawanie wyskakującego okienka. Krok możesz też pobrać za pomocą jednego z przykładowych działań.

Panele boczne

Panel boczny umożliwia użytkownikom korzystanie z funkcji rozszerzenia obok stron internetowych (patrz obraz). Panel boczny może być przypięty do pojedynczej karty lub do całego okna. Panelem bocznym steruje się za pomocą interfejsu Side Panel API.

Rozszerzenie słownika definiujące słowo
Ilustracja 8. Rozszerzenie słownika definiujące słowo „Extensions”.

Aby dowiedzieć się, jak utworzyć panel boczny, zapoznaj się z przypadkami użycia panelu bocznego lub z przykładowymi panelami bocznymi.

Etykietki

Etykietka to sposób na wyświetlenie, gdy użytkownik najedzie kursorem myszy na ikonę działania, informacji o tym, co robi działanie rozszerzenia. Domyślnie etykietka wyświetla nazwę rozszerzenia.

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

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

Narzędzia deweloperskie

Za pomocą interfejsu DevTools Panels API możesz dodawać do Narzędzi deweloperskich panele niestandardowe (czyli karty w Narzędziach deweloperskich). Inne interfejsy API narzędzi dla deweloperów umożliwiają monitorowanie okienruchu w sieci. Możesz też dostosować panel rejestratora w Narzędziach deweloperskich. Własny panel Lighthouse w Narzędziach deweloperskich Chrome powstał jako rozszerzenie Narzędzi deweloperskich.

Powiadomienia

Wysyłaj wiadomości do zasobnika systemowego użytkownika za pomocą interfejsu Notifications API rozszerzeń lub interfejsu Notifications API platform internetowych.

Powiadomienie o rozszerzeniu na komputerze Mac.
Ilustracja 10. Powiadomienie o rozszerzeniu na komputerze Mac.

Więcej informacji o korzystaniu z powiadomień znajdziesz w artykule Powiadamianie użytkowników.

Motywy

Motyw to specjalny rodzaj rozszerzenia, który zmienia wygląd przeglądarki. Motywy są pakowane jak zwykłe rozszerzenia, ale nie zawierają kodu JavaScript ani HTML.

Rysunek 11. Przykład motywu.

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

Inne sposoby interakcji z użytkownikami

W tej sekcji opisujemy inne sposoby interakcji rozszerzenia z użytkownikami. Nie są one niezbędne w przypadku podstawowego rozszerzenia, ale mogą być jego ważnymi elementami. Dla wielu użytkowników niektóre z tych funkcji są niezbędne do korzystania z rozszerzenia.

Ułatwienia dostępu

Dla wielu użytkowników ułatwienia dostępu są interfejsem użytkownika, a ich funkcje mogą być przydatne dla osób, które nie potrzebują ułatwień dostępu jako głównego sposobu interakcji z rozszerzeniem. Poznaj podstawy tworzenia dostępnych rozszerzeń.

Internacjonalizacja

Mów do użytkowników w ich języku. Dowiedz się, jak dostosować interfejs do różnych języków.