Да будет вознагражден тот, кто ищет  —  или полный доступ к кастомизации интерфейса Вивальди.

Руководчтво актуально для версии 1.12

Не все знают, что интерфейс Vivaldi — это чистый css+js, а значит его можно, при желании, кастомизировать под себя, как любую интернет-страницу. И ниже я изложу как именно.

Внимание, Минздрав предупреждает: неосторожные действия могут убить ваш браузер, рекомендуется экспортировать все важные данные, во избежание их потери!

Шаг первый. Очевидный

Загружаем Вивальди. Можно как я — с браузера Вивальди.

 

Шаг второй. Коварный.

Открываем любимый браузер, идем по ссылке — vivaldi://flags/. Возможно выскочит предупреждение, что вы нарушаете законы Халифата и все последующие действия будут на вашей совести. Соглашаемся.

Видим следующее:

 

Через поиск (Ctrl+F) находим и включаем следующие флаги:

debug-packed-apps
 

silent-debugger-extension-api
 

Перезагружаемся. Читаем следующий шаг.

Шаг третий. Загадочный.
Жмем правой кнопкой мыши на логотипе Вивальди(можно и на любой другой его части, кроме самой страницы). В контекстном меню видим новые пункты:

 

Жмем Inspect. Вылазит знакомая для разработчиков панелька, только теперь с необычными свойствами:

 

Жмем на значок мышки в квадратике в левом верхнем углу. Вуаля! Теперь мы можем за’inspect’ить не только элементы страницы, но и само оформление браузера. Например, жмем на значок “Домой” и в инспекторе, в правом столбце в самом верхнем свойстве element.style прописываем:

element.style{display:none;}

Наслаждаемся результатом:

 

Bсе бы хорошо, но при перезагрузке браузера все наши изменения исчезнут, вернув старый унылый дизайн. Давайте исправлять это.

Шаг четвертый. Закрепляющий.

Идем в директорию браузера. У меня она такая( вместо Program Files может быть Program Files(x86) ):

C:\Program Files\Vivaldi\Application\1.12.947.3\resources\vivaldi

Видим файлик browser.html. Открываем его любым текстовым редактором(я открою в Sublime):

 

Перед закрывающим тегом </head> вставьте следующую строку:

<link rel=”stylesheet” type=”text/css” href=”user_files/custom.css”>

Сохраняем через Ctrl+S. Если не захочет сохранять — ПКМ на файле browser.html -> Свойства-> Безопасность — Изменить разрешения -> У группы “Пользователи” выставить галочки на “Разрешить”.

 

Сохраняем изменения в файле Ctrl+S. Идем в папку user_files и создаем наш файл custom.css(Если не создается — создаем на рабочем столе, потом готовый файл копируем в директорию). Открываем его через удобный редактор. Здесь будем писать наш display:none; Только в этот раз уже укажем более явный селектор:

button.button-toolbar.home { display: none;}

Сохраняемся, перезагружаем браузер. Наслаждаемся результатами:

Аплодисменты.

Мотивируемся учить CSS и Javascript, с помощью которых в браузер подобным способом можно добавить практически неогранниченное количество функционала, от анимации, изменения размеров, положения элементов интерфейса и замены дефолтных значков/панелей до создания своих . JS же позволит реализовать дополнительные функции браузера(например, синхронизацию).