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: , , , ,

Red 07:00

Komentarze

Prześlij komentarz

Odnośniki

Utwórz link

Archiwum

Subskrybuj

RSS / Atom