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 dotyczy);
- Linki do instrukcji implementacji i przykładowych fragmentów kodu.
Te elementy to różne sposoby wywoływania funkcji rozszerzenia. Nie musisz wdrażać wszystkich tych funkcji. W niektórych przypadkach użycia nie będzie można ich w ogóle wykorzystać. 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.
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.
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 informuje np. o stanie rozszerzenia lub o tym, ż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().
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. Zdefiniuj 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ą 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.
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.
Aby dowiedzieć się, jak zastąpić omniboks, zapoznaj się z sekcją Wywoływanie działań z omniboksu lub z przykładem szybkiej dokumentacji API.
Zastępowanie stron
Rozszerzenie może zastąpić jedną z tych wbudowanych stron Chrome:
- Historia
- Nowa karta
- Zakładki
Aby dowiedzieć się, jak zastąpić strony Chrome, przeczytaj artykuł Zastępowanie stron Chrome lub zapoznaj się z przykładem zastępowania.
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().
Aby dowiedzieć się, jak utworzyć wyskakujące okienko, przeczytaj artykuł Dodawanie wyskakującego okienka. Krok możesz też pobrać z 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.
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 informacji o tym, co robi działanie rozszerzenia, gdy użytkownik najedzie kursorem na ikonę działania. Domyślnie etykietka wyświetla nazwę rozszerzenia.
Aby dowiedzieć się, jak dodać etykietkę, użyj klucza "default_title" w plikach manifestu "action".
Narzędzia deweloperskie
Za pomocą DevTools Panels API możesz dodawać do Narzędzi deweloperskich panele niestandardowe (czyli karty w Narzędziach deweloperskich). Inne interfejsy API Narzędzi deweloperskich umożliwiają monitorowanie okien i ruchu w sieci. Możesz też dostosować panel rejestratora w Narzędziach deweloperskich. Własny panel Lighthouse w Narzędziach deweloperskich w Chrome powstał jako rozszerzenie Narzędzi deweloperskich.
Powiadomienia
Wysyłaj wiadomości do obszaru powiadomień użytkownika za pomocą interfejsu Notifications API rozszerzeń lub interfejsu Notifications API platform internetowych.
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.
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.