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.

Diskuze (12) Další článek: Velký test čtyřiceti USB klíčenek

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


Určitě si přečtěte

Rekordy počasí: V Česku to ještě jde, skutečné extrémy zažívají jinde

Rekordy počasí: V Česku to ještě jde, skutečné extrémy zažívají jinde

** Teplotní extrémy dokážou překvapit. Seznamte se s rekordy v Česku i ve světě ** Rekordní hodnoty jsou mnohdy až k neuvěření ** Zjistěte, kdy ke bylo největší horko, zima, déšť či vítr

Karel Kilián | 7

15 věcí, které umí Windows 10, ale možná o nich vůbec nevíte

15 věcí, které umí Windows 10, ale možná o nich vůbec nevíte

** Systém Windows 10 umí spoustu užitečných drobností ** O mnoha praktických funkcích pravděpodobně ani nevíte ** Poznejte užitečné tipy, které se vám mohou hodit každý den

Vladislav Kluska | 36

Nová zbraň Microsoftu proti iPadu: Levný tablet Surface Go bude stát jen deset tisíc

Nová zbraň Microsoftu proti iPadu: Levný tablet Surface Go bude stát jen deset tisíc

** Microsoft představil nový tablet Surface Go ** Nový model zaujme nízkou cenou, ale schopnostmi zařízení Surface ** Microsoft nepoužil čip ARM, ale klasický procesor od Intelu 

Karel Javůrek | 116

Apple: naše mapy budou nejlepší na světě. Tajně jsme na nich pracovali několik let

Apple: naše mapy budou nejlepší na světě. Tajně jsme na nich pracovali několik let

** Apple odhalil své plány na zcela nové mapy ** Několik let pracuje na nových mapách, které by měly předběhnout konkurenci ** Objeví se s příchodem iOS 12 pro vybrané státy

Karel Javůrek | 50

Apple dal do MacBooku procesor Core i9 a 4TB SSD. Ani se neptejte, co za to chce...

Apple dal do MacBooku procesor Core i9 a 4TB SSD. Ani se neptejte, co za to chce...

** Apple aktualizoval notebooky MacBook Pro, dostaly nový hardware ** Těšit se můžete na nové procesory a větší paměť ** Cena nejvybavenějšího modelu překročí 200 tisíc korun

Martin Miksa | 99

Takhle zemřete, když asteroid dopadne na vaše město

Takhle zemřete, když asteroid dopadne na vaše město

** Jak by to dopadlo, kdyby na světovou metropoli či do nedalekého moře dopadl velký asteroid? ** Simulovali to odborníci z University of Southampton ** Výsledky jsou velmi zajímavé

Petr Kubala | 32

Šmírovačka kamerami Googlu: Koukněte se, co nového zachytily na Street View

Šmírovačka kamerami Googlu: Koukněte se, co nového zachytily na Street View

Google stále fotí celý svět do své služby Street View. A novodobou zábavou je hledat v mapách Googlu vtipné záběry. Podívejte se na výběr nejlepších!

redakce | 44


Aktuální číslo časopisu Computer

Velký test 18 bezdrátových sluchátek

Vše o přechodu na DVB-T2

Procesory AMD opět porážejí Intel

7 NVMe M.2 SSD v přímém souboji