Как создать свою собственную тему для Google Chrome

Вы когда-нибудь хотели настроить внешний вид своего веб-браузера? Для этого можно использовать темы для Google Chrome. В Chrome Theme Store может быть огромный выбор вариантов, от космической тематики до автомобилей и красивых пейзажей, но что, если ни один из эти параметры вполне то, что вам нужно, или если вы хотите настроить Chrome так, чтобы вместо этого использовалась одна из ваших фотографий в качестве фона? Что ж, к счастью, вы можете это сделать.

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

Простой встроенный инструмент Chrome

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

Щелкните значок карандаша, чтобы открыть редактор темы.

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

Выберите фоновое изображение для страницы новой вкладки.

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

Выберите предустановленную цветовую схему.

Если ни одна из предустановленных цветовых схем не совсем то, что вам нужно, опция цвета в верхнем левом углу позволяет вам выбрать свою собственную цветовую схему с полным спектром вариантов цвета на выбор. Чтобы выбрать цвет, сначала нажмите на верхний левый символ, а затем используйте всплывающее окно, чтобы выбрать свой цвет. Отрегулируйте перекрестие в цветовом спектре, чтобы получить свой оттенок, и черную стрелку в правой части окна, чтобы выбрать яркость тона. Если вы не знаете, как это работает - чем дальше вы перемещаете черную стрелку вверх или вниз, тем светлее или темнее становится ваш цвет. Для более насыщенных оттенков установите перекрестье вверху и стрелку посередине. Для более светлых цветов переместите перекрестие немного ниже и стрелку вверх.

Выбрав нужный цвет, нажмите «Добавить к другим цветам» в правом нижнем углу. Затем выберите свой собственный цвет из списка «Пользовательские цвета» в левом нижнем углу и нажмите «ОК», чтобы применить. Если вы выбираете собственную цветовую схему, вы можете выбрать только один цвет, Chrome выберет второй похожий цвет, чтобы завершить тему тем, что, по его мнению, лучше всего подходит.

Совет: Chrome почти всегда предполагает, что выбранный вами цвет является более темным из двух цветов темы, и выберет более светлый второй оттенок. Выбирайте соответственно!

Выберите индивидуальную цветовую схему.

Когда вы будете довольны своим фоновым изображением и набором цветов, нажмите «Готово», чтобы сохранить настраиваемую тему, и все готово!

Простые сторонние темы

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

Прежде всего, вам нужно перейти на сайт ThemeBeta. Вы можете просматривать темы, отправленные пользователями, на их домашняя страница, или вы можете сразу перейти к их страница создателя темы чтобы начать работу со своим. Первый шаг после того, как вы войдете в создатель темы, - это выбрать фоновое изображение. Щелкните «1. Загрузить изображение », а затем загрузить изображение со своего жесткого диска. Это изображение станет основой вашей темы и будет фоновым изображением на странице новой вкладки.

Совет: любое загружаемое изображение должно быть в формате PNG или JPG, поскольку это единственные поддерживаемые форматы. Используйте онлайн-конвертер, если ваше изображение отличается.

Если загруженное изображение выглядит некорректно, возможно, оно слишком увеличено или имеет полосы по бокам или сверху - попробуйте изменить параметры «Фоновое изображение». Соответственно настраивают выравнивание по горизонтали, выравнивание по вертикали, если изображение повторяется, если оно слишком маленький для экрана, способ масштабирования изображения по размеру экрана и ручная настройка масштабирования. Проверяйте варианты, пока не найдете то, что вам нравится!

Настройте расположение фонового изображения.

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

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

Расширенная конфигурация

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

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

Совет: NTP означает «Страница новой вкладки», параметры, начинающиеся с этого акронима, присутствуют только на странице новой вкладки, другие отображаются на других страницах.

  • «Фон NTP» настраивает основной фон, если вы импортировали изображение ранее, оно уже будет «загружено».
  • «Фрейм» настраивает пользовательский интерфейс, исключая список вкладок, панель поиска и панель закладок.
  • «Панель инструментов» настраивает активную вкладку, панель закладок и область вокруг панели поиска.
  • «Фон вкладки» настраивает цвет фона для неактивных вкладок.
  • «Наложение рамки» позволяет вам настроить второе изображение, которое накладывается на изображение в «Рамке».
  • «NTP Attribution» добавляет изображение в нижний левый угол страницы новой вкладки, как правило, для водяных знаков.

Совет. Если вы загрузили изображение и вам не нравится его внешний вид, вы можете удалить его, нажав кнопку «X» рядом с соответствующим маркером «Загружено». Если при загрузке изображения изменился цвет фона для этого элемента, вы можете либо вернуть его вручную, либо снова щелкнуть «Создать цвета» на вкладке «Основные», чтобы сбросить цветовую схему.

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

Щелкните поле, чтобы открыть палитру цветов для соответствующих элементов.
  • «Панель инструментов» настраивает цвет фона метки атрибуции ThemeBeta в левом нижнем углу страницы новой вкладки.
  • «Текст вкладки» настраивает цвет текста на текущей активной вкладке в списке вкладок. Он также устанавливает цвет текста атрибуции ThemeBeta в нижнем левом углу страницы новой вкладки.
  • «Фон вкладки текста» настраивает цвет текста на неактивных вкладках в списке вкладок.
  • «Текст закладки» настраивает цвет текста элементов на панели закладок.
  • «NTP Text» настраивает цвет текста или рекомендуемых / обычных ссылок в центре страницы.
  • «NTP Link» не действует.
  • «Кнопки управления» настраивает цвет кнопок свертывания, разворачивания и закрытия в правом верхнем углу.
  • «Кнопки» настраивают цвет кнопок вперед, назад, перезагрузки и домой.

После того, как вы настроили все расширенные параметры так, как вам нужно, вы готовы приступить к процессу установки.

Установка сторонней темы

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

Сторонние файлы CRX нельзя установить в Chrome.

Чтобы обойти это, перейдите на вкладку «Упаковать» и нажмите «Упаковать и загрузить Zip-файл».

Нажмите кнопку «Упаковать и загрузить Zip-файл» на вкладке «Упаковать».

После загрузки zip-файла извлеките файлы и сохраните их на жестком диске. Дважды щелкните загруженный файл и выберите «Извлечь» в верхней части окна просмотра файлов. Вам нужно будет выбрать, куда извлекать файлы. Запомните, где вы их сохраняете, чтобы вам было проще загрузить их снова.

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

Извлеките файлы из ZIP-файла и сохраните их на жестком диске.

Следующим шагом будет страница расширений Chrome. Вы можете получить к нему доступ, щелкнув три точки в правом верхнем углу, в разделе «Дополнительные инструменты», затем «Расширения», или вы можете нажать здесь.

Щелкните три точки, затем Дополнительные инструменты> Расширения.

Когда вы находитесь в меню расширений, в правом верхнем углу страницы появляется ползунок с пометкой «Режим разработчика». Включите это. После включения режима разработчика в верхнем левом углу должны появиться три кнопки. Тот, который вам нужен, - это «Загрузить без упаковки». Нажмите «Загрузить распакованный» и импортируйте папку, которую вы извлекли из zip-файла ранее.

Включите режим разработчика и нажмите «Загрузить распакованный».

Совет: вы хотите импортировать родительскую папку, а не папку с изображениями, которую она содержит. Если вы не переименовывали его ранее, он будет называться примерно так: theme1234567890.

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

Не скрывайте уведомление о подтверждении, пока не убедитесь, что результат вас устраивает!

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