Tvorba Google Chrome skinů pro zelenáče

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č.

Klepněte pro větší obrázek  Klepněte pro větší obrázek  Klepněte pro větší obrázek
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.

Klepněte pro větší obrázek
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.

Klepněte pro větší obrázek
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.

Témata článku: Google, Prohlížeče, Programování, Google Images, Google Toolbar, Images, Skin, Běžná aktualizace, Oficiální název, Nová cesta, Stejný vzor, Veřejná galerie, Jednoduchá cesta, Oficiální cesta, Základní identifikace

12 komentářů

Nejnovější komentáře

  • keepsea 16. 12. 2009 17:40:28
    Pěknej návod. Ale jak jste udělali ty poloprůhledný záložky na tom...
  • Drahoslav Bednář 22. 11. 2009 17:10:48
    pro win vista/seven je...
  • Vodifone95 1. 9. 2009 16:18:52
    Graficky jsem to dokázal udělat, ale nejde mi to zabalíkovat. 3-[ Mám...
Určitě si přečtěte

Jak se dostat do Windows, když neznáte heslo nebo nejste administrátor

Jak se dostat do Windows, když neznáte heslo nebo nejste administrátor

** S instalačním diskem Windows a znalostí pár příkazů odemknete téměř každý počítač s Windows. ** Poradíme i jak se tomu bránit

24.  7.  2017 | Tomáš Holčík | 35

Nový solární článek dokáže zachytit téměř veškerou energii světelného spektra ze Slunce

Nový solární článek dokáže zachytit téměř veškerou energii světelného spektra ze Slunce

** Vědci vytvořili nový typ solárního článku, který se pyšní neuvěřitelnou efektivitou ** Speciální trojrozměrná struktura dokáže zachytit téměř všechny vlnové délky světla ze Slunce ** Systém solárního článku využívá koncentrátorových čoček pro světlo

22.  7.  2017 | Karel Javůrek | 19

Další důkaz o existenci Planety 9

Další důkaz o existenci Planety 9

21.  7.  2017 | Jiří Černý | 5

10 robotických startupů, které brzy připraví spoustu lidí o práci

10 robotických startupů, které brzy připraví spoustu lidí o práci

** Roboty se v mnoha oblastech používají už dlouho, ale nyní přichází nová éra ** Roboty jsou chytřejší a poradí si s komplexními úkoly ** Náhrada lidí přijde rychleji a ve velkém

20.  7.  2017 | Karel Javůrek | 28


Aktuální číslo časopisu Computer

Test 11 telefonů do 6 000 Kč

Postavte si a přetaktujte počítač

Srovnali jsme 7 sportovních kamer

Která zaměstnání nahradí roboti?