Narzędzia przyspieszające pracę zespołów tworzących oprogramowanie – dodatek do przeglądarki

Chrome extension

Krzysztof Brączyk
Programista w I-BS.pl

Narzędzia przyspieszające pracę zespołów tworzących oprogramowanie – dodatek do przeglądarki

W dobie powszechnego dostępu do sprzętu komputerowego oraz sieci internetowej bez wątpienia rośnie popularność aplikacji internetowych. Każdego dnia ogromna rzesza użytkowników korzysta z różnego typu aplikacji. Należy podkreślić fakt, że aplikacje te dostarczają funkcjonalności zależnych od potrzeb użytkowników. Z pomocą witryn internetowych możemy dzisiaj załatwić niemal wszystko – począwszy od spraw urzędowych, na zarządzaniu swoim budżetem w aplikacji bankowej kończąc.

Proces tworzenia oprogramowania jest bardzo czasochłonny. Za każdą działającą aplikacją stoi cały zespół osób, starających się stworzyć jak najlepszy produkt. Bez ludzi dokładających wszelkich starań o jakość produktu ciężko wyobrazić sobie istnienie aplikacji.

Kamieniem węgielnym danego oprogramowania są również formularze – od tych prostych jak na przykład formularz kontaktowy na stronie internetowej firmy, aż po te zaawansowane  wymagające wprowadzenia dużej ilości danych. Same dane często są bardzo różnorodne. Istnieją zarówno proste dane tekstowe, czy specjalistyczne dane osobowe – jak numer dowodu osobistego lub numer PESEL. Duża część z wprowadzanych do formularzy danych (czy to przez programistów czy testerów) bywa czasochłonna. Niekiedy wręcz zostają oni zmuszeni nie tylko do przygotowywania, ale również do korzystania ze zbiorów danych testowych.

Bazując na swoim doświadczeniu zawodowym pomyślałem o usprawnieniu całego procesu. Wobec tego – zamiast kopiować i wklejać dane, które są potrzebne, zachęcić do skorzystania z rozszerzenia przeglądarki. To rozwiązanie, które nie ingeruje bezpośrednio w działanie naszej aplikacji, ale pozwala znacznie zwiększyć efektywność. Wynika to z rozbudowania możliwości przeglądarki internetowej.

W dalszej części wpisu spróbuję krótko przedstawić proces tworzenia mojego autorskiego dodatku do przeglądarki na przykładzie aplikacji Form Completer. Wspólnie stworzymy aplikację, która rozbuduje menu kontekstowe przeglądarki po kliknięciu na pole formularza i pozwoli  na  wygenerowanie oraz uzupełnienie wartością pola formularza. Pokażę również, jak taki stworzony dodatek  umieścić w przeglądarce. Zapraszam do praktycznego omówienia tematu.

Czym są rozszerzenia przeglądarki?

Rozszerzenia przeglądarki to małe aplikacje/programy, dzięki którym użytkownik może dostosować funkcjonalność i zachowanie  przeglądarki do swoich własnych preferencji. Dodatek do przeglądarki może być narzędziem wpływającym na produktywność.  Może nie tylko wzbogacać witryny internetowe, ale też zbierać niezbędne informacje. Coraz częściej takie rozwiązanie dostarcza również rozrywki – jak np. dodatki gry. Rozszerzenia są budowane w oparciu o technologie internetowe takiej jak:

  • HTML,
  • CSS,
  • JavaScript.

Większość użytkowników instaluje interesujące ich dodatki z oficjalnego sklepu Chrome Web Store, gdzie programiści z całego świata publikują swoje rozszerzenia. Warto mieć świadomość, że te rozszerzenia trafiają do użytkowników końcowych dopiero po specjalistycznej weryfikacji. Poniżej przedstawię proces tworzenia własnego rozszerzenia wraz z uruchomieniem go w trybie programistycznym.

Serce dodatków – plik konfiguracyjny

Najważniejszym plikiem, od którego rozpoczniemy tworzenie dodatku, jest manifest.json. Plik ten jest plikiem konfiguracyjnym w formacie JSON i obligatoryjnie musi znaleźć się w projekcie. Manifest przechowuje informację na temat naszego dodatku. Zaczynajmy!

Tworzymy nowy plik o nazwie  ,,manifest.json” i uzupełniamy go o niezbędne dane:

Na samej górze pojawiły się wartości, które są wymagane w każdym pliku konfiguracyjnym rozszerzenia.

  • manifest_version – określa wersję formatu pliku konfiguracyjnego. Wersja pierwsza została już wycofana i nie jest wspierana! Na potrzeby niniejszego wpisu użyłem wersji 3, będącej najnowszą wersją, która została ulepszona w zakresie bezpieczeństwa, prywatności i wydajności względem swoich poprzedników;
  • name – tutaj sprawa jest prosta – ustalamy jak nasz dodatek będzie się nazywał;
  • version – określamy numer wersji dodatku.

Cała reszta jest opcjonalna,  jednak uważam, że również warto je omówić:

  • description – opis rozszerzenia prezentowany pod nazwa;
  • author – nazwa autora dodatku;
  • icons – tutaj definiujemy ikony, które chcemy prezentować. Ikony są zawsze kwadratowe, a ich rekomendowany format to *.png;
  • background – dodatki reagują na eventy przeglądarki, tj. np. zmiana zakładki przeglądarki. W definicji podajemy skrypt, który będzie działał w ‘tle’ przeglądarki. Następnie podajemy ścieżkę do pliku zawierającego skrypt;
  • action – podałem domyślną ikonę oraz ścieżkę do plików, który będzie prezentował podstawowe informacje o dodatku;
  • content–script – podajemy skrypty, które będą uruchamiane w kontekście danej strony internetowej. Uzyskują one dostęp do Document Object Model (struktura strony), przez co mogą modyfikować ją w czasie rzeczywistym. Istnieje także możliwość uruchamiania wielu skryptów. Klucz js przyjmuje ścieżkę do skryptu contentScirpt.js. Wymagane jest zdefiniowanie adresów witryn internetowych, dla których skrypt będzie uruchamiany.
  • permisions – określamy zbiór uprawnień, które są niezbędne do prawidłowego działania rozszerzenia. ,,activeTab/Tabs” pozwala korzystać z zakładek otwartych w przeglądarce, natomiast ,,contextMenus” dostarcza uprawnienia do modyfikowania menu wyświetlanego po kliknięciu prawym przyciskiem myszy w oknie przeglądarki.

Po utworzeniu pliku konfiguracyjnego stworzony dodatek może zostać umieszczony w przeglądarce. Jest to o tyle ciekawe, że w tym  momencie jego umieszczenia nie dostarcza żadnej funkcjonalności.

Instalacja dodatku w przeglądarce

Dodatek może zostać zainstalowany w przeglądarce z oficjalnego sklepu Chrome Web Store. Większość użytkowników wybiera opcję, o której mowa wyżej. Istnieje jednak alternatywa, gdzie w trybie programistycznym możemy doinstalować dodatek do przeglądarki, wskazując dokładną lokalizacje plików na komputerze. Plusem jest więc fakt, że rozszerzenie można umieścić w przeglądarce i na bieżąco monitorować postęp prac. Po zakończeniu procesu tworzenia dodatek można wprowadzić do oficjalnego sklepu.

Ręczną instalację rozpoczynamy od otworzenia menagera rozszerzeń. Otwarcie panelu zakładek możliwe jest na dwa sposoby:

  1. wpisując w pasek adresu: chrome://extensions ;
  2. wybierając przycisk menu przeglądarki i kolejno opcje ”Więcej narzędzi” => „Rozszerzenia”.

Po wykonaniu jednej z powyższych opcji powinien ukazać się następujący widok:

W panelu rozszerzeń w czytelny sposób prezentowane są dodatki, które już zostały zainstalowane. W prawym górnym rogu musimy włączyć „tryb dewelopera”.

Ukażą się nam dodatkowe opcje, które pozwalają na manualne zainstalowanie dodatku.

Wybieramy opcję „Załaduj rozpakowane”, następnie wskazujemy katalog z rozszerzenia i klikamy ,,otwórz”. Widzimy zainstalowany już autorski dodatek, który prezentuje informacje podane w pliku konfiguracyjnym.

Posiadanie zainstalowanego dodatku niesie z sobą liczne profity. Dzięki temu możemy kontynuować pracę i na bieżąco śledzić postępy.

W pliku ,,manifest” określony został plik, który będzie prezentowany po kliknięciu ikony dodatku z paska nawigacyjnego. W pliku zawarte są informacje na temat dodatku, a także prosty gif pokazujący jego użycie oraz informacje o autorze. Tworzymy plik „popup.html” oraz „popup.css”. W przedstawionym poniżej pliku html umieściłem następującą strukturę:

Dodatkowo w pliku ze stylami umieszczone zostały podstawowe reguły. Celem tego zabiegu jest poprawa walorów estetycznych widoku.

Po wykonaniu powyższego kroku odświeżamy dodatek klikając na ikonę.

Zmiany powinny być widoczne. Klikamy na ikonę dodatku znajdującą się na pasku nawigacyjnym.

Budowanie menu kontekstowego

Praca nad dodatkiem powoli przynosi efekty. Posiadamy zainstalowany dodatek oraz widok prezentujący jego funkcjonalność. Pora na opracowanie skryptu, który zapewni ową funkcjonalność i sprawi, że nasze rozszerzenie stanie się użyteczne.

Budowanie menu kontekstowego realizowane będzie w pliku background.js uruchamianego w tle dodatku. Tworzę plik o nazwie „background.js”.

W pliku określam dwie zmienne stałe. Jedna przyda się do przechowywania informacji o ,,id” naszego menu kontekstowego, natomiast druga zmienna będzie ,,enumem” przechowującym informacje o opcjach dostępnych w naszym menu.

W tym miejscu konieczne jest odwołanie się do ,,API reference” (chrome) przeglądarki. Celem tego zabiegu jest zmodyfikowanie menu. Należy wyczyścić całe menu kontekstowe, a następnie utworzyć własną opcję poprzez wywołanie funkcji „create”.

Do funkcji tworzącej opcje w menu musimy podać obiekt z następującymi informacjami:

  • ,,id” – unikatowy identyfikator opcji menu,
  • ,,title” – tytuł, który zostanie wyświetlony w dodanej opcji,
  • ,,context” – tablica przyjmująca informację kiedy prezentować opcje w menu.

Odświeżenie dodatku i użycie prawego przycisku myszy na polu formularza prezentuje nową opcję „menu” dla naszego dodatku:

Narzędzia przyspieszające pracę zespołów tworzących oprogramowanie - 9

Należy jeszcze  dodać „submenu”, w którym zaprezentowane zostaną wszystkie opcje określone w „enumie” akcji. Proces ten jest analogiczny jak w przypadku tworzenia opcji głównej. Jedyną różnicę stanowi konieczność podania parametru „parentId” w obiekcie przekazywanym do funkcji „create”.

Ostatnią rzeczą, o którą trzeba zadbać jest przekazywanie informacji, o tym jaka opcja z menu została zatwierdzona (kliknięta). Informację, o której mowa przekazujemy do aktywnej zakładki przeglądarki celem wygenerowania  odpowiednich danych oraz umieszczenia ich w polu formularza. Aby wyłapać kliknięcia, w opcje „menu kontekstowego” dodajemy „nasłuchiwanie na odpowiedni event”.

Kliknięcie na opcję „menu” uruchamia funkcje, która wysyła wiadomość do aktualnie używanej zakładki przeglądarki z informacją o identyfikatorze menu, który został wybrany przez użytkownika.

Generowanie danych

Ostatnią rzeczą, która trzeba zrobić jest wspomniane wyżej nasłuchiwanie na informację. Chodzi przede wszystkim o to czy użytkownik zdecydował się na użycie opcji z menu kontekstowego, a jeśli tak – to wskazanie jaką konkretnie opcję wybrał.

Na podstawie tych informacji odpalona zostanie odpowiednia funkcja, której zadanie jest wygenerowanie i wypełnienie formularza danymi.

Skrypt odpowiedzialny w/w funkcjonalność umieszczony został w pliku „contentScript.js” nie bez powodu. Skrypt uruchamiany jest w DOM aktualnie otwartej strony, przez co uzyskuje dostęp do jej struktury.

W naszym przypadku potrzebne jest uzyskanie dostępu do pola formularza. Pozwolę sobie pominąć szczegółowe omawianie każdej z funkcji generującej dane (dla zainteresowanych proces generowania i walidacji danych testowych mogę opisać w osobnym wpisie).

Skupmy się na wyłapaniu informacji o użytej opcji. W tym celu należy zaimplementować nasłuchiwanie na event „onMessage”.

Narzędzia przyspieszające pracę zespołów tworzących oprogramowanie - 11

Funkcja uruchamiana po zdarzeniu „onMessage”, dopasowuje wybraną opcje z menu do skryptu, który ma zostać wykonany.

Przykładowo wybranie opcji „Nr dowodu” => „Poprawny” prześle wiadomość „2valid”. Funkcja z wiadomości wyciąga informacje odnośnie opcji wybranej (item). Ponadto jej zadaniem jest generowanie poprawnych danych (valid).

Samo uzupełnienie pola formularza danymi jest już banalnie proste i sprowadza się do pobrania aktywnego elementu strony (pola formularza na którym kliknięto

oraz przypisanie wygenerowanej wartości:

Działanie naszego dodatku prezentuję się następująco:

Narzędzia przyspieszające pracę zespołów tworzących oprogramowanie - 14

Wnioski

Jak zostało wskazane w stworzonym przeze mnie wpisie – dodatki mogą być tworzone w naprawdę prosty sposób. Bez wątpienia warto poznać schemat używania i tworzenia w/w dodatków i poprzez ich użycie upraszczać sobie pracę w innowacyjny sposób.

Dzięki łatwości tworzenia dodatków w przeglądarce tak naprawdę każdy może je tworzyć, dopasowując je do spersonalizowanych potrzeb. Mam nadzieję, że niniejszym wpisem przekonałem Cię do stworzenia własnych rozwiązań. Zachęcam do odwiedzenia repozytorium, pobrania rozszerzenia no i oczywiście do korzystania.

Pobierz rozszerzenie:

Generowanie danych

Najnowsze aktualności

Polub nas na FB!

Skontaktuj się z naszym działem handlowym!

Anna Gawrońska

e-mail: a.gawronska@i-bs.pl

tel. kom. 532 748 240