Budujemy rozszerzenie do Chrome - #1 (Plik manifestu)

W karierze każdego developera, musi przyjść taki moment, aby napisać coś, z czego bedą korzystać miliardy użytkowników. A że wspomniane miliardy każdego dnia korzystają z przeglądarki Chrome, stąd drogą dedukcji postanowiłem stworzyć rozszerzenie do tejże.

A tak zupełnie poważnie.

Od jakiegoś czasu szukam prostego rozszerzenia dla karty nowej strony w przeglądarce, która pozwoli mi agregować najważniejsze dla mnie serwisy, z których na codzień korzystam, w postaci estetycznych widgetów. Bez reklam, bez czekania 3 sekund aż sterta śmieciowych plików statycznych zaczyta się, aby wyświetlić mi kilka linków.

W pewnym momencie stwierdziłem, czemu nie stworzyć samodzielnie czegoś, co spełni moje oczekiwania. Tak też zrobiłem, co opiszę w czterech artykułach:

  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)

Jak to się robi?

Rozszerzenia do Google Chrome to nic innego, jak strony www oparte o JavaScript, HTML i CSS, wspierane przez dostarczone w Chrome API, które pozwala na dostęp do zarządzania wbudowanymi funkcjami przeglądarki, np. zakładkami, pobranymi plikami, danymi aktualnie odwiedzanej witryny itp.

Założenia

  • Rozszerzenie ma zastępować domyślną stronę nowej karty w przeglądarce
  • Musi być tak szybkie, jak to możliwe. Uzyskam to ograniczając do minimum requesty na zewnątrz i biblioteki wspomagające, np. jQuery, Bootstrap
  • Ma być napisane w czystym JS z udogodnieniami dostępnymi od wersji ES6 (arrow functions, spread operator)

Zaczynamy

Podstawowym plikiem każdego rozszerzenia Chrome, jest plik manifest.json. Definiuje on pliki wykorzystywane przez nasze rozszerzenie, uprawnienia do API jakie musi otrzymać, nazwę, autora, wersję językową i kilka innych, mniej istotnych parametrów.

Stwórzmy więc plik manifest.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

{
  "manifest_version": 2,
  "name": "Fast new tab",
  "shortName": "Krótki opis",
  "description": "Pełny opis",
  "author": "Kamil Rybczyński",
  "version": "0.1.0",
  "default_locale": "en",
  "chrome_url_overrides": {
    "newtab": "newtab.html"
  },
  "icons": {
    "16": "images/icon/icon16.png",
    "48": "images/icon/icon48.png",
    "128": "images/icon/icon128.png"
  },
  "background": {
    "scripts": [
      "js/background.js"
    ],
    "persistent": false
  },
  "options_page": "options.html",
  "permissions": [
    "bookmarks",
    "storage"
  ]
}

Parametrów name, shortName, description, author, icons wyjaśniać raczej nie trzeba. Dodam tylko tyle, że ostatnim artykule z cyklu omówię, jak zapełnić pola opisowe danymi ze zmiennych językowych (jeśli chcemy dostarczyć wielojęzyczne rozszerzenie).

version

Parametr definiuje aktualną wersję rozszerzenia. Po wczytaniu do sklepu Chrome pliku ze spakowanym rozszerzeniem, Chrome zaczyta tą informację, aby zasugerować użytkownikom aktualizację.

default_locale

Jest to domyślny język rozszerzenia. Gdy dostarczymy wiele tłumaczeń, ta zmienna ma wpływ tylko na te wersje językowe Chrome, których nie obsługujemy.

chrome_url_overrides

Jest jednym z kluczowych parametrów. Określa on, którą z zakładek dostarczanych przez przeglądarkę, zastąpić plikiem HTML dostarczonym przez nasze rozszerzenie. W powyższym przykładzie, stronę o identyfikatorze newtab zastępujemy plikiem newtab.html.

Inne dostępne wartości możesz znaleźć tutaj.

background

Definicje skryptów uruchomionych w tle, niewidocznych z poziomu przeglądarki, najczęściej służą do przeprowadzenia instalacji, usuwania, aktualizacji rozszerzenia. Mamy w nich dostęp do eventów, które wywołują się po wystąpieniu powyższych zdarzeń.

options_page

Jest lokalizacją pliku, który dostarcza widok panelu konfiguracyjnego rozszerzenia. W moim przypadku, będzie to strona, która umożliwi edycję ustawień i dodawanie widgetów do strony nowej karty.

permissions

Parametr określa, do jakich metod API Chrome potrzebujemy dostępu. Wartość bookmarks oznacza dostęp do zakładek Chrome, natomiast storage daje dostęp do narzędzia działającego na podobnej zasadzie co localStorage przeglądarki, z tą różnicą, że mamy tutaj do dyspozycji dwie metody przechowywania danych rozszerzenia: lokalnie i w chmurze.

Przechowywanie danych w chmurze pozwala mieć te same ustawienia rozszerzenia, dla wszyskich przeglądarek uruchomionych po zalogowaniu się do swojego konta Google.

Inne dostępne wartości możesz znaleźć tutaj.

Pliki HTML i JS

Teraz utworzymy wszystkie pliki, które uprzednio zadeklarowaliśmy w pliku manifestu.

Stwórz katalog js i umieść w nim pusty plik o nazwie background.js.

Teraz stwórz pliki startowe dla rozszerzenia: newtab.html i options.html. Oba wypełnij tymczasowo poniższą zawartością:

1
2
3
4
5
6
7
8

<html>
<head></head>
<body id="wrapper">
<div class="container">
    <div class="row">Fast new tab</div>
</div>
</body>
</html>

Na razie to wystarczy. W kolejnych częściach dodamy jeszcze kilka plików.

Uruchomienie rozszerzenia

Teraz możemy już zobaczyć rozszerzenie w przeglądarce. Realizuje się to poprzez uruchomienie trybu deweloperskiego i wczytanie rozszerzenia z katalogu na komputerze.

Aby to zrobić, uruchamiamy w przeglądarce adres chrome://extensions/ i zaznaczamy checkbox Tryb programisty. Następnie klikamy w button Załaduj rozpakowane i wskazujemy w na katalog, w którym znajduje się kod rozszerzenia.

Voilà. Teraz możesz otworzyć nową kartę przeglądarki i zobaczyć napis Fast new tab.

Podsumowanie

Na dziś wystarczy. Po tym kroku bez problemu powinieneś/aś byś w stanie z powodzeniem zdefiniować wszystko, czego potrzebuje Twoje rozszerzenie, aby wykonać zadania jakie przed nim stawiasz.

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

To jest mój drugi post na tym blogu, więc z pewnością mogły mi się zdarzyć skróty myślowe lub niedopowiedzenia, przez które nie wszystko było jasno i precyzyjnie opisane. Pisz komentarz z wątkiem, który mam doprecyzować.