Jest to katalog elementów interfejsu użytkownika dostępnych w rozszerzeniach. Każda pozycja zawiera:
- zdjęcie elementu (w stosownych przypadkach);
- opis tego, do czego służy;
- Powiązane elementy interfejsu (w stosownych przypadkach).
- Linki do instrukcji implementacji i przykładowych fragmentów kodu.
Te elementy 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 skracarka 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łać funkcję rozszerzenia za pomocą interfejsu Action API lub otworzyć wyskakujące okienko, które umożliwia użytkownikom wywoływanie wielu funkcji rozszerzenia. Za pomocą etykiety poinformuj użytkowników, 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 wskazuje np. stan rozszerzenia lub to, że użytkownik musi podjąć określone działania. Tekst plakietki możesz ustawić, wywołując funkcję browser.action.setBadgeText(), a kolor banera – wywołując funkcję browser.action.setBadgeBackgroundColor().
Aby dowiedzieć się, jak utworzyć działanie, przeczytaj artykuł Implementowanie 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 browser.commands.
Menu kontekstowe
Wyświetli się menu kontekstowe dla kliknięcia alternatywnego (często nazywanego kliknięciem prawym przyciskiem myszy). Definiuj menu kontekstowe 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, rozszerzenie kontroluje, co użytkownik widzi w omniboksie. Zdefiniuj 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ąp strony
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 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 otwierać, klikając ikonę działania, za pomocą skrótu klawiszowego lub przez wywołanie browser.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 jednej 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ładami paneli bocznych.
Etykietki
Etykietka to sposób na wyświetlenie informacji o tym, co robi działanie rozszerzenia, gdy użytkownik najedzie myszą 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ą interfejsu DevTools Panels API możesz dodawać do Narzędzi deweloperskich niestandardowe panele (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. Panel Lighthouse w Narzędziach deweloperskich w Chrome powstał jako rozszerzenie Narzędzi deweloperskich.
Powiadomienia
Wysyłanie 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óre zmienia wygląd przeglądarki. Motywy są pakowane jak zwykłe rozszerzenia, ale nie zawierają kodu JavaScript ani HTML.
Więcej informacji o tworzeniu motywów znajdziesz w artykule 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 wymagane w przypadku podstawowego rozszerzenia, mogą stanowić jego ważne elementy. 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
Rozmawiaj z użytkownikami w ich języku. Dowiedz się, jak dostosować interfejs do różnych języków.