Jak zrobić dodatek do przeglądarki chrome - tutorial dla naprawdę zielonych
Cześć ostatnimi czasy rozwijam softskille więc dziś będzie trochę typowego programowania co by nie oszaleć (albo znormalnieć). Spróbujemy zrobić dodatek do przeglądarki chrome. Wbrew pozorą nie jest to takie trudne jak się wydaje. Do zrobienia podstawowej wersji starczy nam znajomość… i to właściwie tyle. Będzie jeden plik JavaScript ale ma on dosłownie kilka linijek więc wytłumacze krok po kroku co jest do czego i jeden plik HTML który przekleicie. Dobra, jedziemy z tym koksem. Z góry przepraszam za infantylny styl ale czemu tak to napisałem to przeczytacie na końcu. O ile dotrwacie :) Challenge accepted? To zaczynamy :)
W pierwszym kroku tworzymy sobie nowy folder na pulpicie. Nazwijmy go… “GF”. Jak to zrobić? No dobra, klikamy prawym przyciskiem myszy na pulpicie i z menu rozwijanego wybieramy Nowy a następnie Folder.

 
Zmieniamy jego nazwę na “GF” trzeba kliknąć DOKŁADNIE NA NIEGO prawym przyciskiem myszy i na długim menu wybrać przedostatnią opcję czyli Zmień nazwę.




Puki co nie ma tragedii? Ok to lecimy dalej.
W tym jakże zacnym folderze będziemy tworzyć wszystkie nasze pliki. Potrzebujemy aż… trzech plików. Wchodzimy w ten folder klikając go dwa razy lewym przyciskiem myszy. Otworzy nam sie nowe puste okienko. powinno wyglądać to mniej więcej tak:


OK teraz będzie NAPRAWDĘ CIĘŻKO więc 200% skupienia. MUSIMY OTWORZYĆ NOTATNIK!!! W lewym dolnym rogu Waszego monitora powinniście widzieć ikonkę lupy którą trzeba kliknąć. Coś takiego:



Ok wiem że jest ciężko, mnie też, ale wytrzymajmy razem to napięcie. W pole “Wyszukaj w systemie Windows” wpisujemy słowo NOTATNIK. A oczom Waszym ukaże sie ten oto program na który należy kliknać lewym przyciskiem myszy (starczy raz).



Kolejny widok to:



No, chwila oddech i jedziemy dalej. Kopiujemy sobie poniższy kod i klejamy do naszego notatnika:

{
   "manifest_version": 2,

   "name": "MOJA NAZWA",
   "description": "MÓJ OPIS",
   
   "version": "1.0",
   
   "browser_action": {
      "default_icon": "ikona.png",
      "default_popup": "index.html"
   },

   "permissions": [
      "activeTab",
      "https://ajax.googleapis.com/"
   ]
}


OK co on oznacza? To tak zwany manifest. Spokojnie - to nie ma żadnych podtekstów politycznych. Jest to po prostu taki plik dzięki któremu przeglądarka dostaje podstawowe dane o waszym rozszerzeniu. Nas interesują w nim 4 rzeczy.
  1. Tam gdzie pisze MOJA NAZWA wpisujemy nazwę naszego rozszerzenia. Nie żebym robił kryptoreklamę ale sugeruje wpisanie nazwy “Geek Factory”. Uważajcie żeby nie skasować cudzysłowów(“”) bo będzie bum.
  2. MÓJ OPIS zmieniamy na opis naszego rozszerzenia czyli na przykład “Badabum Badabim - www.geekfactory.pl”.
  3. ikona.png - zostawiamy bez zmian. Jest to nazwa ikonki którą będziemy widzieć (spokojnie, oddychajcie, dojdziemy do tego)
  4. index.html - też tego nie ruszamy bo, to strona która pokaże nam sie po kliknięciu naszej ikonki - j.w.

Dobra - mamy? To teraz trochę ciężkiej pracy. W lewym, górnym rogu jest napis “Plik”. Klikamy go lewym przyciskiem myszy i wybieramy “Zapisz jako…” NIE POMYLCIE SIĘ Z OPCJĄ “Zapisz” bo… w sumie nic się nie stanie, ale ma być zapisz jako i tyle :D.


Oczą Waszym po raz kolejny ukaże się cód a mianowicie wasze dokumenty. U mnie akórat zobaczyliście Assasin Creed - polecam. Ale wracając do tematu. Wybieramy z lewej strony Pulpit i klikamy w niego.



Wśród gąszczu dziwnych rzeczy, w prawej stronie okienka zobaczycie folder GF. Trzeba go kliknąć lewym przyciskiem myszy. Folder powinien być pusty. Dobra, na dole w polu Nazwa pliku wpisujemy: manifest.json a w polu poniżej Zapisz jako typ wybieramy wszystkie pliki. Upewniamy się że to wygląda tak...

 


...i klikamy Zapisz. Jest moc co nie? W Naszym folderze GF pojawił nam się nowy plik w formacie *.json. Co to jest? A wygooglujcie sobie, co ja jestem encyklopedia czy co?



Wracamy do naszego notatnika (tam gdzie wklejaliście kod) zaznaczamy wszystko (Lewy Control + A) i usuwamy (Delete).



Osiągamy taki efekt jak powyżej. Teraz wklejamy kolejny kod do notatnika:

www.geekfactory.pl


I znów klikamy Plik (Lewy, górny róg), a potem Zapisz jako… Tym razem się serio nie pomylcie bo jak klikniecie Zapisz to będzie problem i trzeba będzie zacząć od początku :D Na szczęście komputer ma odrobinę oleju(?) w głowie(?) i jesteśmy już z automatu w folderze GF. W polu Nazwa pliku wpiasujemy index.html no i nie zapomnijcie zmienić Zapisz jako typ na wszystkie pliki.


Klikamy Zapisz i dzieje się magia - pojawia nam się nowy plik w folderze. Ostatni krok to ikona. Powinna mieć wymiary 19 na 19 pikseli ale może być większa. Ważne jest to żeby była kwadratem (chyba bo nie testowałem :D) Ci z Was którzy nie parali się nigdy ikonografią (? WTF) mogą pobrać sobie tą ikonkę...



...i przekopiować ja z pobranych dokumentów do folderu GF. Porażajacy efekt naszych działań powinien wyglądać mniej więcej tak:


Dobra, teraz otwieramy przeglądarkę chrom i w prawym górnym rogu szukamy trzech kropek. Klikamy wybieramy: Więcej narzędzi a potem rozszerzenia.



Powinniśmy zobaczyć mniej więcej taki oto ekran na którym zaznaczamy tryb programisty, a potem klikamy Wczytaj rozszerzenie bez pakietu…


Z magicznego okienka mocy które ukazało się nam bo byliśmy grzeczni wybieramy folder Pulpit, a potem GF i klikamy OK.


UWAGA! W prawym, górnym rogu zobaczymy ikonkę naszą, a po kliknięciu rozszerzenie nasze. Aleluja i do przodu.



Gratuluje macie +5 do skilów programowania, +3 do bycia fajnym i +200zł do wypłaty programisty, bo umiecie robić rozszerzenia do chrome.



A teraz troche powagi…
Wiem że wpis był boooooleśnie długi i 90% ludzi chciało mnie zabić już po kilku pierwszych zdaniach kiedy pokazywałem jak się tworzy nowy folder na pulpicie. Oczywiście, większość z Was podłapała sarkazm (mam taką skromą nadzieję) więc licze na wyrozumiałość. Po prostu usłyszałem ostatnio od developera z 5 letnim stażem że tworzenie rozszerzeń do przeglądarki to “wyższa szkoła jazdy”. I w sumie miałby rację gdybyśmy dziś mieli ...rok 2009 Jakoś w tym okresie tworzyłem pierwsze rozszerzenia tego typu. O ile w chromie za dużo się nie zmienilo, o tyle dla firefoxa trzeba było używać języka XUL (czyta się ZUL, upraszczajac to rodzaj XML dedykowany dla produkót marki Mozilla). Jedyna dokumentacja jaka wtedy istniała, była w języku japońskim, a translatory chodził jak chodziły więc wyglądało to tak:
1) Ctrl+C, CTRL+V z dokumentacji po japońsku do translatora na angielski
2) Ctrl+C, CTRL+V z tłumaczenia angielskiego na polski
3) Wynik: “Ty kliknąć kropka i wpisać to być…”
Hardcore… Ale wtedy usłyszałem od mojego znajomego programisty: “Dobry programista różni się od początkujacego tym że nie przeraża go zadanie jakie ma zrobić, tylko po prostu je robi, krok po kroku”. I szczerze te hasło przyświeca mi do dziś. 99% problemów jakie napotykacie w programowaniu, to po prostu ciutkę bardziej skąplikowane problemy które można rozbić na mniejsze, mniejsze, mniejsze aż dojdziemy do czegoś od czego da się zacząć pisać kod. Często przeraża nas sama idea a w praktyce okazuje się że wykonanie jest banalne - patrz wyżej. Nie próbujcie ogarniać wszystkiego na raz bo po prostu sie nie da. Step by step.

Dobra, ale co dalej z naszym rozszerzeniem? Plik HTML stylujemy jak… każdy inny plik HTML. Możemy do tego dodać HTML, CSS, JS,... niemal cokolwiek, co nam się zamarzy. Jest oczywiście kilka tematów w które można się zagłębić typu uprawnienia jednak tak jak pisałem wyżej - małe kroczki, nie wszystko naraz. Na końcu możemy skompilować i opublikować nasze rozszerzenie w google apps,... ale to już historia na zupełnie inny temat... Jak będę miał chwilę to dopisze też to, a puki co zerknijcie do dokumentacji - to nic trudnego. 

PS: Zapraszam (uwaga autoreklama) do Szkoły Programowania Geek Factory w Katowicach - tam robimy zdecydowanie ambitniejsze projekty :)
Piątek, 18 Sierpień 2017
Wróć do bloga