В ходе моего переезда с российского софта очередь дошла и до Яндекс Браузера, коим я пользовался с момента бета тестирования и очень привык. Основным кандидатом на замену стал Vivaldi как наиболее кастомизируемый. Однако, как оказалось его кастомизации недостаточно для удовлетворения моих привычек, а именно: возможности проскроллить вверх нажав на активную вкладку и… видео-обоев. Да, я очень к ним привык. Если с обоями еще как-то можно было бы решить найти или написав свой экран новой вкладки, то менеджмент вкладок это уже вне уровня доступа расширений. Было принято решение изучить «а как оно там устроено внутри», что оказалось достаточно интересным исследованием. Забегая вперед, результата я добился, пусть и с «но». А если интересно и вам — добро пожаловать.
Я web-старница, ты web-страница, всё web-страница
Первое и внушающее оптимизм «открытие» в Vivaldi весь интерфейс это web-страница. Получить доступ к знакомым нам хромиумным DevTools можно перейдя в vivaldi://inspect/#apps Там мы видим main.html и window.html. Первое это «ядро» браузера, второе это наши окна (не путать со вкладками).
Поскольку мы хотим модифицировать логику вкладок, наибольший интерес для нас представляет window.html. Путем нехитрого поиска обнаруживаем его в AppData\Local\Vivaldi\Application\7.9.3970.50\resources\vivaldi\window.html. Видите версию в пути? Это то самое «но». Патчить window.html придется после каждого обновления. Открываем.
<!-- Vivaldi window document --><!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>Vivaldi</title> <link rel="stylesheet" href="style/common.css" /> <link rel="stylesheet" href="chrome://vivaldi-data/css-mods/css" /></head><body></body></html>
Весьма минималистично. css-mods/css у вас может и не быть, о них поговорим позже, что стоит знать — это стандартный, пусть и экспериментальный функционал. Этот файл vivaldi будет использовать как шаблон для любых новых окон поставив нужный ему контент в body. Модифицировать body мы кстати тоже можем, браузер любезно сохраняет наше творчество и дописывает свою разметку в конец body. Но для наших целей достаточно head. Добавляем туда небольшой скрипт, предварительно создав папку usermod_inject и сам файл scroll-to-top-tab.js.
<script defer src='./usermod_inject/scroll-to-top-tab.js'></script>
Опытным путем было выяснено что обязательным пунктом является использования defer, иначе при создании второго она оно зависнет на инициализации. Было очень неприятно узнать на третий день использования, хорошо что не поспешил с публикацией заметки. В целом скажу очевидную вещь:
Все изменения внутрянки могут перестать работать или в определенных кейсах работать неверно. И уж тем более не стоит без изучения добавлять чужие скрипты из интернета.
А, что до самого скрипта то вот. Прошу сильно тапками не кидаться, некоторые костыли просто от незнания, некоторые потому что по другому не работало. Кстати, не пытайтесь вставлять js код в body, система защиты браузера его не исполнит.
Скрытый текст
(function () { function getActiveWebview() { return [...document.querySelectorAll("webview")] .find(v => { const style = window.getComputedStyle(v); return style.display !== "none" && style.visibility !== "hidden"; }); } function scrollToTop() { const webview = getActiveWebview(); if (!webview) return; webview.executeScript({ code: `window.scrollTo({ top: 0, behavior: 'smooth' });` }); } function setup() { const tabStrip = document.querySelector("#tabs-container"); if (!tabStrip) return; let startX = 0; let startY = 0; tabStrip.addEventListener("mousedown", (e) => { // только ЛКМ if (e.button !== 0) return; const tab = e.target.closest(".tab"); if (!tab) return; // игнор крестика if (e.target.closest(".close")) return; startX = e.clientX; startY = e.clientY; const wasActive = tab.classList.contains("active"); function onMouseUp(ev) { // тоже проверяем кнопку if (ev.button !== 0) return; const dx = Math.abs(ev.clientX - startX); const dy = Math.abs(ev.clientY - startY); // drag → игнор if (dx > 5 || dy > 5) return; // вкладка закрыта → игнор if (!document.body.contains(tab)) return; if (wasActive) { setTimeout(scrollToTop, 50); } } document.addEventListener("mouseup", onMouseUp, { once: true }); }); } setTimeout(setup, 1000);})();
Проверяем, работает…
…до очередного обновления.
Дабы упростить «патчинг» попросим нейросеть написать нам bat файл. А затем еще раз потому что первые пять сломает вам весь браузер. Да, слабоумие а отвага, вот так запускать. Ниже ничего особо интересного, просто ищем версию браузера, по нужному пути переходим и добавляем строчку в html, попутно копируя нужный js.
Скрытый текст
@echo offsetlocal enabledelayedexpansionREM === Path to Vivaldi Application ===set "VIVALDI_PATH=%LOCALAPPDATA%\Vivaldi\Application"REM === Custom variables ===set "INJECT_DIR=usermod_inject"set "SCRIPT_NAME=scroll-to-top-tab.js"REM === Find version ===set "LATEST="for /f "delims=" %%d in ('dir "%VIVALDI_PATH%" /b /ad-h /o-n') do ( if not defined LATEST ( set "LATEST=%%d" ))if not defined LATEST ( echo Vivaldi version not found pause exit /b)echo Found version: %LATEST%set "TARGET_DIR=%VIVALDI_PATH%\%LATEST%\resources\vivaldi"set "HTML_FILE=%TARGET_DIR%\window.html"set "INJECT_PATH=%TARGET_DIR%\%INJECT_DIR%"set "JS_FILE=%INJECT_PATH%\%SCRIPT_NAME%"REM === Check window.html ===if not exist "%HTML_FILE%" ( echo window.html not found pause exit /b)REM === Create inject directory if not exists ===if not exist "%INJECT_PATH%" ( mkdir "%INJECT_PATH%")REM === Copy JS ===if exist "%SCRIPT_NAME%" ( copy /Y "%SCRIPT_NAME%" "%JS_FILE%" >nul echo JS copied to %INJECT_PATH%) else ( echo %SCRIPT_NAME% not found рядом с bat)REM === Check is inserted js ===powershell -NoProfile -Command "if ((Get-Content '%HTML_FILE%' -Raw) -match '%SCRIPT_NAME%') { exit 1 }"if %errorlevel%==1 ( echo Script already inserted exit /b)REM === Insert js ===powershell -NoProfile -Command "$c=Get-Content '%HTML_FILE%' -Raw; $t=' <script defer src=''./%INJECT_DIR%/%SCRIPT_NAME%''></script>'; $c -replace '</head>', ($t + [Environment]::NewLine + '</head>') | Set-Content '%HTML_FILE%'":endecho Donepause
Ну вот точно работает в этот раз
Хочу нескучные обои
Эту часть возможно было бы сделать написав свое расширение для панели новой вкладки, но раз уж мы уже возимся с встраиванием JS то так даже проще. Вероятно в будущем я найду «ту самую» панельку которая меня устроит или сделаю расширение сам. (Ну да, ну да). Anyway, метод встраивания принципиально не отличается, но пришлось повозится с поиском нужного места. Даже интересно как долго оно проживет, до того как разработчики не изменять структуру html. Все коды как обычно под спойлером.
Скрытый текст
(function () { const VIDEO_PATH = "./usermod_inject/background-video.mp4"; let video = null; let isSpeedDialActive = false; let isWindowFocused = true; function getTopOffset(container) { const rect = container.getBoundingClientRect(); return rect.top; } function ensureVideo() { if (video) return video; video = document.createElement("video"); video.id = "vivaldi-bg-video"; video.src = VIDEO_PATH; video.autoplay = true; video.loop = true; video.muted = true; video.playsInline = true; video.style.opacity = "0"; video.onloadeddata = () => { video.style.transition = "opacity 0.3s"; video.style.opacity = "1"; }; return video; } function updatePlayback() { const v = ensureVideo(); if (isSpeedDialActive && isWindowFocused) { if (v.paused) v.play().catch(() => {}); } else { if (!v.paused) v.pause(); } } function update() { const container = document.querySelector(".startpage") || document.querySelector(".SpeedDialView"); const v = ensureVideo(); if (container) { isSpeedDialActive = true; const offset = getTopOffset(container); Object.assign(v.style, { position: "absolute", top: `-${offset}px`, left: "0", width: "100%", height: `calc(100% + ${offset}px)`, objectFit: "cover", zIndex: "-1", pointerEvents: "none", display: "block" }); if (v.parentElement !== container) { container.style.position = "relative"; container.prepend(v); } } else { isSpeedDialActive = false; if (v.parentElement) { v.style.display = "none"; } } updatePlayback(); } // === window focus === window.addEventListener("focus", () => { isWindowFocused = true; updatePlayback(); }); window.addEventListener("blur", () => { isWindowFocused = false; updatePlayback(); }); // === visibility API === document.addEventListener("visibilitychange", () => { isWindowFocused = !document.hidden; updatePlayback(); }); const observer = new MutationObserver(update); setTimeout(() => { update(); observer.observe(document.body, { childList: true, subtree: true }); }, 500);})();
Под капотом, ищем нужный div встраиваем видео и мониторим когда окно в фокусе и новая вкладка открыта, дабы не кушать ресурсы и не воспроизводить видео всегда. А ниже очередной bat для применения.
@echo offsetlocal enabledelayedexpansionREM === Path to Vivaldi Application ===set "VIVALDI_PATH=%LOCALAPPDATA%\Vivaldi\Application"REM === Custom variables ===set "INJECT_DIR=usermod_inject"set "SCRIPT_NAME=background-video.js"set "VIDEO_NAME=background-video.mp4"REM === Find version ===set "LATEST="for /f "delims=" %%d in ('dir "%VIVALDI_PATH%" /b /ad-h /o-n') do ( if not defined LATEST ( set "LATEST=%%d" ))if not defined LATEST ( echo Vivaldi version not found pause exit /b)echo Found version: %LATEST%set "TARGET_DIR=%VIVALDI_PATH%\%LATEST%\resources\vivaldi"set "HTML_FILE=%TARGET_DIR%\window.html"set "INJECT_PATH=%TARGET_DIR%\%INJECT_DIR%"set "JS_FILE=%INJECT_PATH%\%SCRIPT_NAME%"set "VIDEO_FILE=%INJECT_PATH%\%VIDEO_NAME%"REM === Check window.html ===if not exist "%HTML_FILE%" ( echo window.html not found pause exit /b)REM === Create inject directory if not exists ===if not exist "%INJECT_PATH%" ( mkdir "%INJECT_PATH%")REM === Copy JS ===if exist "%SCRIPT_NAME%" ( copy /Y "%SCRIPT_NAME%" "%JS_FILE%" >nul echo JS copied) else ( echo %SCRIPT_NAME% not found рядом с bat)REM === Copy VIDEO ===if exist "%VIDEO_NAME%" ( copy /Y "%VIDEO_NAME%" "%VIDEO_FILE%" >nul echo Video copied) else ( echo %VIDEO_NAME% not found рядом с bat)REM === Check is inserted js ===powershell -NoProfile -Command "if ((Get-Content '%HTML_FILE%' -Raw) -match '%SCRIPT_NAME%') { exit 1 }"if %errorlevel%==1 ( echo Script already inserted exit /b)REM === Insert js ===powershell -NoProfile -Command "$c=Get-Content '%HTML_FILE%' -Raw; $t=' <script defer src=''./%INJECT_DIR%/%SCRIPT_NAME%''></script>'; $c -replace '</head>', ($t + [Environment]::NewLine + '</head>') | Set-Content '%HTML_FILE%'":endecho Donepause
Проверяем.
Небольшой бонус
Парадоксально, но самый кастомизируюмый браузер не имеет возможности отображать bar закладок только в экспресс панели, что вообще-то базовый функционал хрома. Вероятно, разработчики Vivaldi писали UI с нуля и у них просто не дошли руки. Этот функционал мы будем делать чисто на css стандартными средствами браузера. Да-да, внедрение своего css это стандартный, но отключенный по умолчанию функционал. Заходим на chrome://flags/#vivaldi-css-mods и включаем
А затем в стандартный настройки vivaldi://settings/appearance и указываем там папку к модам.
В саму папку кладем такой нехитрый css. Я позволил себе немного пошаманить со стилем, сделав бар прозрачным. Есливас интересует только отображение оставьте часть с display Этот css переопределяет настройки отображения, не забудьте об этом когда будете копаться в стандартных настройках и думать «А что не работает?». И да таким способом можно поменять стиль вообще любого элемента окна.
Скрытый текст
/* Show Bookmark bar only in New Tab */#browser #main .bookmark-bar { display: none;}#browser #main:has(.SpeedDialView-Settings-Button) .bookmark-bar { display: block; /* BG */ background: rgba(20, 20, 20, 0.35) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);}/* Кнопки закладок (плитки) *//* Кнопки закладок */#browser #main:has(.SpeedDialView-Settings-Button) .bookmark-bar button,#browser #main:has(.SpeedDialView-Settings-Button) .bookmark-bar .button,#browser #main:has(.SpeedDialView-Settings-Button) .bookmark-bar .bookmark { background: rgba(40, 40, 40, 0.0) !important; border-radius: 10px !important; transition: all 0.2s ease;}#browser #main:has(.SpeedDialView-Settings-Button) .bookmark-bar button:hover,#browser #main:has(.SpeedDialView-Settings-Button) .bookmark-bar .button:hover,#browser #main:has(.SpeedDialView-Settings-Button) .bookmark-bar .bookmark:hover { background: rgba(40, 40, 40, 0.5) !important;}#browser #main:has(.SpeedDialView-Settings-Button) .bookmark-bar button:active,#browser #main:has(.SpeedDialView-Settings-Button) .bookmark-bar .button:active,#browser #main:has(.SpeedDialView-Settings-Button) .bookmark-bar .bookmark:active { background: rgba(40, 40, 40, 1.0) !important;}
Выводы и пара слов Yandex и Vivaldi
Какие выводы мы можем сделать для себя? Модифицировать Vivaldi можно, css моды работают «из коробки», а js подключить не составит труда без каких либо админских привилегий. Поэтому еще раз хочется сказать: осторожнее со скриптами, такой js моддинг браузера можно использовать не только во благо и один запуск bat может наворотить дел. Ваш браузер достаточно безопасен при серфинге и настолько же уязвим при модификации извне.
Что хочется сказать Yandex и почему я перестал пользоваться вашим браузером. Я понимаю, что во многом ситуация с мониторингом того, что делает пользователь от вас не зависит, но на мой взгляд вашасистема сбора телеметрии была слишком агрессивной и до этого. Однажды мне понадобилось собрать аналитику по тому кто открывает png по ссылке, чтобы понять охват географии. Сама ссылка имела весьма замысловатый url, угадать который невозможно. Ваши поисковые боты (не браузер) пошли во все тяжкие еще до того как я нажал enter для перехода. Пойдя и по точному адресу, и более того по разным уровням самой ссылки и домена, параллельно постучавшись в пару админ панелей. Это заходит далеко за «прогрузить превью» с машины пользователя.
Что хочется сказать Vivaldi. Вы молоды и сделали больше, чем очередной форк Chrome. Кастомизация действительно на высоте. Я понимаю, что у вас куча дел и видео‑обои явно не в приоритете, однако не иметь базовый функционал chrome в виде скрытия бара вкладок для всего кроме «экспресс панели» это странно, тем более при позиционировании себя как браузера с кастомизацией. Конкретно по этому функционалу обсуждения и просьбы от пользователей на «реддитах» тянутся годами. Переход вверх по нажатию на вкладку тоже не эксклюзив и есть у той же Opera. В чужой монастырь со своим уставом не лезут, но послевкусие такое, что изучить потребности пользователей можно и чуточку лучше. Однако несмотря на все эти недовольства именно ваш браузер смог закрыть большую часть мои привередливых хотелок.
Надеюсь такое «исследование» было вам интересно. Статью опубликовать решил больше в целях рассказать об потенциальной возможности для кастомизации, нежели как готовое решение. Уверен, что многие вещи можно было сделать по другому. Все исходники вы можете найти тут.
ссылка на оригинал статьи https://habr.com/ru/articles/1024422/