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) neboC:\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:
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).<link rel="stylesheet" href="style/custom.css" />
- ve stejné složce jako
browser.html
je složkastyle
, do ní uložte styly jakocustom.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:
Stejně jako předtím, soubor můžete pojmenovat jakkoli a může jich být více.<script src="custom.js"></script>
- do složky s
browser.html
uložte kód jakocustom.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á<!--
a končí-->
)- 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 upravitbrowser.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):
-
- přejděte na
vivaldi://inspect#apps
- klikněte na první „inspect“, tedy na to pod „Vivaldi chrome-extension://mpognobbkildjkofajifpdfhcoklimli/browser.html“
- přejděte na
-
- povolte flagy
debug-packed-apps
asilent-debugger-extension-api
-
- přejděte na
vivaldi://flags
- pomocí vyhledávácího pole najděte zmíněné a nastavte je na povolené
- přejděte na
- spusťte Vivaldiho s parametry
--flag-switches-begin --debug-packed-apps --silent-debugger-extension-api --flag-switches-end
(na macOS zadejte do termináluopen /Applications/Vivaldi.app --args --debug-packed-apps --silent-debugger-extension-api
)
-
- klikněte pravým tlačítkem na nějaký prvek prohlížeče (ne webovou stránku) a zvolte „Prozkoumat“
- povolte flagy
-
- otevřete nastavení v listu
- 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
). -