LanguageSouvisející přípony:
Vytváření vlastních motivů pro Chrome
Google Chrome motivy jsou oblíbené doplňky pro uživatele a najdete jich tisíce po celém internetu, přičemž největším zdrojem je Chrome Web Store.
Ale mnoho zvědavých uživatelů by si rádo vytvořilo vlastní osobní motivy nebo je dokonce sdílelo s přáteli a širším světem.
Tento malý tutoriál vám ukáže vnitřní strukturu Google motivů a jak si můžete vytvořit vlastní z jakýchkoli obrázků.
Struktura motivů Chrome
Motiv Chrome není nic jiného než doplněk, který neobsahuje žádný rozsáhlý zdrojový kód nebo skripty a v podstatě se skládá ze dvou částí:
- obrázky použité pro samotný motiv
- jednotlivý soubor manifest.json, který obsahuje parametry a nastavení pro vytvoření motivu
Tyto dvě části jsou pak zabaleny do jednoho souboru s příponou CRX.
Jak ručně připravit Google motiv
Určitě budete potřebovat vhodný tapetu, kterou chcete použít pro svůj motiv, a také základní představu o celkovém motivu. Budete však také potřebovat několik softwarových nástrojů, aby se to podařilo:
- Editor obrázků. Použijte jakýkoli program, který se vám líbí, je k dispozici spousta softwarových nástrojů. Stačí i základní Microsoft Paint, ale samozřejmě můžete použít profesionální nástroje, jako Adobe Photoshop nebo CorelDraw.
- Textový editor. Základní Notepad postačí, stejně jako jakýkoli jiný podobný program.
Jakmile máte vše připraveno, stačí postupovat podle níže uvedených kroků a vytvořit si vlastní Google Chrome motiv.
Krok 1: Vytvořte adresář s názvem motivu
Jednou z prvních věcí, kterou uděláte, je vytvoření nového adresáře pro váš motiv a pojmenujte ho podle svého motivu. Řekněme „my_new_theme“. Uvnitř této složky vytvořte další složku s názvem „images“, která bude obsahovat všechny obrázky použité vaším novým motivem.
Krok 2: Vytvořte obrázky pro svůj motiv
Pro vytvoření funkčního motivu budete potřebovat čtyři základní obrazové prvky, nebo pět, pokud chcete přidat své vlastní osobní logo do motivu, ale to je čistě volitelné. Všechny obrázky používané v Google Chrome motivech musí být ve formátu PNG.
Pokud máte své obrázky v jiném formátu, budete je muset nejprve převést do PNG pomocí jakéhokoli softwaru nebo online konvertorů.
Zde je seznam každého obrazového prvku s příslušnými požadavky:
Rámeček motivu (frame.png)
Tento obrázek se používá jako rámeček vašeho nového Google Chrome motivu a jako pozadí tlačítek „Zavřít“, „Minimalizovat“ a „Maximalizovat“. Pokud tento obrázek nepoužijete, váš vytvořený Chrome motiv bude fungovat jako výchozí motiv Chrome a zobrazí nativní titulkový pruh OS.
Rámeček motivu musí mít minimální výšku 30px bez omezení šířky. Tento prvek je obvykle vytvořen s nejtmavšími barvami.
Panel nástrojů motivu (toolbar.png)
Tento prvek motivu se zobrazuje jako pozadí tlačítek „Vpřed“, „Zpět“ a „Obnovit“ a také jako panel nástrojů rozšíření. Reprezentuje jak aktuální kartu, tak panel nástrojů.
Potřebuje minimální výšku 120px bez omezení šířky.
Pozadí karty motivu (tab.png)
Používá se pro neaktivní karty, pokud je otevřeno více karet současně. Má minimální požadovanou výšku 65px a bez omezení šířky.
Pozadí nové karty (background.png)
Toto představuje hlavní obrázek, který se zobrazí při otevření nové karty. Doporučená minimální velikost obrázku je 800x600, ale pro nejlepší vzhled použijte tapety odpovídající rozlišení obrazovky, na které bude motiv používán. Tento obrázek by měl používat nejsvětlejší barvy pro nejlepší vizuální prezentaci.
Uznání motivu (theme_ntp_attribution.png)
Logo tvůrce, které se zobrazuje v pravém dolním rohu Google Chrome motivu. Je čistě volitelné.
Poté, co máte všechny obrazové prvky připravené, jednoduše je přesuňte do složky „images“, kterou jste vytvořili v kroku 1, takže složka by měla obsahovat 4-5 obrázků.
Krok 3: Vytvořte manifest soubor
Každý Google Chrome doplněk, který lze nainstalovat jako webovou aplikaci nebo motiv, má svůj vlastní soubor „manifest.json“. Tento soubor poskytuje prohlížeči informace o motivu.
Více informací o formátu souboru JSON najdete v naší databázi.
Manifest obsahuje kód pro 4 různé věci: název, obrázky, barvy, odstíny a vlastnosti. Příklad kódu v souboru manifest.json je uveden níže.
|
{ "version": "1.0", "name": "my_new_theme", "theme": { "images" : { "theme_frame" : "images/frame.png", "theme_toolbar" : "images/toolbar.png", "theme_ntp_background" : "images/background.png", "theme_tab_background" : "images/tab.png", "theme_ntp_attribution" : "images/theme_ntp_attribution.png" }, "colors" : { "ntp_link": [255,255,255], "ntp_text": [255,255,255], "ntp_section_link": [255,255,255], "ntp_section_text": [10 , 17 , 27], "ntp_background": [10 , 17 , 27], "frame": [10 , 17 , 27], "toolbar": [10 , 17 , 27], "tab_text": [255,255,255], "tab_background_text": [10 , 17 , 27], "bookmark_text": [255,255,255] }, "tints" : { "buttons" : [0.33, 0.5, 0.47], "frame_inactive": [0.50, 0.50, 0.50], "frame_incognito_inactive": [0.50, 0.50, 0.50] }, "properties" : { "ntp_background_alignment" : "bottom", "ntp_background_repeat": "no-repeat" } } } |
Stačí otevřít nový soubor v notepadu, zkopírovat a vložit kód a uložit pod názvem manifest. Poté přejmenujte příponu souboru z txt na json.
Nyní, když jste vytvořili svůj vlastní soubor manifest.json, podívejme se, co jednotlivé sekce znamenají, co dělají a co můžete upravit.
Název
Toto je název vašeho nového Google Chrome motivu. Název v souboru manifest.json by měl odpovídat názvu vašeho motivu uvedenému v kroku 1.
Obrázky
Obrázky z kroku 2 našeho návodu jsou definovány v této části souboru manifest.json. Pokud chcete změnit název souboru nebo složku s obrázky, musíte provést odpovídající změnu také v souboru manifest.json.
Barvy
Každý prvek v této sekci definuje barvy použité v motivu. Je zde jen pár věcí, které je třeba si o barvách pamatovat:
- Barva textu tlačítka na panelu stahování je stejná jako barva textu záložek.
- Barva pozadí stavového řádku je stejná jako barva panelu nástrojů, kterou zvolíte.
- Barva textu stavového řádku je stejná jako barva textu karty, kterou zvolíte.
Odstíny
Prvek odstínu určuje barevný odstín pro všechny ikony uvnitř všech tlačítek na panelu nástrojů (vpřed, zpět, obnovit atd.). Každý odstín má desetinnou hodnotu od 0 do 1 nebo -1. Hodnota -1 znamená, že se barva daného prvku nezmění. Hodnoty odstínů jsou uspořádány jako [Odstín, Sytost, Jas] a můžete použít hodnoty například 0.256, 0.2, -0.4 k definování barvy. Hodnoty můžete upravit tak, aby tlačítka splynula nebo vynikla.
Vlastnosti
Sekce vlastností v souboru manifest.json slouží k definování nastavení hlavního pozadí. Pozadí může být zarovnáno nahoře, dole nebo na střed prohlížeče a můžete zvolit, zda se bude opakovat podél osy x nebo y, nebo vůbec.
Krok 4: Balíčkování a náhled motivu
Nyní byste měli mít své obrázky připravené ve složce "my_new_theme/images" a soubor manifest.json ve složce "my_new_theme".
Pro otestování svého nového motivu otevřete internetový prohlížeč Google Chrome a do adresního řádku napište „chrome://extensions“ a stiskněte Enter.
Poté klikněte na „+“ vedle odkazu „Režim vývojáře“ na pravé straně. Nyní by se na stránce mělo objevit několik možností. Klikněte na „Načíst rozbalené rozšíření“ a procházejte svůj počítač až do složky „my_new_theme“. Vyberte ji a stiskněte OK. Pokud je ve složce přítomen správný soubor manifest.json, Chrome načte váš nový motiv. Nyní zkontrolujte svůj prohlížeč, zda je vše v pořádku.
Tento proces můžete opakovat, dokud svůj vlastní Google motiv nevyladíte k dokonalosti. Jakmile budete spokojeni se svým vlastním Google Chrome motivem, stačí stisknout tlačítko „Zabalit rozšíření“ a Chrome vytvoří motiv a uloží ho do složky „my_new_theme“ s příponou souboru CRX. Také bude vytvořen soubor s příponou PEM, což je soukromý klíč pro váš Google motiv, který vám umožní toto rozšíření v budoucnu aktualizovat, pokud svůj motiv nahrajete do Chrome Extensions Gallery.
Pokud vše proběhne v pořádku, Google Chrome vám oznámí, že soubory .crx a .pem byly vytvořeny, a také zobrazí umístění těchto nových souborů. Po vytvoření několika Google Chrome motivů zjistíte, že to opravdu není tak těžké.
Jak snadněji vytvářet Chrome motivy
Samozřejmě můžete věci dělat rychleji, pokud použijete některý z dedikovaných nástrojů pro Chrome motivy. Jedním z takových nástrojů byl nyní ukončený Theme Creator. Stále si ho můžete stáhnout z webového obchodu a používat, ale již není podporován Googlem a mohou se vyskytnout chyby. Přesto je to jeden z nejpohodlnějších způsobů, jak rychle vytvořit nové Chrome motivy.