Vivaldi — браузер с человеческим лицом. Обзор браузера Vivaldi: возвращение к классике Плагины для vivaldi

Всем привет!

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

И, насколько мы знаем из ваших отзывов, такой наш подход к разработке Vivaldi вам очень нравится. Конечно, это усложняет браузер и иногда приводит к ошибкам в работе функций, но, в полном соответствии с законами диалектики, подобное количественное многообразие настроек и фич неизбежно переходит в качество - появляются новые возможности работы с браузером, о которых вы даже не догадываетесь. И сегодня мы хотим познакомить вас с небольшим списком таких «лайфхаков», которые позволят сделать вашу работу в Vivaldi ещё немного комфортнее.

1. «Босс-кнопка»

Не секрет, что многие в рабочее время любят заглянуть на сайты, не связанные с работой, особенно во время спортивных чемпионатов, например. Но редкий начальник может войти в положение и простить подчинённому подобную вольность. Вот и приходится изобретать различные способы, позволяющие быстро скрыть от внезапно нагрянувшего начальства то, что отображается на экране монитора. Есть подобная функция и в браузере Vivaldi.

На самом деле функция даже более совершенна, чем это можно себе представить, ведь никакой кнопки вообще нет! Для того, чтобы активировать данный режим, необходимо лишь включить фильтр размытия в «Эффектах страницы». Теперь просто выведите курсор мышки к краю экрана - изображение страницы автоматически растворится!

2. Сортировка закладок

Мы любим закладки. Как правило, у каждого из нас имеется неслабый багаж «нажитого непосильным трудом» за многие годы работы в сети. Одна беда: время от времени их приходится сортировать, чтобы время поиска нужной закладки оставалось в разумных пределах. К сожалению, вертикальный размер дисплеев не позволяет вместить весь список папок и файлов закладок, что может затруднить процесс сортировки. К счастью, у вас есть браузер Vivaldi! Просто откройте закладки в боковой панели и во вкладке, а затем просто переносите нужные из одной папки в другую.

3. Создание закладки

Да, эта функция очень проста и доступна пользователям браузеров множеством способов. Но в Vivaldi есть и ещё один, довольно удобный. Просто откройте боковую панель закладок и перетаскивайте ярлык страницы в нужную папку.

4. Изменение стартовой Экспресс-панели

В браузере Vivaldi мы предусмотрели возможность создавать несколько Экспресс-панелей, каждая из которых может содержать закладки на определённую тематику. К сожалению, мы пока не предусмотрели способ сортировки этих Экспресс-панелей, чтобы назначить одну из них в качестве дефолтной. Но способ решения проблемы есть, и довольно простой. Просто откройте боковую панель закладок и расставьте Экспресс-панели в том порядке, который вас устроит, одновременно вы можете сменить и Экспресс-панель, открываемую по умолчанию.

5. Просмотр сохранённых паролей

Сегодня у каждого из нас имеется несколько десятков (как минимум) учётных записей на самых различных сайтах, и если вы не используете один и тот же пароль для всех случаев, неизбежно наступает момент, когда нужно вспомнить его для одного из веб-сайтов. Как это сделать в браузере Vivaldi? Очень просто. Как вы знаете, наш браузер построен на ядре Chromium, поэтому многие функции пришли к нам по наследству. Введите в адресной строке адрес:

chrome://settings/passwords

Теперь вы сможете разыскать пароль, даже если он был сохранён много времени назад.


6. YouTube каналы в боковой панели

Для того, чтобы постоянно держать под рукой YouTube-канал, на который вы подписаны, и своевременно получать все свежие ролики, просто разместите канал в виде веб-панели - теперь новые видео будут на расстоянии одного клика.


7. Быстрое клонирование вкладок

Если вам довольно часто приходится клонировать вкладки, то вам поможет один полезный совет: создайте для этой функции комбинацию быстрых клавиш (при желании - даже однокнопочную), после этого вам больше не придётся использовать контекстное меню вкладки для этих целей. Попробуйте, это действительно удобно!

8. Настройки, как домашняя страница

Любите экспериментировать с настройками браузера и хотите, чтобы они всегда были под рукой? Назначьте в качестве домашней внутреннюю страницу vivaldi://settings - теперь настройки будут открываться при нажатии на кнопку «Домой» в адресной панели браузера.

9. Быстрый поиск вкладки

Если у вас открыто много вкладок, особенно - с одного и того же веб-сайта, и вам сложно найти среди них нужную, просто воспользуйтесь клавишей F2 и начните вводить название страницы или адрес - в отфильтрованном списке вы легко найдёте нужную страницу. Выделите её и нажмите Enter - дело сделано.

10. Жест-змейка

Жесты мышью уже стали привычной функцией во многих браузерах. Есть они и в Vivaldi. Более того, в тестовой сборке браузера мы добавили возможность создавать новые жесты для самых различных действий. Одна беда: со временем число доступных удобных перемещений курсора мыши неизбежно подходит к концу. На такой случай Vivaldi обладает скрытым талантом: попробуйте зигзаг в качестве жеста.

На этом пока всё. Напоминаем вам, что загрузить стабильную версию браузера Vivaldi можно с

Можно уверенно сказать, что по количеству доступных настроек Vivaldi уверенно опережает всех конкурентов. Внешний вид, функциональность, производительность - всё в этом браузере можно настроить в соответствии со своими вкусами и потребностями. Браво, Vivaldi!

2. Группы вкладок

Группировка вкладок была одной из киллер-фич Opera 12. Пользователи, которые работали с большим количеством табов, просто боготворили эту функцию, позволяющую несколькими элегантными движениями навести порядок среди открытых сайтов.

В Vivaldi тоже есть точно такая же возможность. Если вы не верите, то убедитесь сами и расскажите об этом коллегам. Только за это можно поставить прижизненный памятник разработчикам и водить вокруг него хороводы.

3. Эффекты страницы

Среди многих функций, унаследованных от старой доброй Opera, присутствуют также специальные CSS-фильтры. С их помощью можно применить к любой странице целый ряд любопытных и / или полезных фильтров, изменяющих её внешний вид. Таким образом пользователи получают возможность исправить проявления дурного вкуса некоторых веб-дизайнеров, создающих совершенно вырвиглазные страницы, и даже активировать специальный режим чтения.

4. Темы оформления

Многие браузеры поддерживают темы оформления. Но чаще всего это означает, что в него можно просто вставить свою картинку в качестве фона. Vivaldi пошёл гораздо дальше в этом направлении. Эту программу можно раскрасить буквально как захочется: светлые фоны с цветными вкладками, тёмные фоны со светлыми кнопками - всё зависит только от вашей фантазии.

Не лишним будет напомнить, что этот браузер поддерживает функцию динамического изменения интерфейса в зависимости от цвета загруженной страницы. Выглядит свежо и никогда не надоедает.

5. Информация в панели адреса

Панель адреса Vivaldi, кроме своих прямых обязанностей, ещё выполняет роль индикатора загрузки. Во время открытия новой веб-страницы в ней отображается прогресс-бар, скорость и количество уже загруженных элементов. Мегаудобная и полезная функция.

6. Загрузки и закладки в боковой панели

Мне нравится Chrome, но то, как в нём реализована работа с загрузками, не выдерживает никакой критики. Нижняя панель не очень удобна, а для отображения специальной страницы с загрузками необходимо продираться через многоуровневое меню. Не лучше обстоят дела с закладками.

В Vivaldi всё гораздо проще и удобнее. Все закладки и загрузки можно найти в многофункциональном сайдбаре, вызываемом одним кликом мыши. Такая же панель была в старой версии Opera, да.

7. Встроенные заметки

Ещё одна суперфишка, прямиком перекочевавшая из Opera. Встроенный в сайдбар заметочник позволяет в два счёта сохранять любую информацию с открытой в данный момент страницы, в том числе тексты, ссылки, скриншоты и файлы. Незаменимый инструмент для тех, кто в интернете не только развлекается, но и работает.

8. Скриншоты

По работе мне очень часто приходится делать скриншоты страниц. Наличие в Vivaldi удобного инструмента для их создания не может не радовать. Уверен, что меня поддержат множество журналистов, дизайнеров, разработчиков, блогеров и людей других специальностей, которым приходится часто делать снимки веб-сайтов.

9. Быстрые команды, горячие клавиши, жесты

Каждый из пользователей имеет свои собственные любимые приёмы взаимодействия с компьютером. Одни предпочитают горячие клавиши, другие пользуются преимущественно мышкой. Одним подавай красивый и понятный графический интерфейс, другие жить не могут без командной строки.

Браузер Vivaldi может удовлетворить все категории пользователей. В нём есть горячие клавиши, управление жестами мыши и даже некое подобие встроенной командной строки, появляющееся при нажатии клавиши F2. С её помощью можно быстро перейти к нужной вкладке, найти необходимое слово на странице, изменить настройки - то есть выполнить практически любое действие.

10. Веб-панели

Я посвятил сайдбару Vivaldi уже несколько пунктов, но этого всё равно недостаточно, чтобы перечислить все его функции. Одна из самых любимых - встроенные веб-панели. Эта функция позволяет открывать в сайдбаре любые нужные сервисы. Очень удобно: можно разместить здесь переводчик, музыкальный проигрыватель, список задач и любой другой сервис, которым вы часто пользуетесь.

Разумеется, это далеко не все преимущества браузера Vivaldi. Он, в отличие от некоторых других веб-обозревателей, обладает столь многими достоинствами и отличительными чертами, что уместить их в рамки десяти пунктов не представляется возможным. Буду рад, если вы дополните этот список в комментариях.

Всем привет!

Прошло довольно много времени с момента выхода предыдущей еженедельной сборки, и это время мы не тратили даром. В новой сборке мы представляем новинку - веб-панель, а также добавили поддержку большего числа расширений, исправили массу ошибок, улучшили работу анимации интерфейса и хорошо поработали над улучшением производительности. Теперь обо всём этом по порядку и подробнее.

Веб-панели

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

Для добавления новой веб-панели нажмите "+" и введите URL. После добавления веб-панели её иконка появится в боковой панели, под встроенными панелями браузера. Клик на этой иконке откроет соответствующую страницу прямо внутри боковой панели.

В связи с ограниченным размером боковой панели, контент будет отображаться в режиме для мобильных устройств. Вот несколько веб-сайтов, с которыми вы можете попробовать новую функцию:

Это лишь начальная реализация новой функции, которая лишь позволяет опробовать, как это может работать. В дальнейшем мы будем улучшать работу веб-панелей, включая открытие ссылок в окне браузера и автоматическое обновление контента. На данный момент вы можете обновлять контент веб-панелей через контекстное меню правой кнопки мыши при клике на иконке веб-панели.

Кнопки расширений

Мы планируем предоставлять пользователям в браузере все популярные функции «из коробки», но мы понимаем, что невозможно учесть вкусы всех пользователей. Поэтому мы встроили в браузер Vivaldi поддержку расширений. Базовая поддержка уже была реализована раньше, в новой сборке мы добавили поддержку кнопок расширений, размещаемых прямо в интерфейсе браузера. Таким образом расширилось число расширений, поддерживаемых в Vivaldi, а также вы получили больше возможностей по работе с расширениями.

Расширения, которые взаимодействуют с открытыми страницами, будут отображать иконку в адресной строке, а расширения, взаимодействующие с браузером, будут отображать иконки на адресной панели.

Подробности в адресной строке

Мы давно обещали сделать более информативной загрузку страниц, и теперь мы своё обещание выполняем. Информация о загрузке страниц теперь размещается прямо в адресной строке.

Производительность: вкладки и закладки

В сегодняшней сборке мы переписали некоторые внутренние модули в целях улучшения производительности. Теперь Vivaldi должен быстрее обрабатывать открытие и закрытие вкладок, а также переключение между ними. Также дерево закладок должно теперь работать заметно быстрее. Также мы заложили в код несколько заделов на будущее - вы сможете увидеть ускорение функций браузера в будущих сборках.

Другие улучшения

В дополнение к вышеуказанным изменениям, которые на виду, мы сделали и много изменений, незаметных внешне. Эти изменения коснулись панели закладок и заметок. Также мы обновили ядро браузера до версии Chromium 45.0.2454.43. Полный список изменений вы можете посмотреть ниже.

Известные проблемы

  • Не работают ссылки на странице истории
  • Вкладки при боковом расположении поломались

На этом пока всё на сегодня. Загрузить новую сборку можно по ссылкам ниже:

  • Windows 64-bit (экспериментальная)
Полный список изменений:
  • VB-8062 Add an option to open URL"s in same/new tab from QC
  • VB-8428 No difference in disabled and blurred state for tool bar buttons
  • VB-8348 Really disable Google translate
  • VB-88 Web panels missing
  • VB-8392 Create an Empty State for Notes panel
  • VB-8387 HTML menu"s text gets cut in bookmarks bar
  • VB-8378 Capitalize short-cuts in Linux menus
  • VB-7686 Two selections in the address field drop-down - independently for mouse and keyboard
  • VB-56 Progress info is missing
  • VB-2454 Page up/Page down does not work in address bar drop-down menu
  • VB-8316 Panel is rendered when it is invisible
  • VB-8078 Drag and drop in bookmark tree without clicking on bookmark item first
  • VB-8255 Add bookmark dialog disappears shortly after being opened
  • VB-8298 Re-add web navigation helpers.
  • VB-3198 Implement browser and pageActions
  • VB-8286 Space seems missing after last character of word in menu if it"s the hot key
  • VB-8285 Remove lower case “Show panel” string
  • VB-8161 Replace search field"s drop-down with menu component
  • VB-8261 Add support for displaying keyboard short-cuts to menus
  • VB-8226 Make bookmarks bar look clean
  • VB-8281 Our UI blends (too much) with web page UI
  • VB-8252 native menu doesn"t show check boxes
  • VB-3723 Get rid of toggle word in menus
  • VB-8210 Add support for check boxes to menu component
  • VB-8160 Further enhance our menu component
  • VB-8209 Add support for type=“checkbox” to showMenu API
  • VB-8208 “Open in Background Tab” in context menu is in a wrong position
  • VB-8220 Remove appear animation from Speed dials
  • VB-8211 Select all, cut, copy, paste, undo and redo keyboard short-cuts broken on Mac
  • VB-7712 Mac strings (All languages)
  • VB-6968 Upper case transform is wrong for Turkish in settings page
  • VB-8035 Sound icon in tab more modern
  • VB-7379 Panel switcher and scrollbars don"t adapt to light/dark themes: work in progress
  • VB-8082 Strings show variables if not in translation file
  • VB-5692 Crash on import data
  • VB-8141 Regression: find in page match case broken
  • VB-8121 Bookmark icon should adhere to Dark UI
  • VB-5321 Option to not grey UI when not in focus
  • VB-7173 Browser icon is a warning triangle in task manager
  • VB-3772 Ability to open links in background tab from context-menu
  • VB-8180 Context menu in empty area of bookmark panel missing
  • VB-8174 Unclear “Requires Restart” info text in Settings
  • VB-8152 Keyboard navigation is broken in Bookmark Tree
  • VB-8136 Bookmark all open pages does not work
  • VB-8130 Sound icon invisible in light theme with coloring off
  • VB-7248 Short-cuts window has transparency
  • VB-8108 “Reveal File” should be Renamed to “Open Folder”
  • VB-7799 Cannot bring the update dialog to foreground
  • VB-8125 Selected Note icon, not in Focus, has wrong color (dark-ui)
  • VB-7789 Auto-update sets last Standalone install to default browser
  • VB-7230 Drag and drop of URL to address bar messes up URL field content
  • VB-2358 Detect pepper flash from Chrome
  • VB-7893 Every second click in address bar selects whole URL instead of changing cursor position
  • VB-8089 Vivaldi 64-bit Windows version does not update automatically
  • VB-8048 Arrow down on search selector does not display list of search engines
  • VB-7177 Padding of new folder button in new bookmark panel is missing
  • VB-7705 Zooming when clicking on ⌘ after scrolling with touch pad
  • VB-7957 Find in page arrows have a 2px difference in position
  • Update Chromium to 45.0.2454.43
  • Add more short-cuts to main menu
  • Updating default favicon to have white fill
  • Persist selection on single click in URL field
  • Form element font definitions
  • URL bar focus & drop down hide
  • Fixed bookmark import dialog
  • Fix for URL bar only setting focus when switching page
  • Find in Page styling improvement
  • Fix back and rewind button"s translations
  • Alternate address bar position styling

На этом всё на сегодня. Напоминаем вам, что еженедельные сборки являются тестовыми, поэтому не забывайте делать резервные копии важных данных. Сообщать о найденных ошибках можно по

Для большинства пользователей обозреватель сети Интернет является главной программой на компьютере, следовательно он должен быть быстрый, удобный, функциональный, не «жрать» ресурсы компьютера…, а если в нём будут свои уникальные фишки, которые отличали бы его от многочисленных клонов — вообще супер, правда?

Вы скажете, что нет сегодня такого браузера? Вы заблуждаетесь — это отличный от всех браузер Vivaldi .

13 февраля 2013 компания Opera Software официально объявила о переходе своего браузера на технологию WebKit и прекращении работ над собственным движком рендеринга страниц Presto — это была чёрная среда для фанатов замечательного и оригинального обозревателя.

Производители слёзно уверяли нас, что этот резкий поворот только к лучшему, что функционал не изменится и «Вам понравится», а на самом деле получился очередной унылый клон Google Chrome, который даже через 6 лет не стал похожим на прежнюю Оперу (не говоря уже о каких-то улучшениях и развитии) — из программы просто вырвали душу .

Видимо один из основателей Opera (Йон Стефенсон фон Течнер) знал, что так и получится ещё в 2011 году — он покинул компанию, а в августе 2014 года создал свою Vivaldi Technologies, которая занялась разработкой собственного браузера под названием Vivaldi. Ядро оставили новое (WebKit) из-за нехватки средств и времени, но то, что в итоге получилось… новая Опера нервно курит в стороне.

Вот про то, что получилось у фон Течнера я Вам сегодня и расскажу. Предупреждаю сразу, что Вы сильно удивитесь — это больше, чем просто браузер, это шедевр.

Вивальди — обозреватель сети Интернет

Старая добрая Опера, которая подарила нам визуальные закладки , управление жестами мышки и много других уникальных фишек (бессовестно украденных конкурентами) может гордиться своим настоящим преемником…

Потребление оперативной памяти

Тут и говорить нечего. Открыл в топовых обозревателях по пять одинаковых вкладок и демонстрирую Вам результат диспетчера задач Windows…


Все подопытные 64-битные. Лидером вышло встроенное изделие, которым пользуются только странные люди. Надо учесть, что Adblock Plus для Internet Explorer у меня не получилось впихнуть в Edge и он вообще пустой как барабан (без визуальных закладок, управления жестами мышки, цветных вкладок, встроенной почты и т.д.).

Google Chrome у меня тоже без всех вышеперечисленных расширений (потому что я им не пользуюсь практически). А вот Вивальди имеет все (и многие другие) фишки, потребляя при этом всего 45 Мб оперативной памяти — отличный результат.

Mozilla Firefox оказался вообще монстром пожирающим ресурсы компьютера — очень печально этот факт констатировать, он мне очень нравился.

Удобные настройки Vivaldi

Первое, чем меня поразила эта программа — удобными, понятными, практичными настройками. Их количество впечатляет, но не пугает, после знакомства с ними. Всем уделять внимания не буду (сильно растянется и так не маленькая статья), а покажу Вам только те, которые понравились и даже удивили.

Открыть волшебные настройки можно кликнув по кнопке меню браузера и зайдя в «Инструменты». Сказка начинается во вкладке «Внешний вид»…

Установив нижнюю галку Вы придадите вкладкам цвет отображаемых в них сайтов (цвет вычисляется из фавикона ресурса). Таким образом можно легко ориентироваться в куче открытых вкладок и не нужно дополнительных расширений.

Уникальная функция скрытия адресной строки

Тут же можно отключить постоянное отображение адресной строки…

Фантастика — её можно скрыть наконец-то!!! Отображать эту строку можно, когда она нужна, методом тыка по назначенной кнопке клавиатуры (ниже покажу). Получается такой себе полноэкранный режим с одной панелью вкладок — владельцам ноутбуков понравится, я уверен.

Стартовая страница

Цвет фона и фоновый рисунок на стартовой странице можно менять на своё усмотрение — легко и просто…


Экспресс-панель с визуальными закладками тоже легко корректируется…


Кстати, таких закладок можно делать бесчисленное количество и раскладывать их по группам…


Жмите плюсик и вместо «New Folder» вписывайте своё название группы закладок.

Настройка вкладок

Переходим в настройки вкладок…


Как видите — панель вкладок тоже можно скрывать убрав галку и назначив на эту операцию кнопку клавиатуры. Эскизы на вкладках отлично помогают ориентироваться в их большом количестве. Зазор между вкладками и окном легко убирается, только не совсем мне понятно наличие его изначально — есть фанаты этого зазора?

Обязательно оставьте галку на «Включить группировку» — эта функция Вам понравится, читайте дальше.

Волшебная боковая панель

Ещё одно ноу-хау от Opera возвращается — боковая панель…


Если оставить галочку — панель будет скрываться практически полностью, а достать её можно будет кликнув по маленькому еле заметному значку сбоку. Тут Вам и удобное управление загруженными файлами, и почтой… да всё, что угодно можно разместить в боковой панели — очень и очень удобно…


Клавиатурные комбинации

Клавиатурные комбинации есть в любых браузерах, но только в Вивальди они позволяют взять программу под полный контроль…


В самом низу страницы настроек этих комбинаций есть свёрнутые разделы — не забудьте про них…


Именно тут можно переназначить кнопки для отображения\скрытия адресной панели и панели вкладок (писал об этом выше)…


Другие настройки

Возможно кто-то ещё помнит уникальное и удобное окно загрузок в Opera? Есть оно и в Vivaldi…


Чтоб оно красиво появлялось всегда, нужно оставить галочку в настройках…


Кто не любит плавную прокрутку страниц и предпочитает дёрганную — снимите галку тут…


В разделе настроек «Пароли» можно посмотреть эти самые сохранённые пароли, но скопировать их не получится — это изменить нельзя по соображениям безопасности.

Фишки браузера Vivaldi

К уникальным фишкам этого обозревателя можно отнести описанные выше эскизы вкладок, скрытие панелей адреса и вкладок, раскраску вкладок, окно загрузок, боковую панель, управление жестами мышки, экономию ресурсов компьютера… не рассказал ещё про несколько.

Напомню, что в Вивальди такой же движок, как и в Google Chrome, так вот в последнем «голосящие» вкладки можно только увидеть (по значку динамика), а в герое этой статьи звук ещё можно и отключать не переходя на страницу (как в Mozilla Firefox ).

Во время загрузки любой страницы в адресной строке отображается размер её и количество запросов. В строке состояния можно изменить масштаб страницы, отключить загрузку изображений совсем или заставить подгружать их только из кеша, применить кучу эффектов к отображению сайтов (не понял зачем это надо и кому). Тут же можно указать способ размещения открытых сгруппированных вкладок…

Группировка вкладок в Вивальди



В каждом разделе будут отдельно работать жесты мыши, прокрутка и всё остальное — как-будто у Вас открыто несколько браузеров одновременно. Страницы адаптируются к размеру автоматически (если сайт современный и правильно сделан ). Такая фишка сведёт с ума владельцев широкоформатных мониторов , я уверен.

Чтоб пользоваться этой функцией нужно сгруппировать вкладки — откройте две штуки и нажав левой кнопкой мыши на одну из них, не отпуская, потяните на другую, пока нижняя не потемнеет (после этого отпустите бедную мышку). Всё, они сгруппировались (наведите курсор на вкладку и появится два эскиза сразу).

Теперь можно правой кнопкой мыши кликнуть по группе и выбрать «Разместить группу». Тут же их можно и разгруппировать, кстати.

Может что-то упустил — подскажите в комментариях и я дополню статью. Пора закругляться…

Скачать Vivaldi

Скачать этот великолепный и неповторимый браузер, который запускается и работает не хуже именитых, раскрученных конкурентов, можно с его официальной страницы…

Размер архива 54.6 Мб. Вирусы отсутствуют. Работает программа во всех версиях операционной системы Windows.

Он работает во всех версиях любых операционных систем. Там же есть и 64-битная версия (ниже на странице). Пока доступна только вторая тестовая версия (абсолютно полноценная), но уже скоро выйдет финальная, в которой будет синхронизация и ещё какие-то удобства — хочется в это верить.

У меня создалось впечатление, что Vivaldi — единственный браузер, создатель которого прислушивается к пожеланиям пользователей и учитывает все мелочи. Чистосердечное спасибо Вам, товарищ Йон Стефенсон фон Течнер, за это чудо!

До новых полезных компьютерных программ и .

ПОЛЕЗНОЕ ВИДЕО

Самые популярные статьи за сутки:

Я только обозреваю программы! Любые претензии - к их производителям!

Созданное вами расширение можно будет встроить в интерфейс браузера(не как дополнительное расширение, а как часть браузера). Простите за тавтологию.

Вам потребуется:

  • Знание основ CSS, HTML, JS и работы с DOM.
  • Если страшно - можно обойтись онлайн-справочниками(как я).
  • Редактор кода. Какой душе угодно, желательно с подсветкой Javasvript. Я пользуюсь Sublime Text 3 .
  • Минимум полчаса свободного времени

Шаг нулевой. Списывание

Создаем файл MyLinks.user.js(обязательно добавляем.user., иначе браузер не поймет что это расширение) в любой удобной директории. Открываем.

В целях сократить код я использовал функцию, которая упрощает создание html элементов из js(ссылку на источник прилагаю):

Function create(name, attributes) {
var el = document.createElement(name);
if (typeof attributes == "object") {
for (var i in attributes) {
el.setAttribute(i, attributes[i]);
}
}
for (var i = 2;i < arguments.length; i++) {
var val = arguments[i];
if (typeof val == "string") { val = document.createTextNode(val) };
el.appendChild(val);
}
return el;
}

Шаг первый. И второй... и третий...
Для начала нам нужно создать контейнер(квадратик), в котором будут храниться наши ссылки:


var linkBox = create("div", { id: "linkBox"});

Можно сразу задать ему стили, для удобства. Я использовал метод style.cssText:


linkBox.style.cssText = " width:180px; position: fixed;top: 100px;right: 0px; z-index: 999;background: #fff;padding: 10px;box-shadow: 0 0 20px 0px #999;display:flex; flex-direction:column;justify-content:space-between;text-align:left;";
var linkVivaldi = create("a", { href: "https://forum.vivaldi.net/category/20/%D1%80%D1%83%D1%81%D1%81%D0%BA%D0%B8%D0%B9"},
"Vivaldi RU Форум");
var habr = create("a", {href: "https://habrahabr.ru/top/"}, "Хабрахабр");
var vk = create("a", {href: "https://vk.com/vaskm"}, "Вконтакте")

LinkBox.appendChild(linkVivaldi);
linkBox.appendChild(habr);
linkBox.appendChild(vk);

Кладем наш бокс, собственно, на страницу:

Document.body.appendChild(linkBox);

Добавляем автоскрытие нашего бокса по таймауту:

LinkBox.onmouseover = function (){
if (document.querySelector("#linkBox").style.right == "-180px") {
document.getElementById("linkBox").style.right = "0";
setTimeout(5000);
}
setTimeout(function(){document.getElementById("linkBox").style.right = "-180px";}, 5000);
};

Ах да, забыли. Добавляем синюю полосу слева. Изначально она задумывалась как кнопка, а потом осталась просто для красоты:


var toggler = create("span", { id:"boxToggler"}, "");
//сразу же добавляем его в наш бокс
linkBox.appendChild(toggler);

Стили можно прописывать не только явным указанием через js(как выше).
На многих форумах говорят, что подключить свой файл css из браузера невозможно. Поэтому мы создадим свой файл уже внутри документа. С флексбоксом и марджинами.

// Создаем собственный CSS стиль
var style = document.createElement("style");

Добавляем стили обычным innerHTML(не забываем ставить += , иначе каждая запись будет стирать предыдущую):

// украшаем полоску слева. Можно добавить ее через:before
style.innerHTML = "#boxToggler{content: ""; position:absolute; top:0; bottom: 0; left: -10px; width: 14px; background: cornflowerblue;}";

//сам декорэйшенс
style.innerHTML+=" #linkBox a{padding: 5px 0 0 5px; line-height:8px; height:16px;font-size:14px;}";
style.innerHTML+="#linkBox a:hover{background: #ddd; text-decoration: none;}";
style.innerHTML+="#linkBox span{text-align: center;}";

Файл со стилями мы создали, осталось лишь засунуть его в наш документ, традиционно в <head> :

Document.head.appendChild(style);

Теперь сохраняем наш файл. Открываем страницу расширений vivaldi://extensions/ , отмечаем Developer Mode и перетаскиваем прям в окно наш файл. Должно появиться диалоговое окно с разрешением на установку. Соглашаемся. Открываем любой сайт. Наслаждаемся. Для добавления расширения в основной функционал браузера - кладем наш файл в корневую директорию браузера и прописываем к нему путь в файле browser.html.