Wdrażanie działania

Działanie to to, co się dzieje, gdy użytkownik kliknie ikonę paska narzędzi, zwykle nazywaną ikoną działania rozszerzenia. Działanie wywołuje funkcję rozszerzenia za pomocą interfejsu Action API lub otwiera wyskakujące okienko. Na tej stronie dowiesz się, jak wywołać funkcję rozszerzenia. Aby użyć wyskakującego okienka, przeczytaj artykuł Dodawanie wyskakującego okienka.

Zarejestruj działanie

Aby używać interfejsu browser.action API, dodaj klucz "action" do pliku manifestu rozszerzenia. Pełny opis opcjonalnych właściwości tego pola znajdziesz w sekcji manifestu w browser.action dokumentacji interfejsu API.

manifest.json:

{
  "name": "My Awesome action Extension",
 ...
  "action": {
   ...
  }
 ...
}

Odpowiadanie na działanie

Zarejestruj onClicked moduł obsługi, który będzie wywoływany, gdy użytkownik kliknie ikonę działania. To zdarzenie nie jest wywoływane, jeśli w pliku manifest.json zarejestrowano wyskakujące okienko.

service-worker.js:

browser.action.onClicked.addListener((tab) => {
  browser.action.setTitle({
    tabId: tab.id,
    title: `You are on tab: ${tab.id}`});
});

Warunkowe aktywowanie działania

browser.declarativeContentInterfejs API umożliwia włączanie ikony działania rozszerzenia na podstawie adresu URL strony lub gdy selektory CSS pasują do elementów na stronie. Gdy ikona działania rozszerzenia jest wyłączona, jest wyszarzona. Jeśli użytkownik kliknie wyłączoną ikonę, pojawi się menu kontekstowe rozszerzenia.

Ikona wyłączonej czynności
Ikona wyłączonego działania.

Odznaka działania

Odznaki to sformatowany tekst umieszczony nad ikoną działania, który wskazuje np. stan rozszerzenia lub to, że użytkownik musi wykonać określone działania. Aby to zademonstrować, przykładowe rozszerzenie Drink Water wyświetla plakietkę z napisem „ON”, aby poinformować użytkownika, że alarm został ustawiony, a gdy rozszerzenie jest nieaktywne, nie wyświetla niczego. Odznaki mogą zawierać maksymalnie 4 znaki.

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

Ustaw tekst plakietki, wywołując funkcję browser.action.setBadgeText(), a kolor tła, wywołując funkcję browser.action.setBadgeBackgroundColor().

service-worker.js:

browser.action.setBadgeText({text: 'ON'});
browser.action.setBadgeBackgroundColor({color: '#4688F1'});

Etykietka

Zarejestruj etykietki w polu "default_title" pod kluczem "action" w pliku manifest.json.

manifest.json:

{
  "name": "Tab Flipper",
 ...
  "action": {
    "default_title": "Press Ctrl(Win)/Command(Mac)+Shift+Right/Left to flip tabs"
  }
...
}

Możesz też ustawić lub zaktualizować etykietki, wywołując funkcję action.setTitle(). Jeśli nie ustawiono etykietki, wyświetla się nazwa rozszerzenia.