Krótki wstęp do tworzenia rozszerzeń z Angular

Przedstawiamy wam krótki artykuł autorstwa naszego absolwenta Jakuba. Dotyczy on tworzenia rozszerzeń Chrome w Angular. Projekt, nad którym Jakub pracował w trakcie kursu, to aplikacja komunikująca się ze stacjami pogodowymi we Wrocławiu i monitorująca warunki meteorologiczne dla wybranych dzielnic miasta. Aplikacja działa jako wtyczka Chrome. Jeśli jesteście zainteresowani jak udało mu się to osiągnąć, to zachęcamy do lektury!

Wprowadzenie

Angular nierozłącznie kojarzony jest z dużymi aplikacjami webowymi. Framework zdobył dużą popularność dzięki swojej jasnej, szczegółowo udokumentowanej strukturze. Sztywne reguły ułatwia deweloperom budowanie rozbudowanych aplikacji.

W tym artykule pokażę, że framework ten posiada o wiele szersze możliwości i wykorzystam go do stworzenia własnego rozszerzenia do przeglądarki Chrome. Aplikacje w postaci rozszerzenia do przeglądarki mogą znacznie ułatwić i przyspieszyć codzienną pracę, zaś samo programowanie stanowi świetną okazję do realizacji mini-projektów, które można w pełni samodzielnie zaprogramować w swoim wolnym czasie i zdobyć kolejną cenną umiejętność.

Czego potrzebujemy

Na samym wstępie potrzebujemy dwóch rzeczy, bez których nie będziemy w stanie zacząć:

naszą aplikację napisaną w Angular
poznanie podstaw budowania rozszerzeń. Tutaj warto skorzystać z oficjalnej dokumentacji Google (Overview of Google Chrome Extension oraz Getting Started Tutorial). Zachęcam mocno do zapoznania się z dokumentacją i stworzenie swojego prostego rozszerzenia od podstaw. To znacząco ułatwi Tobie zrozumienie dalszych kroków oraz poruszanie się w środowisku rozszerzeń Chrome.
oczywiście przeglądarki Google Chrome 🙂

Zapoznanie się z elementami rozszerzenia

Budowa rozszerzeń Chrome jest zbliżona do wzorca MVC, co znacząco ułatwia proces zrozumienia ich działania.

Podstawowe elementy:

popup.js/popup.html – to nasz widok. Tutaj znajduje się cała struktura HTML rozszerzenia oraz skrypty działające na widok. Ma pełen dostęp do API rozszerzeń Chrome.
background.js – część rozszerzenia odpowiedzialna za przekazywanie żądań oraz odpowiedzi. Działa w tle i tylko wtedy kiedy jest to potrzebne. Można ją porównać do kontrolera w modelu MVC – w dużej mierze jest odpowiedzialna za obsługę zdarzeń. W background.js również wysyłamy zapytania do zewnętrznego API.
content.js – część, która działa w kontekście strony internetowej, która jest wyświetlana w przeglądarce. Pobiera oraz modyfikuje elementy DOM strony internetowej. W przypadku aplikacji Angular, nie będziemy poświęcać uwagi tej części rozszerzenia.

Zaczynamy!

Na początku zaczynamy od utworzenia manifestu dla rozszerzenia.

W folderze /src/ , naszej aplikacji, tworzymy plik manifest.json. Następnie w pliku umieszczamy podstawowy obiekt json do rozpoczęcia tworzenia rozszerzenia.

W tym momencie powinniśmy dodać jakieś akcje aby nasze rozszerzenie wyświetlało się po kliknięciu w ikonę (popup.html). W tym celu edytujemy nasz plik manifest.json:

Nasze rozszerzenie będziemy załadowywać z folderu dist, w związku z czym musimy wykonać dwa kroki:

w pliku angular.json naszej aplikacji, umieszczamy manifest.json w tablicy assets, która stanowi część obiektu options

uruchamiamy operację ng build w celu załadowania angular.json i utworzenia folderu dist.

Na sam koniec musimy użyć AOT w naszej kompilacji. W tym celu musimy ponownie edytować nasz plik angular.json:

Teraz wystarczy ponownie skompilować naszą aplikację przy użyciu polecenia ng build.W tym momencie mamy gotowy plik dist do załadowania w naszej przeglądarce Chrome.

Czas na Chrome

Jeśli już mamy plik dist wraz ze znajdującym się manifest.json, możemy przystąpić do załadowania naszej aplikacji do Chrome. W tym celu, klikamy trzy kropki w prawym górnym rogu i wybieramy More Tools (więcej narzędzi) a następnie Extensions (rozszerzenia):

W rozszerzeniach, w prawym górnym rogu włączamy opcję Developer mode (tryb developera):

Następnie wybieramy opcję po lewej stronie Load Unpacked (rozpakuj rozszerzenie):

Wybieramy ścieżkę z naszym rozszerzeniem i załadujemy ją. W prawym górnym rogu, gdzie znajdują się rozszerzenia Chrome, powinniśmy zobaczyć logo naszego rozszerzenia:

Po kliknięciu w logo, nasze rozszerzenie uruchomi plik popup.html, który z kolei uruchomi aplikację angularową.

Bibliografia

Bibliografia oraz przydatne linki:

Autor

Jakub Brambor, absolwent I edycji kursuFront-end Developer MEAN STACK Webdevelopment Angular & NodeJS we Wrocławiu.

25 lipca 2020

Rozszerzenia Chrome z Angular