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:
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
- Getting Started. Bezcenna dokumentacja rozszerzeń.
- AutoZoom. Moje pierwsze rozszerzenie.
- Clearlook Scrollbar. Rozszerzenie będące rozbudowaną wersją opisanego tu kodu.
- Styling Scrollbars. Opis CSS używanego przy stylizacji pasków przewijania.
- Lista najciekawszych rozszerzeń
Etykiety: chrome, css, extensions, javascript, rozszerzenia
Red 07:00
Komentarze
JCF::-webkit-scrollbar {
width: 14px;
height: 14px;
}
::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
::-webkit-scrollbar-thumb {
background: #a0a0a0;
border: 0px ridge #8a0101;
border-radius: 92px;
}
::-webkit-scrollbar-thumb:hover {
background: #c4c4c4;
}
::-webkit-scrollbar-thumb:active {
background: #c9c9c9;
}
::-webkit-scrollbar-track {
background: #2c2c2c;
border: 0px outset #cacaca;
border-radius: 100px;
}
::-webkit-scrollbar-track:hover {
background: #2c2c2c;
}
::-webkit-scrollbar-track:active {
background: #2c2c2c;
}
::-webkit-scrollbar-corner {
background: transparent;
Had to make a copy of the extension and change the manifest.json as well as removing the _metadata directory:
{
"content_scripts": [ {
"css": [ "scrollbar.css" ],
"matches": [ "*://*/*" ]
} ],
"description": "Allows custom webkit css for Chrome scrollbar",
"name": "Scrollbar css tweak",
"version": "0.2.0.1",
"manifest_version": 2
}
Notice that there was a problem with your "matches" key as it only matches http:// pages and not https://. This one fixes it. Thanks!