Rozszerzenie dla Chrome? Prooosteee!

Przy nakreślaniu rozwiązań dla jednego z moich projektów wpadłem na pomysł, że fajnie było by zrobić nakładkę na stronę, żeby można było info z niej dodawać do mojej aplikacji.
Tak doszedłem do tego, że dobrze było by zrobić jakieś rozszerzenie dla przeglądarki.

Z racji tego, że używam naprzemiennie Chrome i Firefox szukałem opisów dla obu tych przeglądarek i... dla Chrome znalazłem od razu dokumentację i przykłady, a dla Firefoxa nie. Nie szukałem długo, może dlatego.

Okazało się, że zasady tworzenia pluginu, dla przeglądarki Google jest banalne w założeniach i na bazie oficjalnego tutorialu stworzyłem własny prościutki plugin służący do skracania linku z pomocą serwisu tnij.org.
Oto kod tego pluginu.

W skrócie budowanie rozszerzenia sprowadza się do tego, że:

1. tworzymy plik manifest.json w którym opisujemy plugin oraz udzielamy zezwoleń do korzystania z różnych zasobów i ustawiamy ikonkę.
2. tworzymy plik główny np. popup.html gdzie wstawiamy blok ze stylami oraz kod javascript. Jest to, jak sama nazwa wskazuje, "dymek" pokazujący się po kliknięciu w ikonkę rozszerzenia.

W zasadzie mamy pełną dowolność w kwestii tego, co możemy w nasz "popup" wsadzić. Wystarczy trochę wiedzy z zakresu javascript oraz css i rzucać okiem na dokumentację dla developerów rozszerzeń.

P.S.
Żeby odpalić ten plugin należy:

1. pobrać/sklonować go
2. w Chrome przejść do zakładki z rozszerzeniami i rozwinąć "Tryb programisty"
3. kliknąć w button "Wczytaj rozszerzenie bez pakietu"
4. Wskazać katalog z rozpakowanym pluginem