chrome.browserAction

Opis

Dostępność

Na poniższym rysunku wielokolorowy kwadrat po prawej stronie paska adresu to ikona czynności przeglądarki. Pod ikoną pojawi się wyskakujące okienko.

Jeśli chcesz utworzyć ikonę, która nie jest zawsze aktywna, zamiast działania przeglądarki użyj działania na stronie.

Plik manifestu

Zarejestruj działanie w przeglądarce w pliku manifestu rozszerzenia w ten sposób:

{
  "name": "My extension",
  ...
  "browser_action": {
    "default_icon": {                // optional
      "16": "images/icon16.png",     // optional
      "24": "images/icon24.png",     // optional
      "32": "images/icon32.png"      // optional
    },
    "default_title": "Google Mail",  // optional, shown in tooltip
    "default_popup": "popup.html"    // optional
  },
  ...
}

Możesz podać dowolny rozmiar ikony do użycia w Chrome. Chrome wybierze najbliższy i przeskaluje go tak, aby wypełniał obszar 16 pikseli. Jeśli jednak nie podasz dokładnego rozmiaru, skalowanie może spowodować utratę szczegółów lub rozmycie ikony.

Urządzenia z mniej popularnymi współczynnikami skalowania, takimi jak 1,5x lub 1,2x, stają się coraz bardziej powszechne, dlatego zalecamy udostępnianie ikon w różnych rozmiarach. Dzięki temu, jeśli rozmiar wyświetlania ikony ulegnie zmianie, nie musisz robić nic więcej, aby udostępnić inne ikony.

Stara składnia rejestrowania ikony domyślnej jest nadal obsługiwana:

{
  "name": "My extension",
  ...
  "browser_action": {
    ...
    "default_icon": "images/icon32.png"  // optional
    // equivalent to "default_icon": { "32": "images/icon32.png" }
  },
  ...
}

Elementy interfejsu

Działanie w przeglądarce może mieć ikonę, etykietę, plakietkę i wyskakujące okienko.

Ikona

Ikony akcji w Chrome mają 16 dipów (pikseli niezależnych od urządzenia) szerokości i wysokości. Większe ikony są dopasowywane do rozmiaru, ale aby uzyskać najlepsze wyniki, użyj kwadratowej ikony o wymiarach 16 pikseli.

Ikona może być ustawiona na 2 sposoby: za pomocą obrazu statycznego lub elementu HTML5 canvas. W przypadku prostych aplikacji łatwiej jest używać obrazów statycznych, ale za pomocą elementu canvas możesz tworzyć bardziej dynamiczne interfejsy użytkownika, np. płynne animacje.

Obrazy statyczne mogą być w dowolnym formacie obsługiwanym przez WebKit, np. BMP, GIF, ICO, JPEG lub PNG. W przypadku rozpakowanych rozszerzeń obrazy muszą być w formacie PNG.

Aby ustawić ikonę, użyj pola default_icon w elementach browser_action w pliku manifestu lub wywołaj metodę browserAction.setIcon.

Aby prawidłowo wyświetlać ikonę, gdy gęstość pikseli ekranu (współczynnik size_in_pixel / size_in_dip) jest inna niż 1, ikonę można zdefiniować jako zestaw obrazów o różnych rozmiarach. Z danego zbioru zostanie wybrany obraz, który najlepiej pasuje do rozmiaru 16 dipów. Zestaw ikon może zawierać dowolną specyfikację rozmiaru ikony, a Chrome wybierze najbardziej odpowiednią.

Etykietka

Aby ustawić etykietkę, użyj pola default_title w elementach browser_action w pliku manifest lub wywołaj metodę browserAction.setTitle. W polu default_title możesz podać ciągi znaków specyficzne dla danego języka. Więcej informacji znajdziesz w artykule Internacjonalizacja.

Plakietka

Czynności przeglądarki mogą opcjonalnie wyświetlać plakietę – fragment tekstu nałożony na ikonę. Plakietki ułatwiają aktualizowanie działania w przeglądarce, aby wyświetlać niewielką ilość informacji o stanie rozszerzenia.

Ponieważ na plakietce jest ograniczona ilość miejsca, powinna ona zawierać maksymalnie 4 znaki.

Ustaw tekst i kolor plakietki, używając odpowiednio atrybutów browserAction.setBadgeText i browserAction.setBadgeBackgroundColor.

Wyskakujące okienko

Jeśli działanie w przeglądarce zawiera wyskakujące okienko, to pojawi się ono, gdy użytkownik kliknie ikonę rozszerzenia. Pop-up może zawierać dowolne treści HTML. Jego rozmiar jest automatycznie dostosowywany do zawartości. Pop-up nie może być mniejszy niż 25 x 25 ani większy niż 800 x 600.

Aby dodać wyskakujące okienko do działania w przeglądarce, utwórz plik HTML z jego zawartością. Podaj plik HTML w polu default_popup w elementach browser_action w pliku manifestu lub wywołaj metodę browserAction.setPopup.

Wskazówki

Aby uzyskać najlepszy efekt wizualny, postępuj zgodnie z tymi wskazówkami:

• Należy używać działań przeglądarki w przypadku funkcji, które mają sens na większości stron.
• Nie używaj działań w przeglądarce do funkcji, które mają sens tylko w przypadku kilku stron. Zamiast tego użyj kolumny page_actions.
• Należy używać dużych, kolorowych ikon, które w pełni wykorzystują przestrzeń 16 x 16 pikseli. Ikony czynności wykonywanych w przeglądarce powinny być nieco większe i grubsze niż ikony czynności wykonywanych na stronie.
• Nie próbuj naśladować czarno-białej ikony menu Google Chrome. Nie sprawdza się to w przypadku motywów, a i tak rozszerzenia powinny się wyróżniać.
• Należy użyć przezroczystości alfa, aby nadać ikonie miękkie krawędzie. Ponieważ wiele osób korzysta z motywów, ikona powinna dobrze wyglądać na tle w różnych kolorach.
• Nie animuj ikony bez przerwy. To po prostu denerwujące.

Przykłady

Proste przykłady korzystania z działań w przeglądarce znajdziesz w katalogu examples/api/browserAction. Inne przykłady i informacje o wyświetlaniu kodu źródłowego znajdziesz w sekcji Przykłady.

chrome.browserAction.disable(
  tabId?: number,
  callback?: function,
)

chrome.browserAction.enable(
  tabId?: number,
  callback?: function,
)

chrome.browserAction.getBadgeBackgroundColor(
  details: TabDetails,
  callback?: function,
)

chrome.browserAction.getBadgeText(
  details: TabDetails,
  callback?: function,
)

chrome.browserAction.getPopup(
  details: TabDetails,
  callback?: function,
)

chrome.browserAction.getTitle(
  details: TabDetails,
  callback?: function,
)

chrome.browserAction.setBadgeBackgroundColor(
  details: object,
  callback?: function,
)

chrome.browserAction.setBadgeText(
  details: object,
  callback?: function,
)

chrome.browserAction.setIcon(
  details: object,
  callback?: function,
)

chrome.browserAction.setPopup(
  details: object,
  callback?: function,
)

chrome.browserAction.setTitle(
  details: object,
  callback?: function,
)

chrome.browserAction.onClicked.addListener(
  callback: function,
)