Rozszerzenia Chrome: Pomodoro Timer

Nigdy wcześniej nie pisałem rozszerzeń do Chrome, ale chciałem spróbować. Wiedziałem wcześniej jedynie, że to nie jest zbyt trudne, tutaj cytat mojego kolegi: „Nie wiem jak robi się rozszerzenia do chrome, ale daję to moim studentom na pierwszym roku i jakoś dają radę, więc… to nie może być trudne”. I rzeczywiście nie jest. Rozszerzenie do przeglądarki to nic innego jak HTML+CSS+JS.

„Jeśli umiesz podstawy frontend, to umiesz też chrome extension.”

manifest.json

Zaczynamy od stworzenia zwykłego projektu html/js/css. Następnie dodajemy plik manifest.json, w którym znajdują się podstawowe informacje o rozszerzeniu, takie jak: nazwa, opis, wersja oraz deklaracja uprawnień, jakie są potrzebne, aby rozszerzenie działało.

{
  "manifest_version": 2,
 
  "name": "Timer",
  "description": "This is a simple pomodoro timer.",
  "version": "0.1",
 
  "browser_action": {
    "default_icon": "pomodoro_x128.png",
    "default_popup": "pomodoro-timer.html"
  },
 
  "icons": {
    "128": "pomodoro_x128.png"
  },
 
  "permissions": [
    "background",
    "storage",
    "notifications"
  ],
 
  "background": {
    "page": "background.html"
  }
}

Najważniejsze jest pole default_popup, które mówi przeglądarce – jaki widok ma się wyświetlić po kliknięciu na ikonę rozszerzenia.
Mój Timer, będzie działał w tle, więc potrzebne jest zdefiniowanie dodatkowej strony – background, która będzie żyć tak długo jak długo działa przeglądarka, bez względu na to czy rozszerzenie jest widoczne. W tym celu należy podać wartość parametru background.page. W manifeście znajdują się również inne informacje o aplikacji takie jak: nazwa rozszerzenia, opis, ikona, wersja oraz wykorzystywane uprawnienia. W tym przypadku są to:

Popup

Popup czyli główne okienko rozszerzenia pokazujące się po kliknięciu ikony. (pomodoro-timer.html)
Tutaj dołączamy pliki javascript.<script src="js/pomodoro-timer.js"></script>

Skrypt okna pomodoro-timer.js, zawiera obsługę kliknięć – sterowanie timerem oraz wyświetla aktualną wartość zegara.

Background

Timer będzie działać w tle, dlatego potrzebne jest utworzenie strony oraz skryptu, który działa nawet po zamknięciu widoku rozszerzenia. Skrypty widoku oraz tła mogą komunikować się dzięki „messages”, czyli mechanizmowi wysyłania i odbierania wiadomości, który jest realizowany przez przeglądarkę.
chrome.extension.sendMessage() oraz chrome.extension.onMessage.addListener(func)

Testowanie

Rozszerzenia nie trzeba umieszczać w sklepie, aby dodać je do przeglądarki. W celu przetestowania rozszerzenia należy przejść na stronę rozszerzeń (wpisując w pasek adresu „chrome://extensions/”) oraz zaznaczyć opcję „Tryb programisty”. Wtedy pojawi się przycisk umożliwiający wczytanie rozszerzenia w postaci spakowanego pliku .zip.

Zapraszam do pobrania mojego rozszerzenia.
Kod, który posłużył mi do jego napisania jest w całości dostępny na GitHub.