Archiwum Szsz.pl: grudnia 2009

Rozszerzenia Chrome - Tutorial 1

czwartek, 31 grudnia 2009

Jakiś czas temu obiecałem napisać krótki tutorial dotyczący tworzenia rozszerzeń… Najwyższa pora spełnić tą obietnicę.

… ale, na początek:

Bezwstydna autoreklama

Oto drugie rozszerzenie, które popełniłem:


Clearlook Scrollbar Theme

Tym razem jest to modyfikacja paska przewijania. W ten sposób linuksowy Chrome zachowuje spójny wygląd z resztą systemu – pod warunkiem że korzystasz z motywu Clearlook.

Mimo że powstało ono dla systemu Linux, mam potwierdzenia że działa pod każdym systemem operacyjnym.

Narodziło się jako efekt mojej frustracji spowodowanej nieomal całkowitym brakiem czytelności pasków przewijania pod Linuksem. Przy złych warunkach oświetleniowych, bardzo trudno było je dostrzec. Początkowo ograniczałem się do zmiany kolorystyki, jednak później, zachęcony rezultatami, zacząłem coraz bardziej upodabniać je do tego jak wygląda mój system.

Ok, a teraz wracając do tematu…

Tutorial

Jak już wcześniej wspominałem, rozszerzenia mają dwojaką naturę. Z jednej strony, są nowym typem aplikacji – posiadają własny proces, mogą komunikować się z całym światem, zapisywać informacje na Twoim komputerze. Z drugiej strony mają one unikatową możliwość – mogą modyfikować odwiedzane przez Ciebie strony, podłączając do nich dodatkowe skrypty.

Dziś postaram się opisać jedynie podstawy, nie będzie żadnego programowania. Powstałe rozszerzenie będzie jednak całkiem użyteczne.

Manifest

Najważniejszym plikiem jest manifest.json.

Przynajmniej dla mnie jest to też najtrudniejszy element – za sprawą braku jakiejkolwiek diagnostyki. Najmniejszy błąd i manifest zostanie zignorowany przez przeglądarkę.

Można uruchomić Chrome z linii poleceń, wtedy pośród licznych komunikatów, będzie można przeczytać informację o przyczynie odrzucenia naszego rozszerzenia. Nie lubię tego rozwiązania, ponieważ wymaga ono restartu przeglądarki. Alternatywą jest sprawdzenie poprawności pliku próbując odczytać go za pomocą własnoręcznie napisanego programu, który będzie zawierał np takie polecenie: 

eval("x="+zawartosc_manifest_json);

W ten sposób można przynajmniej wyeliminować błędy składniowe.

Oto przykładowy manifest:

manifest.json 

{
 "name":   "BW Scroll",
 "description":  "Black & White Scrollbar",
 "version":  "1.0.0",

 "content_scripts": [{
  "matches": ["http://*/*", "https://*/*"],
  "css":  ["bwscroll.css"]
 }]
}

Nazwa i opis rozszerzenia wraz z numerem wersji, są obowiązkowymi polami. Jednak to pole content_scripts ma kluczowe znaczenie, niesie informację o plikach, ze skryptami, oraz stronach których będą one dotyczyły. To rozszerzenie będzie niezwykle lekkie, nie będzie posiadało własnego procesu, jedynie pojedynczy arkusz stylów CSS dołączany do wszystkich stron. Może np posłużyć do modyfikacji zadanych stron, zmieniając kolor tła, lub podmieniając zestaw używanych fontów.

Skrypt

Na początek proponuję prostą re-stylizację pasków przewijania. Efekt nie będzie powalający, ale od czegoś trzeba zacząć…

bwscroll.css 

::-webkit-scrollbar {
 background: white;
}
::-webkit-scrollbar-thumb {
 background: black;
}

Myślę że zawartość obu plików jest zrozumiała dla każdego, kto zna przynajmniej podstawy technik niezbędnych do tworzenia współczesnych stron. Selektory co prawda są specyficzne dla silnika WebKit i raczej nie polecał bym używania ich przy projekcie strony, ale niekiedy warto wiedzieć że istnieje coś takiego.

Pierwsze uruchomienie

Pora przetestować rozszerzenie. W tym celu utwórz nowy katalog, najlepiej nazwany tak samo jak rozszerzenie i zapisz w nim oba pliki. Następnie, w przeglądarce wybierz menu (klucz) -> Rozszerzenia, włącz Tryb programisty i po naciśnięciu przycisku Wczytaj rozszerzenie bez pakietu wskaż ten katalog.

Na liście powinno pojawić się nowe rozszerzenie. Teraz wystarczy przeładować dowolną stronę by zobaczyć rezultat (uwaga: jeśli zainstalowałeś temat Clearlook, to musisz go wyłączyć).

Jeśli po prawej stronie, zamiast znajomego paska przewijania, widzisz brzydki czarny prostokąt, to gratuluję. Właśnie utworzyłeś pierwsze działające rozszerzenie.

Ciąg dalszy

Mając działający prototyp, proponuję zacząć własne eksperymenty. Ponieważ nowy wygląd paska, nie jest atrakcyjny, można na przykład dodać odpowiednie zaokrąglenia i gradienty, kolory nadal będą pozostawiały wiele do życzenia, ale…

bwscroll.css poprawiony 

::-webkit-scrollbar {
 background: white;
}
::-webkit-scrollbar-thumb {
 background: black;
 -webkit-border-radius: 6px;
}

::-webkit-scrollbar:vertical {
 background-image: -webkit-gradient(
  linear, 
  0% 0%,  100% 0%, 
  from(#ddd), to(#fff)
 );
}
::-webkit-scrollbar-thumb:vertical {
 border: 2px outset #ccc;
 background-image: -webkit-gradient(
  linear, 
  0% 0%,  100% 0%, 
  from(#def), to(#234)
 );
}

Resztę pozostawiam Twojej wyobraźni.

Szczęśliwego nowego roku!

Odnośniki

Etykiety: , , , ,

Komentarze (2)

Red 07:00

Wesołych Świąt

czwartek, 24 grudnia 2009

Wesołych Świąt i szczęśliwego nowego roku wszystkim!

Komentarze (0)

Red 09:49

Auto Zoom

sobota, 12 grudnia 2009

Dążenie do doskonałości

Ostatnio pisałem o rozszerzeniach (Chrome Rozszerzenia). Instalacja tych kilku drobiazgów, pozwoliła wyeliminować prawie wszystkie, przypadłości przeglądarki…

Poza jedną

Wyświetlany tekst był zbyt mały, a konieczność ciągłego powiększania odwiedzanych stron irytująca.

Odpowiednie rozwiązanie miałem już wcześniej w postaci prymitywnego skryptu Greasemonkey. Pozostało tylko dokonać kilka drobnych przeróbek, takich jak możliwość zmiany stopnia powiększenia i zapamiętywanie ustawień.

W efekcie powstało moje pierwsze rozszerzenie Google Chrome.

Oto rezultat


Auto Zoom

Krótki opis

Na dziś Auto Zoom można obsługiwać tylko za pomocą myszki, sprawia też pewne problemy na stronach takich jak Google Reader.

Zachęcam do testowania

… i zapraszam wkrótce, postaram się napisać krótki tutorial na temat pisania rozszerzeń.

Etykiety: , , ,

Komentarze (7)

Red 01:00

Chrome - Rozszerzenia

wtorek, 8 grudnia 2009

Pisanie rozszerzeń

Firefox

Dotychczas rozszerzenia były głównym powodem do dumy programu Mozilla Firefox.

Niestety API, nie należy do przyjaznych. Nawet najmniejsze rozszerzenie wymaga od twórcy dobrej znajomości XUL i XPCOM. Jest to bardzo rozległa wiedza i niestety przydatna wyłącznie przy pracy z kodem fundacji Mozilla.

Greasemonkey

Pewnym rozwiązaniem tego problemu, jest znakomite rozszerzenie dla Firefox: Greasemonkey.

… tak znakomite, że pojawiły się jego odpowiedniki na inne przeglądarki (Safari, IE) a w niektórych jego API zostało zaimplementowane natywnie (Opera i Chrome).

Fenomen GM polega na tym, że z prostego narzędzia do łatania stron, wyrósł bardzo solidny mechanizm rozszerzeń, z setkami skryptów publikowanych w Sieci. Obecnie GM stanowi de facto standard… a twórcy przeglądarki Firefox pracują nad własnym rozwiązaniem wzorowanym właśnie na tym rozszerzeniu (Jetpack).

Chrome

Rozszerzenia Google Chrome, są rozwinięciem koncepcji wywodzącej się z GM.

Pierwsza miła wiadomość: Do pisania wystarcza wiedza o tworzeniu stron. Dokumentacja opisująca interfejs przeglądarki, mieści się wraz z przykładami na kilku stronach.

Najciekawsza jest architektura rozszerzeń: Każde działa w systemie jako odrębny program i ma własne ukryte okno. Interakcję ze stronami WWW zapewnia mechanizm osadzania kodu JavaScript i CSS, wzorowany na wspomnianym GM. Komunikacja, pomiędzy skryptami działającymi w obrębie strony a głównym kodem rozszerzenia, odbywa się poprzez mechanizmy IPC (zdarzenia).

Opisane rozwiązanie, w połączeniu z organizacją przeglądarki, gdzie każda zakładka także jest odrębnym procesem, ma kluczowe znaczenie dla bezpieczeństwa. Struktura jest czysta, klarowna i nie pozostawia żadnych szarych stref, gdzie można obawiać się eskalacji przywilejów.

Użyteczne rozszerzenia

Ten tekst nie był by kompletny bez listy przetestowanych i używanych przeze mnie rozszerzeń:

AntiADS
Eliminacja reklam. Zdecydowanie najważniejsze rozszerzenie, dla każdego kto ceni sobie spokój i nie lubi być atakowany wyskakującymi, błyskającymi, natrętnymi reklamami produktów, które go w ogóle nie interesują i nie mają żadnego związku z czytanym tekstem.
Subscribe in Feed Reader
Ikonka kanałów RSS działająca podobnie jak w przeglądarce Firefox. Jedno z pierwszych rozszerzeń jakie powstało i przynajmniej dla mnie jedno z najbardziej użytecznych.
Docs PDF/PowerPoint Viewer
Umożliwia przeglądanie dokumentów PDF bez instalacji dodatkowego oprogramowania. Koniec z czytaniem o kolejnych dziurach w tych programach.
Chrome Touch
Przewijanie stron, w stylu podobnym do przeglądarek PDF i telefonów komórkowych. Ideał, gdy używa się ekranu dotykowego, ale i z myszką jest wygodniejszy niż rolka, czy pasek przewijania.
Google Mail Checker
Sprawdzanie poczty na Gmail. Rozszerzenie łatwo dostosować do obsługi kont GoogleApps. Jeśli znajdę chwilę, to zamieszczę zmodyfikowaną wersję jako przykład budowy rozszerzeń.
Google Wave Checker
Analogicznie jak Gmail, tyle że sprawdza Wave.
Obecnie powstaje coraz więcej rozszerzeń integrujących Gmail, Wave, Kalendarz itp, dla tego warto zainteresować się również innymi powiadamiaczami
Google Tasks
Wyświetla listę TODO z Gmail.
GetYouTube
Pobieranie filmu z Youtube jako mp4. To rozszerzenie jest bezpośrednią przeróbką znanego skryptu Greasemonkey

O Google Chrome pisałem już wielokrotnie…

Na początku dość chłodno, później coraz cieplej.

Jednak zawsze zaznaczałem że ma olbrzymi potencjał, głównie za sprawą znakomicie przemyślanej architektury. Od początku zwracałem uwagę na wkład specjalistów od systemów operacyjnych w rozwój tego programu. To jest coś obok czego nie można przejść obojętnie.

Wreszcie, gdy spróbowałem używać tej przeglądarki nieco dłużej, polubiłem ją pomimo dotkliwych braków (ostre krawędzie).

Największymi zaletami Chrome, jest wyraźnie lepsza architektura i znacznie większa wydajność w porównaniu z konkurentami – szczególnie w systemie Linux.

Prawdziwy przełom nastąpił, gdy zainteresowałem się rozszerzeniami…

W efekcie, żegnam się z Mozilla Firefox i przesiadam się na Google Chrome.

Odnośniki

Dokumentacja dla twórców rozszerzeń
code.google.com
Oficjalne repozytorium rozszerzeń
chrome.google.com/extensions
Nie oficjalna strona z rozszerzeniami
chromeextensions.org
Pierwsze dwa rozszerzenia (obsługa RSS i Gmail)
code.google.com/chrome/extensions/samples.html
Dostęp do wersji beta i developerskich Chrome
www.chromium.org

Etykiety: , , ,

Komentarze (0)

Red 22:57

Archiwum

…

Subskrybuj

RSS / Atom