Как сделать крутой браузер
Google Chrome является одним из наиболее популярных браузеров в мире. Мы сделаем его красивым, изменим дизайн браузера до неузнаваемости, а также рассмотрим несколько полезных плагинов для него.
Меняем внешний вид
Все знают что в Google через стандартные настройки можно изменить тему и установить фоновое изображение. Это все достаточно просто и такое вы можете сделать сами.
Мы же с вами будем менять внешний вид браузера за счет расширения Night Tab .
Вот что вам нужно сделать:
- Зайдите в магазин расширений для Google Chrome;
- Найдите там расширение Night Tab;
- Установите расширение в браузере;
- После установки откройте новую вкладку, где у вас спросят хотите ли вы оставить изменения. Нажмите на кнопку «Оставить».
После этого вы заметите как сильно преобразовалась ваша основная страница, но и это ещё не все.
Если нажать на иконку шестеренки, то там вы сможете установить дополнительные настройки: цвет заднего фона, цвет обводки, формат шрифта, вы сможете установить тени, округление углов, установить прозрачность и многое другое.
На главной странице должны быть лишь те сайты, что интересны вам. Дабы добавить новые сайты, переместить их с места на место, удалить или же проделать какую-либо другую операцию, вам достаточно нажать на иконку карандаша и далее вы можете менять вкладки с сайтами на свое усмотрение.
К такому крутому стартовому экрану, конечно же, нужна и крутая тема для Google Chrome. Чтобы добавить темную тему зайдите обратно в магазин расширений и перейдите на вкладку темы. Здесь вы сможете выбрать любую темную тему или если хотите такую же, то для этого стоит установить тему Material Dark .
Если вам интересно более детально ознакомиться с этим плагином, то рекомендуем посмотреть видео ниже:
Теперь ваш браузер явно выглядит куда круче!
Плагины для Google Chrome
Изменить тему браузера и стартовую страницу – это безусловно круто. Но для полного удовлетворения не хватает установки плагинов.
Для браузера было разработано огромное количество плагинов. Большинство из них пустышки, но есть и те, что по истине интересны. Кстати, если вам интересно сделать свой плагин, то зацените видео ниже:
Мы же с вами пройдёмся по нескольким плагинам, которые вы можете установить прямо сейчас и изменить ваш браузер до неузнаваемости.
The great suspender
Установив новую тему и добавив плагинов, вы заметно усилите прожорливость браузера к памяти вашего ПК. Дабы браузер работал лучше, стоит установить расширение The great suspender. Оно позволяет отключить неиспользуемые вкладки и тем самым потребляемая мощность браузера снижается до минимума.
Dark Reader
Поскольку мы установили темную тему для всего браузера, то вполне разумно сделать аналогичное действие для всех существующих сайтов в интернете.
Сделать это можно за счет плагина Dark Reader. Он позволяет включить темную тему для любого сайта в интернете. Таким образом нагрузка на глаза будет снижена и вы спокойно сможете сидеть за компьютером ночью без опаски открыть супер светлый веб сайт.
Checker for Gmail
Также рассмотрим несколько полезных плагинов, что позволят вам систематизировать вашу работу. Первый такой плагин называется «Checker for Gmail». Он помогает вам с вашей почтой. Каждый раз когда вам будет приходить письмо у вас будет уведомление и будет возможность быстро ознакомиться с письмом в специальной форме.
Очень удобное расширение и точно рекомендую его вам установить.
WhatFont
Этот плагин понравиться всем разработчикам веб сайтов. За счет плагина WhatFont вы можете быстро определить какой шрифт находится на странице. Узнав его название вы быстро сможете найти его в интернете и скачать себе.
Максимально удобный плагин для верстальщиков и дизайнеров.
Fake Filler
Как часто вам приходится заполнять различные формы на сайтах, хотя вам совершенно не охота этого делать? Плагин Fake Filler позволяет заполнить любую форму на сайте за счет фейковых (ненастоящих) данных.
Плагин поможет сократить вам время в будущем.
Wappalyzer
А вам бывало интересно узнать на чем написан сайт? При помощи плагина Wappalyzer вы сможете быстро узнать на чем написан веб сайт и сможете посмотреть какие технологии были использовать при его создании.
Плагин позволяет определить не только язык, но также показывает какие технологии и для чего были использованы на странице.
ColorPick
При помощи плагина ColorPick вы можете быстро обнаружит какой цвет используется на сайте. Плагин позволяет определить любой пиксель на странице и получить его цвет. По итогу он показывает цвет в формате HEX.
Больше интересных новостей
Пишем телеграмм бота на Python / Бот по выбору языка программирования
Начало пути: как стать разработчиком, если вы совсем далеки от айти
Наполняем портфолио: 12 идей для Python-проектов
Легальное хакерство или как заработать хакеру?
Периодически мы обозреваем разные расширения (аддоны) к браузерам. Есть стиль обзора — рассмотреть всё (*), есть стиль — задать тон комментаторам (*), есть обзоры с рассмотрением аддонов для веб-разработки (*), (*). Чтобы не распыляться на всё, рассмотрим только те аддоны, которые управляют внешним видом и интерфейсом браузера. Несмотря на ограничение, это — нужная для всех и весьма обширная группа аддонов. Её легко расклассифицировать по областям действия. Каждый элемент интерфейса требует тщательной разработки и сопровождения, поэтому нет единого аддона, включающего в себя всё, что может захотеться (но и этим пытаются заниматься создатели Тем). Каждый разработчик аддона занимается частью интерфейса, а выбрав несколько аддонов, мы получаем настроенную «под себя» конфигурацию окна. В конце статьи — один из вариантов получившегося вида браузера, а в середине — ссылка на подборку из 15 аддонов, расположенную на сайте Мозиллы, с помощью которых подобное получается.
Есть и такие расширения, которые ведут себя некорректно или неудобны, или слабы, и их действие перекрывают другие. Пользователю не будет интересно их чинить, поэтому с пометками отставим их в сторону. Вдруг, при каких-то обстоятельствах они понадобятся, или пользователь узнает свой и увидит альтернативы, поэтому ссылки на различные не самые слабые варианты тоже оставлены.
И тут как раз вышел Firefox 13, который считают интересной по нововведениям версией. На нём сможем протестировать, насколько хорошо подготовились аддоны к перемене версий, при том, что опыт пользования ими у автора был на 12-й и более ранних версиях.
Намеренно мало внимания уделено полезным, но не использованным в собственной практике аддонам, хотя для полноты картины лучшие их представители, каждый в своей нише, указаны.
На поле брани вышли участники
- Группа «Хедер» — Hide Caption Titlebar Plus
- Подгруппа «Меню» — Menu Editor, Restart Firefox
- «Заголовок окна» (Title Bar) — (часть функций Hide Caption Titlebar Plus)
- «Адресная строка» (Location Bar, Navigation Bar) — Location Bar Enhancer
- «Табы» — Tab Mix Plus, ColorfulTabs, FaviconizeTab
- «Закладки» (Bookmarks Bar) — Smartest Bookmarks Bar
- «Кнопки» (Toolbar) — Toolbar Buttons, (Offline Restart Buttons), Clear Cache Button, (Custom Buttons), (FabTabs)
- «Поиск в Сети» (Search Bar) — (OmniBar)
- Контекстное меню окна — FfChrome
- «Статус-бар» — .
- «Addon Bar» — Minimize Addon-Bar
К аддонам причислена и пара Обоев которые представляют собой оформительские расширения специального вида, потому что они как раз подходят по требованиям статьи и почти не отличаются от аддонов процессом установки.
Те самые 15 аддонов — результат планомерного и субъективного отбора — будут рассмотрены подробно, насколько это вообще возможно при таком количестве, с советами по их использованию, с построением достаточно полной картины заплаток и доработок для вылепливания (субъективно и неидеально) комфортного интерфейса браузера. Насчёт неидеальности — в таком гибком развивающемся инструменте трудно достичь идеала. Применение аддонов — это баланс между комфортом и дискомфортом, который у каждого пользователя свой.
На самом деле, аддонов существует значительно больше, но они имеют разную известность и удобство, по-разному поддерживаются. В процессе пользования (2-3 последних года) выделены те, которые стабильно показывают поддержку новых версий браузеров, удобны в работе, покрывают значительную часть требуемой функциональности. Не исключено, что есть более удобные решения, и лучшие результаты можно получить с другой конфигурацией.
Альтернативное решение — темы
Есть у Firefox, наконец, и такой инструмент индивидуального оформления браузера как Тема. Это — тот же самый аддон, но решающий «в одиночку» как раз те задачи оформления всего и вся, которые мы сейчас пытаемся решить индивидуальной настройкой компонентов. Можно попытаться воспользоваться какой-нибудь темой — ведь тогда не потребуется десятков разных настроек и согласований. Но, несомненно, возникнут похожие проблемы — десятки настроек темы или отсутствие некоторых настроек. Случайная невозможность согласования с другими оформительскими аддонами. Необходимость соглашаться со вкусами автора-художника. Кого-то устроит выбранная тема, а кому-то потребуются десяток-другой подобранных аддонов, чтобы иметь возможность более полного контроля инструментов.
К примеру, в бытность Firefox версии 3.6 я пользовался немного темой, показанной на рисунке справа. Она сжимает высоты всех строк, иконки, но она конфликтовала с другими визуализационными аддонами, поэтому приходилось «радоваться тому, что есть». То есть, вложено много идей, но они несовместимы с другими. Классическое противопоставление фреймворка и библиотеки, борьба между которыми сейчас во фронтенде идёт, скорее, в пользу последних.
Цель статьи
*) перечислить наиболее удобные и функциональные аддоны визуализации каркаса окна браузера;
*) приложить к ссылкам лаконичное описание и не менее краткую инструкцию по настройке в один или несколько практичных видов (потому что это далеко не всегда очевидно);
*) описать совместное использование смежных аддонов, если требуется.В общем-то, показ списка аддонов, уже довольно хорошо автоматизирован для ознакомления и скачивания на сайте аддонов Мозиллы. Есть такое понятие как Подборки Аддонов (или Collections), которые любой авторизованный пользователь браузера может создать самостоятельно, чтобы поделиться с другими отлично подобранным списком. Правда, описание каждого аддона будет чаще всего на английском, а комментарии подборщика коллекции там изображаются довольно неприятным образом, поэтому будем их там избегать. Сделаем коллекцию и мы. Возможно, после некоторого знакомства она будет хорошим путеводителем или прототипом собственной публичной (или закрытой) подборки аддонов там. Будут приведены не все ссылки из статьи, а только самые рекомендуемые и проверенные кандидаты (15 штук) на сегодня; остальные ссылки — только в этой статье.
Имеется и несколько строчек аннотации, где можно описать цели сбора коллекции, но без оформления, рисунков и форматирования. Статья решает этот вопрос: все полезные мысли и рисунки приведены здесь. А для скачивания аддонов и ознакомления с их описаниями можно воспользоваться как прямыми ссылками из статьи, так и ссылками из собранной коллекции Compact Layout Addons Fx13
Далее по очереди рассмотрены каждый аддон подборки и некоторые вспомогательные, для удобства управления.Для слежения за ходом матча
-
— список установленных расширений и важные изменения в настройках страницы about:config;
- аддон FEBE — средство архивирования установленных в браузере аддонов (позволяет восстанавливать конфигурацию без интернета).
- аддон No XPI Install Delay — устраняет задержку «на раздумывание» перед установкой аддона. Это же самое делает какая-то настройка в about:config .
Что не вошло в обзор
С не лучшей стороны себя показал Personal Titlebar (на версии 11-12) — создавал изменения настроек, не отменяющиеся после своего удаления и «вешал» управление конфигурацией окна после «Настроить. ». (Не работает в Линуксе.) Функциональность его — хорошая (кроме переноса заголовка на верхнюю строку окна, может размещать там кнопки, меню и выбирать количество элементов меню, не показывать «Правка», например), если бы не ошибки в реализации. Возможно, в будущем он исправится. Существуют и подобные аддоны для Win-систем, переносящие заголовок страницы на верхнюю строку окна, но все они почему-то имели недостаточную совместимость с Hide Caption Titlebar Plus, который справился со всей работой, а работу по формированию меню взял на себя Menu Editor.
Существует множество узкоспециализированных аддонов: например, кнопка Undo Closed Tabs Button. Их, думается, нет смысла перечислять без опыта пользования. Поэтому ожидаю отзывы о других визуальных элементах от пользователей их в комментариях.
«Хедер»
Hide Caption Titlebar Plus. Ко всей верхней части окна браузера относится расширение, имеющее лаконичный для своей силы набор настроек — всего лишь 3 небольшие страницы. Но надо видеть, как оно мощно преобразовывает вид верха окна этими настройками. Расширение имеет статус экспериментального, и действительно, для разных систем Windows оно имеет разные внешние виды при тех же настройках. Взамен мощности, имеем некую «волатильность». Работает во всех ОС и решает ряд вопросов, над которыми традиционно «трудятся» несколько расширений.
* Размещение заголовка в верхней строчке окна (тайтл-баре);
* Меню и некоторые кнопки при желании — всплывает по наведению на «фирменную» кнопку браузера (или по Alt);
* Обесцвечивание кнопки браузера;
* Уменьшение кнопки браузера (7 вариантов), но не во всех настройках и системах;
* уменьшение высот табов, поля адреса, зазоров между барами;
* задвигание других баров в тайтл-бар (Win OS).
Не все желаемые варианты расположения доступны, поэтому полностью и кроссбраузерно вопрос размещения баров с использованием тайтл-бара не решён.
UPD: проверено, в Убунте 12.04 Fx13 этот аддон работает даже качественнее, чем в WinXP и Win7 Fx12. Скриншот в комментарии.
Menu Editor. Простое и исчерпывающее конфигурирование меню. Оставляем нужное число горизонтальных пунктов меню и разбрасываем используемые команды по ним. Например, таких всего 3 пункта. В средний список поместили «О Firefox» — единственную полезную команду из пункта «Помощь». Остальные тоже распределили по смыслу, неиспользуемые скрыли, но доступ возможен через настройки. С коротким по ширине меню без лишних элементов значительно проще работать.
Restart Firefox. Скромная, но нужная команда рестарта требуется где-нибудь, хотя бы в меню, если мы имеем более одного открытого окна и хотим перезапустить браузер, чтобы применить или отменить действие аддона. Закрывание окна — это потеря полной сессии с несколькими окнами, рестарт — наиболее оптимальное, что нужно (при настройке старта «открывать прежние вкладки и окна»). Если кнопки или команды рестарта нет — можно обойтись снятием задачи в Менеджере Задач Windows, но это, конечно, «некультурное» аварийное решение проблемы. Или запоминанием сессии в менеджере сессий. Или отысканием нужной кнопки на панели аддонов. Но культурнее всего — просто иметь команду рестарта в меню, одну-единственную строчку.
Адресная строка
Исторически сложилось так, что табы — самое первое, за что серьёзно взялись в оформлении интерфейсов браузера. Они имели привычку расти до десятков штук, и надо было как-то управляться. На фоне ряда мелких улучшений лидерство захватил знаменитый аддон "Tab Mix Plus". Его строят, видимо, не меньшие Гераклы, чем строители различных тем. Очень обширное меню и правила поведения. Управление кликами мыши по табам, поведение появления табов, некоторые общие вопросы типа того, что открывать в новой вкладке. В представлении аддон не нуждается, конкурентов ему не видно. Имеет экспорт-импорт своих многочисленных настроек.
ColorfulTabs. Расцветка табов в разные цвета. Требует небольшой подгонки начальных настроек, чтобы работать было комфортно. Удобно неактивные табы сделать более бледными. FabTabs — возможный заменитель, основанный на взятии скриншота части страницы (как на оставшемся в версии Fx3.6 ChromaTabs Plus).
FaviconizeTab. Уменьшает ширину таба до размеров иконы для тех сайтов, маска адреса которых записана в список, или для тех, по которым кликнули специальным образом. Удобно свернуть табы от поисковиков и подобные, не имеющие индивидуального характера.
«Кнопки»
В тулбаре живут не только кнопки, но и разные спадающие меню, переключатели и даже элементы украшений. Но наиболее типичные представители тулбара — кнопки. Инструмент размещения и перетасовки кнопок встроен в браузер. Аддоны ингода занимаются тем, что расширяют ареал распространения кнопок по окну так, что их становится возможным ставить в неожиданные места, например, в заголовок окна.
От кнопок не всегда требуется компактность. Иногда, для лёгкого на них попадания — наоборот, умеренная протяжённость. Но всегда приятными будут настройки: устраняемость кнопки из окна, программируемость меню, другие расширенные настройки.
Offline Restart Buttons — поступает совсем бесхитростно, даже проще, чем хотелось бы. Так же, как полезна команда меню для рестарта браузера, так бывает полезна кнопка рестарта, но ещё полезнее — кнопка оффлайнового просмотра. Ради второй кнопки это расширение стоит использовать, но довольно плохо, что рядом (справа) находится неудаляемая кнопка с необратимыми действиями (рестарт). Было бы отлично, если б она просто отключалась в настройках, или это были бы 2 разных аддона. Тем более, что рестарт требуется довольно редко, и команды меню для него — вполне достаточно. +Подсказали, что есть Work Offline.
Clear Cache Button. Полезна для разработки, когда требуется часто очищать кеш. Впрочем, есть Ctrl-Shift-Del, поэтому, пользоваться кнопкой или клавиатурой — дело привычки и желания тратить место рабочее место экрана на элементы управления.
Speed Dial. Вместо домашней страницы, как у 10-й Опреры или более ранней, показываются миниатюры популярных для пользователя сайтов, которые он сам устанавливает указанием ссылок. Возможно несколько страниц, переменное число строк и столбцов табов, перетаскивание их в удобные места расположения, расцветка фона страниц. Тоже классика, не нуждающаяся в представлении.
• FfChrome. Кастомизация и сворачивание контекстного меню. У него имеется 2 состояния: компактное («как в Хроме») и развёрнутое, которое проявится, если подержать 2 секунды мышь над одним из пунктов.
Конфигурируются эти 2 состояния меню из огромного списка возможных пунктов — так стандартных, так и созданных другими аддонами, в удобные для себя пару размеров — отличный мощный подход к настройке.
Addon Bar
• Minimize Addon-Bar — ответ на поползновения программ перегрузить интерфейс кнопками. С помощью него аддон-бар превращается в выдвижную полку от рабочего стола. Имеющиеся настройки не самые удобные, но позволяют сделать необходимую автоматику — поместить поле аддона в правом нижнем углу прямо над окном, с полупрозрачным цветным фоном, иметь 2 состояния — выдвинут и задвинут. В любом из них можно нажимать на видимые кнопки, а сама панель почти не мешает смотреть на окно. (При желании, 2 кликами она убирается с экрана штатными средствами.)
Ещё, кое-что не самое удобное, но прогрессивное, он делает со строкой поиска — вешает тоже над окном чуть выше нижнего края. Тем не менее, заслуживает пользования.
«Внешний вид»
Раскраской поля битвы занимаются специальные аддоны — стили Внешнего Вида, или Обои (Personas). От них, на самом деле, если для дела, требуется монотонность, а большинство из них отличается рисунками и периодическими градиентами, поэтому не всегда подходит под выбранные шрифты и цвета управляющих элементов. К тому же, имеют привычку менять цвета текстов и фонов управляющих элементов, поэтому их можно подбирать под реализованную идею. Если наоборот — они будут диктовать выбор других аддонов и настроек.
Они легко подбираются из списков на страницах загрузки простым наведением мыши. При этом полезно вывести на экран статус-бар или аддон-бар и меню-бар, чтобы оценить, качественно ли выглядят с этим стилем надписи. Переключение между установленными обоями тоже крайне простое и быстрое, без перезагрузки браузера (about:addons, далее «Внешний вид»).
Поскольку выбор обоев в огромной степени зависит от вкусов, а характеристику можно дать только после времени использования, в списке приведены только одни (обои) оранжеватого цвета (Soft Drawing Paper), с неброской текстурой и с хорошо сбалансированными стилями текста и подложек.
Soft Aqua — ещё один пример сбалансированного решения технических задач для обоев (без текстуры, с очень плавным градиентом, без нарушений цветов текста и фона).
• Некоторые небольшие аддоны (не уровня тем) замещают или совмещают стили внешнего вида, они тоже участвуют в описании. Включённый в список Aero Window Title работает только в Win 7/Vista и делает прозрачный размытый фон под заголовком и под табами. Получается довольно оригинальная бледная расцветка неактивных табов, повышенная яркость активного. При совмещении с Обоями (проявится после перезапуска браузера, сам браузер о желательности перезапуска не предупредит) происходит наложение эффектов подложки и прозрачности, что создаёт ещё более интересную картину.
Пример действия всех этих аддонов на браузер Fx12 в системе WinXP:
На рисунке отмечен результат работы 9 из них: Menu Editor, Hide Caption Titlebar Plus, Location Bar Enhancer, Tab Mix Plus, ColorfulTabs, FaviconizeTab, FfChrome, Minimize Addon-Bar, Soft Drawing Paper. Это — один из крайне разнообразных вариантов настройки всех участников с целью использования рабочей площади каркаса окна. Регулируются плотность, расцветка и расположение элементов, поэтому неверно было бы утверждать, что получилась «Тема». Получилась одна из возможных «тем», без программирования, одними настройками, часть из которых имеется по умолчанию.
Познавательное
Большинство людей используют свой браузер для развлечений, а другие для работы. Вам не обязательно мириться с однотипными страницами всю жизнь. Любой из существующих браузеров можно изменить и настроить под себя. Это как поменять цвет волос, только легче.
Если вы устали от обычного вида вашего браузера или хотите получить самую популярную и яркую тему для вашего обозревателя, то мы вам в этом поможем. Написанное ниже руководство по изменению обложки браузера для Apple’s Safari, Mozilla Firefox, Microsoft Edge и Google Chrome.
Персонализация Google Chrome
Откройте меню данного браузера (три точки справа сверху) и зайдите в настройки. Затем выберите пункт “темы”, где также написано “открыть Веб-магазин Chrome”. Тут вы сможете сменить простой светло-голубой тон вашего обозревателя на более продуманную и яркую альтернативу. Магазин предлагает темы от Google, либо обложки, сделанные креативными пользователями. Для инсталляции необходимо лишь нажать на кнопку оболочки, которая вам подходит.
Когда вы примените новую тему для Chrome, возле кнопки “темы” в настройках, у вас появится поле для возвращения вида по умолчанию. Если вы нажмёте её, вернётся прежний голубой цвет для страниц.
Ещё одно изменение внешнего вида вашего обозревателя, менее существенное, это включение или выключение домашней страницы на панели инструментов. Переключатель находится сразу под кнопкой “темы”.
Есть ещё несколько способов изменить внешний вид Google Chrome. Вы можете выбрать какое дополнение или приложение будет отображено на панели инструментов. Эти и другие настройки, вы можете найти в меню > другие инструменты > расширения. Здесь также можно включить или выключить приложение, с помощью переключателя. Некоторые настройки доступны при правом нажатии кнопки мыши на иконке расширения, возле адресной строки.
Кроме этого, для удобности есть возможность в хроме перетаскивать иконки приложений, а также закладки. Для отображения панели закладок, необходимо зайти в меню, затем “настройки” и под настройками домашней страницы будет переключатель. Спрятать её можно кликнув правой кнопкой мыши на панели закладок, и сняв галочку с опции “показать панель закладок”.
Персонализация Mozilla Firefox
Откройте главное меню (кнопка с тремя линиями справа вверху) и выберите пункт “персонализация”. Тут вы можете поменять кнопки для быстрого доступа на панели инструментов. Это можно сделать перетаскиванием иконок, которые доступны в списке. Таким самым образом можно избавляться от ненужных иконок — просто перетащите кнопку назад в список. Если вам не нравятся итоговые изменения, всегда можно вернуть всё по умолчанию (кнопка справа внизу).
Для того чтобы радикально изменить вид вашего браузера вам необходимо выбрать “настройки” в главном меню. Затем, в появившемся окне внизу слева будет пункт “расширения и темы”. Здесь вы сможете вместо обычного светло цвета вашего браузера, подобрать более тёмные тона. У вас есть возможность изменить цвет панели инструментов, кнопки, меню браузера, фон новой вкладки и прочее.
Если вам будет недостаточно обложек, вы можете “найти больше дополнений” в самом низу страницы. Здесь для вас доступны тысячи разных тем для вашего обозревателя. Каждый день список пополняется всё новыми оболочками от Mozilla и активных пользователей данного браузера.
Персонализация Apple Safari
На операционной система macOS в Safari, необходимо выбрать в меню “вид” настройку панели инструментов. Выберите настроить панель инструментов. Появится новая вкладка, на которой вы сможете добавить или убрать кнопки с панели инструментов. Любое дополнение, которое вы добавили, может иметь свою персональную кнопку.
Вы также имеете возможность переставлять местами кнопки на панели инструментов. Внизу окна вы найдёте поле, благодаря которому Safari можно вернуть его оригинальный вид.
Если у вас новая версия MacBook Pro, то для вас также доступна персонализация сенсорных кнопок над вашей клавиатурой. Для этого необходимо зайти в то же самое меню “вид” и выбрать настройку сенсорной панели.
Что касается персонализации внешнего вида браузера Safari, то Apple не предлагает слишком много вариантов. Вам придётся смириться с тем, что американская компания предлагает для своих пользователей по ходу обновлений ОС.
Персонализация Microsoft Edge
Новый браузер от Microsoft на основе Chrome, всё еще на стадии начального развития. Однако Edge уже способен предложить несколько персональных настроек. Нажмите на кнопку меню (три точки справа сверху), выберите настройки и “вид”. Здесь вы сможете выбрать между светлой, тёмной и стандартной (по умолчанию) темой. У вас также будет возможность выбрать наличие домашней страницы на панели инструментов.
Пока что последние версии браузера от Microsoft на платформе Chrome не предлагают подобрать другую оболочку. Однако в скором будущем ожидается расширение возможностей в этом направлении. Разработчики Edge в крайнем случае смогут интегрировать расширения Google Chrome.
Если вы добавляете приложение в данном браузере, то его кнопка сразу появляется на панели инструментов. Также есть возможность переместить иконку нового дополнения в главное меню. Это делается нажатием правой кнопки мыши по иконке, затем выбираете соответствующее действие. Таким образом вы экономите место на панели инструментов, а расширение остаётся доступным.
Перемещать кнопки для дополнений вы также можете прямо на панели инструментов. Для этого необходимо левым кликом мышки перетягивать иконку в любое удобное место. Таким образом, также можно переместить приложение прямо в главное меню.
За последние несколько месяцев мы внесли множество улучшений в движок рендеринга Microsoft Edge (EdgeHTML), делая особый акцент на совместимости с современными браузерами и соответствии новым и грядущим стандартам. Помимо того, что EdgeHTML лежит в основе браузера Microsoft Edge, он также доступен для приложений на Universal Windows Platform (UWP) через элемент управления WebView. Сегодня мы хотим рассказать, как можно использовать WebView для создания своего браузера в Windows 10.
Используя стандартные веб-технологии, включая JavaScript, HTML и CSS, мы создали простое UWP-приложение, которое содержит внутри WebView и реализует базовую функциональность: навигацию и работу с избранным. Подобные приемы могут быть использованы в любом UWP-приложении для прозрачной интеграции веб-контента.
В основе нашего примера лежит мощный элемент управления WebView. Помимо комплексного набора API, данный элемент также позволяет преодолеть некоторые ограничения, присущие iframe, например, отслеживание фреймов (когда некоторый сайт меняет свое поведение в случае выполнения внутри iframe) и сложность определения загрузки документа. В дополнение x-ms-webview, — так WebView задается в HTML, — дает доступ к функциональности, не доступной в iframe, в частности, улучшенный доступ к локальному контенту и возможности делать снимки содержимого. Когда вы используете элемент управления WebView, вы получаете тот же самый движок, что и в Microsoft Edge.
Создаем браузер
Как было написано выше, браузер базируется на элементе управления WebView для HTML, а для создания и оживления пользовательского интерфейса в основном используется JavaScript. Проект создан в Visual Studio 2015 и представляет собой универсальное Windows-приложение на JavaScript.
Помимо JavaScript, мы также использовали немного HTML и CSS, а также некоторое количество строк кода на C++ для поддержки комбинаций клавиш, но это не требуется в простом случае.
Также мы пользуемся новыми возможностями нового ECMAScript 2015 (ES2015), поддерживаемыми в Chakra, JavaScript-движке, работающем в Microsoft Edge и элементе управления WebView. ES2015 позволил нам сократить количество генерируемого и шаблонного кода, тем самым существенно упростив реализацию идеи. Мы использовали следующие возможности ES2015 при создании приложения: Array.from(), Array.prototype.find(), arrow functions, method properties, const, for-of, let, Map, Object.assign(), Promises, property shorthands, Proxies, spread operator, String.prototype.includes(), String.prototype.startsWith(), Symbols, template strings и Unicode code point escapes.
Интерфейс пользователя
Пользовательский интерфейс включает следующие десять компонентов:
Дополнительная функциональность
Мы также реализовали несколько дополнительных возможностей, чтобы сделать работу с браузером еще более приятной:
Использование WebView
Введенный для JavaScript-приложений в Windows 8.1 элемент управления WebView, иногда также упоминаемый по имени тега x-ms-webview, позволяет хостить веб-контент внутри вашего Windows-приложения. Он доступен как для HTML, так и для XAML.Для начала работы достаточно разместить соответствующий элемент в коде страницы.
Разработка браузера
Мы будем использовать 15 различных API x-ms-webview. Все кроме двух из них управляют навигацией между страницами с некотором смысле. Давайте посмотрим, как можно использовать данные интерфейсы для создания различных элементов UI.
Управление кнопками назад и вперед
Когда вы нажимаете кнопку назад, браузер возвращает предыдущую страницу из истории браузера, если она доступна. Аналогично, когда вы нажимаете кнопку вперед, браузер возвращает последующую страницу из истории, если она также доступна. Для реализации подобной логики мы используем методы goBack() и goForward(), соответственно. Данные функции автоматически осуществят навигацию на корректную страницу из стека навигации.
После перехода на некоторую страницу, мы также обновляем текущее состояние кнопок, чтобы предотвратить «возможность» навигации, когда мы достигаем одного из концов стека навигации. Другими словами, мы отключаем кнопки навигации вперед или назад, проверяя свойства canGoBack или canGoForward на равенство false.
Управление кнопками обновления и остановки
Кнопки обновления и остановки слегка отличаются от остальных компонент панели навигации тем, что они используют одно и то же место в UI. Когда страница загружается, нажатие на кнопку остановит загрузку, спрячет «кольцо прогресса» и отобразит иконку обновления. И наоборот, когда страница загружена, нажатие на кнопку запустит обновление страницы и (в другой части кода) отобразит иконку остановки. Мы используем методы refresh() или stop() в зависимости от текущих условий.
Управление адресной строкой
В целом, реализация адресной строки может быть очень простой. Когда адрес URL введен в текстовое поле, нажатие Enter вызовет метод navigate(), используя содержимое input-элемента адресной строки в качестве параметра.
Однако современные браузеры пошли сильно дальше и внедряют дополнительную функциональность для удобства пользователей. Это добавляет некоторую сложность в реализации – и тут все зависит от сценариев, которые вы хотите поддержать.
Отображение favicon
Мы используем метод invokeScriptAsync(), чтобы вставить внутрь элемента управления WebView скрипт, который вернет строку в случае успеха. Наш скрипт ищет внутри страницы все элементы с link-теком, проверяет, если rel-атрибут содержит слово “icon”, и в случае совпадения возвращает значение “href”-атрибута назад в приложение.
Как упомянуто выше, мы используем в нашем коде возможности из новой спецификации ES2015. Вы могли заметить использование стрелочной нотации во многих примерах выше, а также ряд других возможностей. Вставляемый скрипт – это отличный пример улучшения кода, достигаемого за счет поддержки ES2015.
Поддержка комбинаций клавиш
Чтобы определить нажатие горячих клавиш для выполнения тех или иных действий, например, чтобы при нажатии комбинации Ctrl+L выделять адресную строку или по F11 переключаться в полноэкранный режим, нам нужно вставить еще один скрипт в WebView. Для этого мы используем метод invokeScriptAsync(), который мы уже упоминали выше. Однако, нам нужно как-то сообщать назад в слой приложения, когда те или иные клавиши нажаты.
С помощью метода addWebAllowedObject(), мы можем выставить для инжектируемого кода метод, через который можно будет передавать нажимаемые клавиши в слой приложения на JavaScript. Также важно понимать, что в Windows 10, элемент управления WebView выполняется в отдельном потоке. Нам нужно создать диспетчер, который будет передавать события в поток UI, чтобы слой приложения мог их обрабатывать.
Внешний вид браузера
Теперь, когда мы разобрались с ключевыми API WebView, давайте немного улучшим внешний вид нашего браузера.
Брендирование заголовка
Используя API Windows Runtime, мы можем поменять свойство ApplicationView.TitleBar, чтобы настроить цветовую палитру все компонентов заголовка приложения. В нашем браузере при загрузке приложения мы меняем цвета так, чтобы они соответствовали панели навигации. Мы также обновляем цвета при открытии меню, чтобы соответствовать фону меню. Каждый цвет нужно задавать как объект с RGBA свойствами. Для удобства мы создали вспомогательную функцию, генерирующую нужный формат из шестнадцатеричной строковой записи.
Прочие возможности
Индикация прогресса, а также меню настроек и избранного используют CSS transitions для анимации. Из меню настроек временные веб-данные можно очистить, используя метод clearTemporaryWebDataAsync(). А в меню избранного отображаемый список хранится в JSON-файле в корневой папке перемещаемого хранилища данных приложения.
Исходный код
Полный пример кода доступен в нашем репозитарии на GitHub. Вы можете также попробовать демонстрационный браузер, установив соответствующее приложение из Windows Store, или развернув приложение из проекта для Visual Studio.
Создайте свое приложение для Windows 10
С помощью WebView мы смогли создать простой браузер, используя веб-стандарты, буквально за день. Интересно, что вы сможете создать для Windows 10?
Привет, друзья. У тёмных тем оформления интерфейса программного обеспечения множество приверженцев. Более того, нынче это очень модный тренд: тёмную тему оформления нативно предусматривают современные операционные системы, практически все популярные браузеры и многие программы. Возможность выбора тёмного оформления даже есть на некоторых сайтах, из популярных это, например, YouTube и Facebook. Тёмный режим, он же ночной режим оформления интерфейса ПО – дело не только вкуса, этот режим бережёт наше зрение и способствует экономии заряда батареи на мобильных и портативных устройствах. Как сделать тёмный режим браузера для любого сайта в Интернете? Чтобы все сайты отображались в тёмном режиме, вне зависимости от того, предусматривает ли сам сайт настройку своего интерфейса?
Тёмный режим браузера
Друзья, тёмный режим браузера на сайтах реализуется за счёт инверсии цветов фонового и текстового оформления.
Разная реализация этого режима может предусматривать некоторые отличия в инвертировании цветов. И где-то какие-то элементы сайтов полностью окрашиваются в чёрный цвет, где-то какие-то остаются белыми островками.
Как упоминалось, практически все популярные браузеры предусматривают тёмную тему оформления для своего интерфейса, но отображать страницы сайтов в тёмном режиме браузера могут пока что лишь немногие. Нативно такие возможности на сегодняшний день предусматривают веб-обозреватели Chrome и Opera GX. Однако в любой браузер с поддержкой контента из магазинов Chrome и Firefox можно внедрить расширение, обеспечивающее тёмный режим для сайтов. Причём такие расширения могут быть с разной функциональностью. Но, давайте об всём подробнее: как включить нативный тёмный режим браузера в Chrome и Opera GX, и что за расширения можно в других браузерах использовать?
Google Chrome
Веб-обозреватель от компании Google штатно предусматривает тёмный режим браузера для сайтов, но пока что только в числе своих экспериментальных функций. Это значит, что по итогу тестирования этой функции она может как стать частью обычного функционала браузера, так и исчезнуть вовсе, если не оправдает ожиданий разработчиков. Как включить такую экспериментальную функцию Chrome, мы уже рассматривали на страницах сайта, кому интересно, смотрите статью «Тёмный режим для сайтов в окне Google Chrome».
Opera GX
Создатели Opera пока что тёмный режим браузера для сайтов не включили в функционал обычной Оперы, но на условиях бета-тестирования внедрили его в кастомную версию Оперы для геймеров – браузер Opera GX. Кто не знает, друзья, Opera GX – это крутой, стильный браузер, заточенный под игры, с массой различных фишек. Можете посмотреть по нему детальный обзор «Браузер для геймеров Opera GX: обзор». И вот одной из этих фишек недавно стала возможность включения тёмного режима браузера для сайтов. Включит его можно либо в общих настройках Opera GX, либо в настройках персонализации на стартовой странице.
Друзья, у обоих браузеров реализация тёмного режима браузера для сайтов минималистичная, мы можем только включить и выключить этот режим для всех подряд сайтов. А в Chrome для этого ещё и нужно заходить в экспериментальные настройки и перезапускать браузер. Более удобные в использовании, более гибкие в плане применения и даже настраиваемые тёмные режимы для сайтов можно реализовать с помощью специальных расширений для того же Google Chrome, Mozilla Firefox и прочих браузеров, которые поддерживают установку расширений из магазинов этих двух, а это, в частности, Opera, Яндекс.Браузер, Microsoft Edge.
Chrome-расширения
В магазине Google Chrome много расширений для включения тёмного режима браузера для сайтов, все они предлагают разную его функциональность – от простой до настраиваемой реализации. Например, простое расширение Dark Theme for all sites от elimirshetipalov являет собой встраиваемую на панель инструментов кнопку включения/выключения тёмного режима. Это кнопка включает и отключает инверсию для всех сайтов. По сути, это то же, что и тёмный режим браузера, экспериментально реализованный в самом Google Chrome, только более удобный для активации/деактивации.
А вот расширение Night Eye от nighteye.app предлагает нам настраиваемый тёмный режим браузера для сайтов. Настраиваемый и в части оформления самого режима, и в части его применения, он может включаться по графику. При активном расширении по умолчанию все сайты отображаются в тёмном режиме браузера, но при необходимости на панели расширения можем отключить этот режим для всех сайтов кнопкой включения/выключения внизу. И можем отключить его для отдельных сайтов кнопкой активации режима «Normal» - режима обычного отображения веб-страниц, а потом при необходимости снова включить тёмный режим - режим «Dark». И таким образом сможем сами для себя определять, где мы хотим видеть инверсию цветов, а где - нет.
И есть ещё у Night Eye режим «Filtered» - это обычное отображение с возможностью применения цветовых фильтров. «Filtered» и тёмный режим «Dark» - это два настраиваемых режима, для которых мы сможем дополнительно отрегулировать яркость, контраст, блеклость, насыщенность, голубой спектр. И все эти настройки сможем применить как к отдельным сайтам, так и ко всем.
Ну и реально классная фишка этого расширения - упомянутая возможность настройки активации тёмного режима браузера для сайтов по графику. На панели Night Eye жмём кнопку шестерёнки, в графе «Schedule» ставим значение «On» и указываем время суток, когда мы хотим, чтобы активировался тёмный режим. По умолчанию здесь выбрано вечернее и ночное время с 20.00 вечера и до 8.00 утра.
Firefox-расширения
В магазине браузера Mozilla Firefox более скромный ассортимент расширений, чем у Chrome, но некоторые решения для реализации тёмного режима браузера для сайтов есть. Например, расширение Dark Mode (WebExtension) от Bernard , это обычный переключатель в инверсию всех подряд сайтов.
А расширение Dark Reader от Alexander Shutau – продвинутое, с возможностью применения инверсии к отдельным сайтам, с возможностью применения в любом режиме цветовых фильтров сепии и оттенков серого, с возможностью настройки яркости и контрастности.
И также Dark Reader предусматривает возможность активации тёмного режима браузера для сайтов по графику. На панели расширения в его меню есть блок опций «Автоматизация», активируем его и указываем время суток, когда мы хотим, чтобы автоматически включался тёмный режим.
Либо же можем указать свою широту и долготу для автоматического определения вечернего и ночного времени суток. А в Windows 10 мы ещё и можем использовать системную цветовую схему вместе с функцией ночного режима.
Читайте также: