Budujemy rozszerzenie do Chrome - #4 (Wielojęzyczność i publikacja w Chrome Store)

Wpis jest czwartym i ostatnim z cyklu “Budujemy rozszerzenie do Chrome”. W tym kroku dostarczymy rozszerzeniu obsługi wielu wersji językowych, ogarniemy instalator i rozszerzenie w sklepie Chrome.

  1. Budujemy rozszerzenie do Chrome - #1 (Plik manifestu)
  2. Budujemy rozszerzenie do Chrome - #2 (Panel ustawień)
  3. Budujemy rozszerzenie do Chrome - #3 (Strona frontowa)
  4. Budujemy rozszerzenie do Chrome - #4 (Wielojęzyczność i publikacja w Chrome Store)

Wielojęzyczność

Z pewnością przeglądając kod, który zamieszczałem w poprzednich częściach serii, zauważyłeś coś w stylu chrome.i18n.getMessage('settings_saved'). Są to odwołania do zmiennych, zadeklarowanych w plikach z tłumaczeniami.

Oprócz plików js, zmienne językowe możemy także wykorzystywać w pliku manifest.json. Używamy wtedy takiej formuły __MSG_nazwazmiennej__.

A skoro już o manifest.json piszę, w tym pliku właśnie definiujemy domyślny język rozszerzenia. Używamy do tego celu atrybutu default_locale. U mnie jest to en.

Kolejnym krokiem jest dodanie katalogu z tłumaczeniami o nazwie _locales, a następnie katalogów języków, np. pl, en, de, fr itp. W każdym z katalogów tworzymy plik messages.json i to właśnie do niego trafią wszystkie tłumaczenia.

Warto tutaj nadmienić, że Chrome Store analizuje listę dostarczonych języków i na tej podstawie wyświetla je na karcie rozszerzenia w Store.

To by było na tyle. Jeśli potrzebujesz więcej informacji, odsyłam do dokumentacji.

Instalator

API Chrome pozwala nam wykonać pewne zadania podczas instalacji lub aktualizacji rozszerzenia.

W naszym przypadku będzie to dodanie domyślnych danych do storage przeglądarki.

Tego typu działania wykonujemy w pliku zdefiniowanym w manifest.json:

1
2
3
4
5
6
  "background": {
    "scripts": [
      "js/background.js"
    ],
    "persistent": false
  },

Utworzymy zatem plik js/background.js i umieścimy w nim zawartość:

1
2
3
4
5
6
7
8
9
10
chrome.runtime.onInstalled.addListener(function() {
  let storage = {
    settings: {
      columns: 3,
      background: '1.jpg'
    },
    widgets: []
  };
  chrome.storage.sync.set(storage);
});

Jak widzisz, w pierwszej linii uruchamiamy callback, wyzwalany w momencie wystąpienia zdarzenia, którym zarządza Chrome. Więcej zdarzeń znajdziesz tutaj.

Zasada działania jest prosta. Definiujemy prostą zmienną, która definiuje strukturę storage rozszerzenia, ustawia domyślną ilość kolumn i tło, a następnie zapisuje w storage.

Ikona rozszerzenia

Dla przyjemniejszej prezentacji rozszerzenia w Chrome Store, warto dodać mu jakąś ikonę. Nie ma jednak tak łatwo. Ikona powinna być dostarczona w kilku wielkościach, 16x16 leci jako favicona, 48x48 do strony zarządzania rozszerzeniami, a 128x128 na stronę Chrome Store. Tutaj przeczytasz o tym więcej.

Publikacja w Chrome Store

Pozostał nam już tylko ostatni etap - podzielenie się efektami wielomiesięcznej pracy ze światem.

Zaczynamy od założenia konta w Google (jeśli jeszcze go nie posiadasz). W tym celu odwiedź ten adres i kliknij Zaloguj się.

Po zalogowaniu się, wejdź w zakładkę Panel programisty.

Pierwszym krokiem jest opłacenie daniny. Na dzień pisania tego artykułu, wynosi ona $5 i jest jednorazową opłatą za weryfikację Twojego konta.

Po jej opłaceniu, kliknij w przycisk Dodaj nowy produkt. Znajdziesz się na stronie, na której możesz wgrać swoje rozszerzenie.

Musisz je dostarczyć w formie pliku zip. Spakuj zatem całą zawartość katalogu rozszerzenia (jeśli pracujesz w IDE lub masz zapisane jakieś pliki źródłowe, pamiętaj aby ich nie spakować).

Tak przygotowane rozszerzenie wgraj przez formularz.

Po wysłaniu, musisz już tylko oczekiwać na akceptację. W moim przypadku potrwało to niecałe dwa dni, więc tragedii nie ma.

Podsumowanie

Nie lubię pożegnań więc nie będę się rozpisywał. Reasumując cały cykl, rozszerzenia do Chrome to nic innego jak zwyczajne strony zbudowane z użyciem HTML, CSS oraz JS opakowanie plikiem manifestu.

Mógłbym spokojnie użyć takich bibliotek jak jQuery, Lodash, Bootstrap itp., napisać rozszerzenie niemal dokładnie tak jak pisze się typowe strony www, z tą różnicą, że wszystkie pliki używane w rozszerzeniu, muszą być zadeklarowane w pliku manifest.json oraz mamy do dyspozycji pewne funkcje JS dostarczone przez Chrome API.

Całość kodu rozszerzenia dostępna jest na GitHub.