W pierwszej części serii opisującej krok po kroku tworzenie rozszerzeń do Google Chrome, zarysowałem wygląd rozszerzenia oraz obiecałem, że w kolejnej części przyjrzymy się manifestowi. Ponieważ sam manifest nie jest ciekawy i za dużo na jego temat nie da się napisać (wszystko jest dokładnie opisane w dokumentacji), opiszę jego najbardziej interesujące elementy.

Plik manifestu jest niczym innym jak najzwyklejszym plikiem tekstowym w formacie JSON, którego dokładny opis znajdziemy pod adresem http://code.google.com/chrome/extensions/manifest.html. Nas najbardziej interesują pola wymagane (plus zalecane) oraz pola odpowiedzialne za wizualną reprezentację rozszerzenia.

Do pierwszej grupy pól zaliczają się nazwa rozszerzenia (name), jego wersja (version) oraz opis (description). Nic interesującego. Znacie ciekawiej prezentują się pola pozwalające na dodanie do rozszerzenia kodu reagującego na akcje użytkownika i wykonujące zadane czynności. Do dyspozycji mamy aż pięć rodzajów plików, które możemy utworzyć. Są to:

• akcja przeglądarki (browser action)
• akcja strony (page action)
• skrypt działający w tle (background page)
• skrypt treści (content script)
• opcje

Pierwsze dwa nie różnią się zbytnio od siebie i służą prawie do tego samego – wyświetlenia chmurki po kliknięciu w ikonę rozszerzenia. Czym się zatem różnią? Browser action działa w kontekście przeglądarki, a page action w kontekście strony. Oznacza to, że w pierwszym przypadku ikona rozszerzenia zagości w oknie przeglądarki obok paska adresu, a w drugim wewnątrz paska adresu. Z technicznego punktu widzenia oba sposoby niewiele się od siebie różnią.

Skrypt działający w tle jest dokładnie tym, na co wskazuje nazwa. Działa on w tle i może reagować na akcje użytkownika lub przeglądarki. Oczywiście nic nie stoi na przeszkodzie, aby co jakiś czas łączył się do zdalnego serwera i pobierał np. informacje o nowych mailach. Warto wiedzieć, że background page działa w osobnym procesie i może zostać w dowolnym momencie “ubity”.

Kolejny rodzaj pliku jest równie ciekawy jak poprzednie. Content script jest skryptem JavaScript, który możemy dokleić do strony i go na niej wykonać. Doskonale się on nadaje do wprowadzania zmian w aktualnie przeglądanej stronie oraz pobieraniu z niej informacji. Co więcej przy pomocy content script jesteśmy w stanie dodać do strony własny kod CSS.

Pozostawione na koniec opcje, są po prostu opcjami. To przy pomocy tego pliku ustawiamy modyfikowalne przez użytkownika parametry rozszerzenia.

W kolejnej części serii w końcu napiszemy jakiś kod. Utworzymy pierwsze rozszerzenie i na jego podstawie przyjrzymy się różnicom między browser action i page action.

Kontynuując naprawianie mojego lenistwa związanego z publikacją wpisów na blogu oddaję w Wasze ręce kolejny Linkdump, tym razem poświęcony najpopularniejszej bibliotece / frameworkowi JavaScriptu - jQuery. Mam nadzieję, że zebrane tu informacje po raz kolejny będą dla Was przydatne i znajdą zastosowanie zarówno w projektach komercyjnych, jak też we własnym domowym "dziubaniu" kodu. Zapraszam do [...]

Tak się składa, że praktycznie każdy człowiek ma "swój dzień" w roku. Niezależnie od zawodu (mechanik, hydraulik), relacji z bliskimi (mama, dziadek), czy też innych "tytułów", jakie możemy uzyskać w naszym społeczeństwie, każdemu się należy. Niniejszym wszem i wobec obwieszczam, że dzisiaj, trzynastego dnia miesiąca września jest... Dzień Programisty! Z tej okazji zapraszam do lektury [...]

Przeglądarka Google Chrome powoli, lecz systematycznie, zdobywa rynek. Wraz z ilością użytkowników przeglądarki rośnie ilość potencjalnych odbiorców rozszerzeń. W przeciwieństwie do Firefoxa, rozszerzenia tworzy się bardzo prosto i nie wymagają one poznawania nowej technologii. Wszystko możemy wykonać w znanym i lubianym JavaScripcie, a o wygląd rozszerzenia zadba HTML oraz CSS.

Rozszerzenie zbudowane jest przede wszystkim z pliku manifestu – manifest.json. Możemy w nim zdefiniować takie elementy jak nazwa rozszerzenia, wersja oraz opis. Ponadto w manifeście zamieszczamy informacje o wszystkich stworzonych przez nas dokumentach HTML, ikonach oraz dodatkowych elementach.

Jednak sam manifest na niewiele się przyda bez chociażby wiersza JavaScript. Tutaj z pomocą przychodzi HTML, przy pomocy którego tworzymy dokumenty wykorzystywane przez rozszerzenie. Pierwszym z nich jest popup, czyli to, co pokaże się w chmurce, po kliknięciu w ikonę rozszerzenia. Kolejnym plikiem jest background page, czyli dokument działający w tle (co oznacza, że działa jako osobny proces). To właśnie background page może reagować na akcje użytkownika, przeglądarki lub strony. Ostatnim dokumentem są opcje pozwalające na dostosowanie rozszerzenia do naszych potrzeb.

Wartym uwagi są również content scripts, czyli skrypt JavaScript, które rozszerzenie może wstrzyknąć bezpośrednio do kodu odwiedzanej strony. Pozwala to na manipulowanie drzewem dom. Ze względów bezpieczeństwa content scripts nie mają dostępu do API rozszerzeń.

I to wszystko. Te kilka plików składa się na rozszerzenie, które może wyświetlać godzinę w chmurce lub łączyć się do zdalnych serwerów w celu pobrania interesujących dla użytkownika treści.

W następnej części serii, zajmiemy się czymś bardziej praktycznym – bliżej poznamy plik manifestu.

Kolejna okazja do przetestowania swojej wiedzy z dziedziny HTML, CSS oraz JavaScript. Tym razem zmierzymy się z pytaniami z zakresu HTML5. Test został przygotowany przez serwis js do.it i znajduje się pod adresem http://jsdo.it/event/html5cat/2011/summer/. Jeszcze nie brałem w nim udziału, więc nie mam czym się pochwalić. Jak wam poszło?

P.S. Test wymaga zalogowania z konta Google, Facebooka lub Twittera.

Zainspirowany wpisem na blogu Kamila B., a dokładniej fanboy'owskimi komentarzami, postanowiłem sprawdzić jak się ma sprawa z własnymi selektorami dla prototype.js. W końcu oba (jQuery i prototype) mają wspólny silnik - Sizzle.Toteż wpis będzie porównaniem tego jak wygląda sytuacja w jQuery i w mojej ulubionej bibliotece.

Dawno, dawno temu opublikowałem Linkdump #19 prezentujący zbiór materiałów dotyczących biblioteki MooTools. Kontynuując tą "krucjatę przeciwko jQuery", zapraszam Was dzisiaj do lektury kolejnej serii linków związanych z tym narzędziem.     Fotografia: jeffisageek, CC-BY. Linkdump #57: MooTools. NPM + MooTools + Ender = <3. Czyli kilka słów o zarządzaniu pakietami związanymi z MooTools. Events with [...]