Vývojová verze Dev prohlížeče Chrome 3.0 obsahuje nový skinovací systém. Oficiální dokumentace je zatím poměrně skoupá na slovo, pojďte si tedy vyrobit jednoduchý skin s námi.
Prohlížeč Google Chrome už nějaký pátek podporuje skiny – grafická témata. V nejnovějších testovacích verzích z vývojové větve „Dev“ se dočkaly vylepšeného jádra a CRX instalátoru. Skiny jsou velmi jednoduché, spíše než témata pro Firefox připomínají Mozilla Labs doplněk Personas. V praxi to znamená, že Google nabízí spíše výměnu některých bitmap a docela benevolentní změnu barev, podoba grafického rozhraní nicméně zůstane stejná.
Do budoucna se ovšem přístup může výrazně změnit, témata ve verzi 2.0 totiž dovolovaly kompletní přepis tlačítek a pro testovací Chrome 2.0 tak existovaly i komfortní skiny, které jej graficky rázem proměnily do podoby třeba Firefoxu nebo Safari. Nový systém by měl být podle vývojového týmu Chromium přísnější především z důvodu kompatibility – různá podoba tlačítek dělala neplechu především na různých platformách a v případě, že by se do hlavní lišty Chromu dostalo nějaké nové systémové tlačítko, vznikl by ze skinu škaredý kočkopes.
Zásahem do vnitřností prohlížeče ale jeho podobu změníte i dnes, ti schopnější si pak mohou upravit bitmapy základního skinu již ve zdrojových kódech a sestavit si zcela vlastní prohlížeč. Není to zase tak těžké, kompletní seznam bitmap, ze kterých je složeno GUI Chromu totiž najdete v tomto zdrojovém souboru.
Skin je celkem běžný ZIP balík
Kompletní dokumentace k tvorbě skinů zatím chybí, na vývojovém webu Chromium totiž najdete pouze krátkou ukázku, která vám toho ale moc neřekne. Měnit můžete barvy a bitmapy pro pozadí nejrůznějších prvků, třeba rámu. Seznam rastrů, které lze novým skinovacím systémem vyměnit, najdete v tomto zdrojovém souboru (hledejte řádky začínající znaky „IDR_THEME“).
Ve zdrojovém souboru nicméně najdete pouze jejich identifikaci, jejich názvy. Z nich se ovšem nedozvíte, k čemu vlastně slouží. Nejlepším řešením je tedy stažení některého ze skinů z oficiálního katalogu. Jsou to běžné ZIP archivy, stačí je tedy přejmenovat a rozbalit.
Uvnitř najdete složku s obrázky (klidně si ji přejmenujte) a konfigurační soubor manifest.json ve znakové sadě UTF-8. JSON formát je alternativou pro strukturovaná data XML. V praxi se tedy skládá vždy z dvojice jméno proměnné a její hodnoty. V sekci „images“ nastavíte odpovídající obrázky, „colors“ obsahuje definici barev ve formátu RGB, „tints“ je zabarvení ikon v systémové liště ve formátu HSB a „properties“ slouží k některým dodatečným nastavením, přičemž se používá syntaxe kaskádových stylů.
Živé psychobarvičky 0.1
Pokud jste se do popisu skinů už totálně zamotali, docela vás chápu. Nejlepším učitelem je praxe, pojďme si tedy rozebrat jeden velmi jednoduchý skin, který jsem pojmenoval „Živé psychobarvičky“. Záhy poznáte proč.
Několik variant Psychobarviček
Můj skin změní pozadí rámu, lišty s tlačítky a nastaví nové barvy. Později si jej budete moci stáhnout, teď si ale rozebereme konfigurační soubor manifest.json.
Co se skrývá v manifest.json:
{
"version": "0.1",
"name": "Živé psychobarvičky",
"theme": {
"images" : {
"theme_frame" : "obrazky/ram.png",
"theme_toolbar" : "obrazky/lista.png",
"theme_tab_background":"obrazky/zalozka_neaktivni.png",
"theme_window_control_background":"obrazky/tlacitka.png"
},
"colors" : {
"frame" : [150, 27, 27],
"toolbar" : [74, 74, 74],
"ntp_text" : [100, 100, 100],
"ntp_link" : [100, 100, 100],
"ntp_section" : [0, 0, 0],
"bookmark_text" : [200, 200, 200],
"tab_text" : [200, 200, 200],
"button_background" : [255, 255, 255]
},
"tints" : {
"buttons" : [0, 0, 0]
},
}
}
V hlavičce je definovaná verze skinu a jeho název. Dále už přichází na řadu obrázky, které podporují PNG průhlednost. Použil jsem jich pouze pět. Chrome skin pracuje s implicitním nastavením, pokud tedy něco vynecháte, použije se výchozí vzor. Nemusíte tedy skinovat vše, klidně stačí změnit třeba jen barvu rámu.
K čemu slouží obrázky:
- theme_frame – toto je pozadí rámu okna. V základním Aero skinu je tato oblast průhledná
- theme_toolbar – toto je pozadí ovládací lišty včetně pozadí aktivní záložky
- theme_tab_background – toto je pozadí neaktivní otevřené záložky
- theme_window_control_background – toto je pozadí ovládacích tlačítek okna
Jakmile si nadefinujete bitmapy pozadí, jsou na řadě barvy.
K čemu slouží barvy:
- frame – toto je barva okraje okna (analogie k theme_frame)
- toolbar – toto je barva ovládací lišty (analogie k theme_toolbar)
- ntp_text a ntp_link – toto je barva textu a odkazů v úvodní stránce Chromu
- ntp_section – toto je barva rámečku s miniaturou v úvodní stránce Chromu
- bookmark_text – toto je barva textu v liště s odkazy
- tab_text – toto je barva textu v záložkách/panelech
- button_background – pozadí tlačítek v ovládací liště
A nakonec jsem použil „tints“, tedy barvu tlačítek. Ta se na rozdíl od předchozích nastavuje v HSB formátu.
Výběr základních bitmap a barev a názorné schéma,
jakou oblast vlastně definují
Toto jsou základní bitmapy a barvy, použít ale můžete i další. Pokud byste tedy chtěli nastavit třeba pozadí úvodní stránky, je třeba vytvořit bitmapu theme_ntp_background a nový informační blok properties, který by mohl vypadat třeba takto:
"properties":{
"ntp_background_alignment":"top left",
"ntp_background_repeat":"repeat-x"
}
Pozadí úvodní obrazovky pak bude zarovnáno nahoru vlevo a vytvoří se horizontální tapeta. Tvorba skinů pro Chrome 3.0.x je nyní tak trochu alchymie. Podrobná dokumentace chybí, názvy bitmap, barev a vlastností – properties tak musíte hledat buď ve zdrojových souborech na webu Chromium, nebo v rozbalených skinech – nejlépe těch z oficiálního katalogu, u nichž máte jistotu, že se budou korektně zobrazovat. Tímto způsobem si můžete vytvořit alternativní skin třeba pro anonymní režim aj.
Vytvoření skinu
Skin je sice běžný ZIP balík, musíte ho ale vytvořit pomocí speciálního balíkovacího příkazu, který ho ověří, zabalí a přejmenuje na příponu CRX. Ta je již asociovaná s prohlížečem, po poklepání se tedy spustí Chrome a aktivuje se nové téma.
K tvorbě CRX balíků nepotřebujete další nástroj, vystačíte si s Chromem a příkazovou řádkou. V případě Windows 7 by tedy kompilační příkaz mohl vypadat třeba takto:
C:\Users\<uživatel>\AppData\Local\Google\
Chrome\Application\chrome.exe --pack-extension <cesta ke složce s manifest.json>
Chrome zabalí zdrojové soubory do CRX balíku a podepíše ho veřejným klíčem pro snadnou identifikaci v připravované galerii. Zároveň se vytvoří váš soukromý klíč jednoznačně identifikující tento konkrétní skin, který se uloží do souboru jménoskinu.pem.
Tvorba CRX balíku z příkazové řádky
K čemu slouží soukromý klíč?
Soukromý klíč využijete v tom případě, pokud budete chtít vytvořit pouze novou verzi skinu ale z pochopitelných důvodů se stejným unikátním klíčem. Při aktualizaci je tedy třeba zvolit trošku upravený příkaz:
chrome.exe –-pack-extension=<cesta ke složce s manifest.json> --pack-extension-key=<cesta k soukromému klíči konkrétního skinu>
Klíče slouží k budoucí identifikaci skinu. Dnes ho sice moc nevyužijete, do budoucna byl ale mohl existovat veřejný katalog skinů I s možností automatické aktualizace po vzoru Firefoxu a zde pak bude potřeba jednoznačné identifikace mezi tisíci různými grafickými tématy.
Hurá do toho
Pokud jste v četbě dospěli až sem, gratuluji vám. Za odměnu si můžete stáhnout velmi jednoduchý skin Živé psychobarvičky 0.1 jak ve formátu CRX, tak ZIP, na kterém si můžete nacvičit tvorbu témat pro Chrome.
