Vlastní úpravy Vivaldiho

Přeloženo (alespoň většinově) z Modding Vivaldi

Víme, že máte rádi přizpůsobování, dokonce více než jen rozšíření a motivy vzhledu (tj. barevná schémata). Mnoho z vás začalo upravovat některé soubory, ať už kvůli zbavování se chyb, nebo přidávání nových funkcí.

Pokud však budete měnit kód, může dojít k různým problémům až pádu, nebo se Vivaldi vůbec nespustí. Může to také ohrozit vaše bezpečí či soukromí, zvlášť když nevíte, co děláte. Toto vlákno by vám mělo poskytnout vhodné pokyny, abyste zůstali v bezpečí a úpravy si užívali.

Jak zařídím, aby…?

Než budete pokračovat, nezapomeňte, že potřebujete umět CSS nebo JavaScript (záleží na tom, co chcete udělat). Pokud nemáte žádné zkušenosti, raději nic nezkoušejte (na internetu se dá najít mnoho materiálů, které vám pomohou se je naučit, nicméně většina je pochopitelně anglicky).

Jsou dva typy úprav:

styl – pouze za pomoci CSS
funkce – s pomocí JavaScriptu (a často doplněny CSS)

Tak jako tak, upravovat byste měli pouze jeden původní soubor Vivaldiho:

Windows: {INSTALAČNÍ_SLOŽKA_VIVALDIHO}\Application\{VERZE}\resources\vivaldi\browser.html (pravděpodobně C:\Program Files\Vivaldi (nebo x86 verze) nebo C:\Users\{VAŠE_JMÉNO}\AppData\Local\Vivaldi)
Linux: {INSTALAČNÍ_SLOŽKA_VIVALDIHO}/resources/vivaldi/browser.html (pravděpodobně /opt/vivaldi)
macOS netuším, zkuste to nějak odvodit. Pak můžete do vlákna napsat, kde se daný soubor nachází, a já tuto informaci přidám

Nezapomeňte jej pro jistotu zálohovat. Tak, a můžeme na to

Přidávání stylů

Vivaldi 2.6 a novější

přejděte na vivaldi://experiments
povolte „Allow for CSS modifications“
přejděte do nastavení vzhledu (vivaldi://settings/appearance)
v části Vlastní CSS motivy vyberte složku, kterou chcete použít (doporučuji vytvořit pro tento účel novou)
do vybrané složky uložte CSS soubory (soubory v podsložkách jsou ignorovány)
restartujte Vivaldiho (budou použity všechny soubory s příponou .css v dané složce)

Vivaldi 2.5 a dřívější

otevřete dříve zmíněný browser.html a před </head> vložte tento řádek:
<link rel="stylesheet" href="style/custom.css" />
Soubor si samozřejmě můžete pojmenovat jakkoli a můžete jich použít více (pro každý vložte další řádek se správným názvem).
ve stejné složce jako browser.html je složka style, do ní uložte styly jako custom.css

To by bylo. Teď už můžete upravovat vzhled jak chcete (v rámci možností CSS).

Přidávání nových funkcí

otevřete browser.html a před </body> vložte tento řádek:
```
<script src="custom.js"></script>
```
Stejně jako předtím, soubor můžete pojmenovat jakkoli a může jich být více.
do složky s browser.html uložte kód jako custom.js (nebo jak jste se rozhodli soubor pojmenovat)

Hotovo.

Myslím, že něco nefunguje

Než nahlásíte chybu, ujistěte se, že není způsobena úpravami, ať nemusí chudáci vývojáři hledat, co (ne)udělali špatně:

browser.html nahraďte původní verzí, nebo části, které jste vložili, zakomentujte (komentář začíná )
pokud jste použili „oficiální“ verzi pro uplatnění vlastního CSS, můžete například v nastavení vzhledu vyprázdnit pole pro výběr složky

Mé úpravy zmizí po každé aktualizaci

Tohle by pro „oficiální“ cestu upravování CSS nemělo platit.
CSS úpravy ve dřívějších verzích a (zatím) veškeré JS úpravy budou vymazány, budete je tedy muset znovu zkopírovat do dané složky a upravit browser.html (v Linuxu by měla stačit úprava HTML souboru, ale napoprvé (a při změně metody instalace) se raději přesvědčete).
Samozřejmě už někdo vytvořil skripty / programy, které to dělají za vás a stačí je jen spustit, např. tento (Windows) nebo tento (Linux)

To by mělo být vše, přeji příjemnou zábavu!

Nuže, pokračování. (anglicky zde)

Jak zjistit, jak vypadá Vivaldi zevnitř

…tedy jaká je struktura jeho HTML. Použijeme zabudované vývojářské nástroje. Možnosti, jak je zobrazit, máme tři (nečíslovaný seznam je rozcestník, číslovaný je postup):

1. přejděte na vivaldi://inspect#apps
2. klikněte na první „inspect“, tedy na to pod „Vivaldi chrome-extension://mpognobbkildjkofajifpdfhcoklimli/browser.html“
1. povolte flagy debug-packed-apps a silent-debugger-extension-api
  - 1. přejděte na vivaldi://flags
    2. pomocí vyhledávácího pole najděte zmíněné a nastavte je na povolené
  - spusťte Vivaldiho s parametry --flag-switches-begin --debug-packed-apps --silent-debugger-extension-api --flag-switches-end (na macOS zadejte do terminálu open /Applications/Vivaldi.app --args --debug-packed-apps --silent-debugger-extension-api)
2. klikněte pravým tlačítkem na nějaký prvek prohlížeče (ne webovou stránku) a zvolte „Prozkoumat“
1. otevřete nastavení v listu
2. stiskněte F12

CSS úpravy můžete zkoušet kliknutím na + vpravo nahoře v seznamu stylů v kartě Elements, všechny své změny pak získáte kliknutím pravým tlačítkem na inspector-stylesheet u některého z vašich stylů a vybráním „Reveal in Sources panel“.
JS si teoreticky můžete vyzkoušet z karty Console, ale je to dost nepohodlné (mj. tam dostanete víceřádkový kód pouze vložením nebo s pomocí Shift-Enter).