Wdrażanie działania

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Działanie to to, co dzieje się, gdy użytkownik kliknie ikonę na pasku narzędzi. Zwykle nazywa się ją ikoną działania rozszerzenia. Działanie wywołuje funkcję rozszerzenia za pomocą Action API lub otwiera wyskakujące okienko. Ta strona pokazuje, jak wywołać funkcję rozszerzenia. Aby użyć wyskakującego okienka, przeczytaj artykuł Dodawanie wyskakującego okienka.

Rejestrowanie działania

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

manifest.json:

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

Odpowiedź na działanie

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

service-worker.js:

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

Aktywuj działanie warunkowo

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

Odznaka działania

Plakietki to elementy sformatowanego tekstu umieszczone nad ikoną działania, które wskazują na stan rozszerzenia lub wymagają od użytkownika podjęcia działania. Aby to zilustrować, w przykładzie Pij wodę wyświetla się plakietka z napisem „ON” (WŁĄCZONY), aby poinformować użytkownika o ustawieniu alarmu. Gdy rozszerzenie jest nieaktywne, nie wyświetla się nic. Odznaki mogą zawierać maksymalnie 4 znaki.

Aby ustawić tekst na plakietce, wywołaj funkcję chrome.action.setBadgeText(), a aby ustawić kolor tła, wywołaj funkcję chrome.action.setBadgeBackgroundColor()`.

service-worker.js:

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

Etykietka

Zarejestruj etykiety narzędzia 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ć etykietę za pomocą wywołania action.setTitle()`. Jeśli nie ustawisz etykiety, wyświetli się nazwa rozszerzenia.