Как создать тему для Google Chrome? Создать тему для Google Chrome Как поставить тему для google chrome

Темы для Google Chrome – это своеобразное оформление браузера. Те пользователи, у которых высоко развит эстетический вкус, вряд ли будут удовлетворены скучным изначальным оформлением, которое предлагают разработчики браузера. Изменить ситуацию очень просто, и справится с такой задачей даже новичок.

Где найти темы для Хром

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

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

Как установить темы для браузера

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

Кликнув на название раздела, пользователь может заметить, что появилось две подкатегории. Первая из них носит название От Google, вторая – От художников. Выбираем ту тему, которая понравилась и кликаем Бесплатно. Ждем некоторое время, после чего появится сообщение о том, что оформление добавлено в браузер. Кроме того, новая тема сразу же порадует вас веселой картинкой.

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

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

Из этого урока вы узнаете как можно изменить тему оформления в браузере Google Chrome.

В прошлом уроке я рассказал вам как устанавливать расширения в браузер Гугл Хром . В этом уроке, как и обещал, мы рассмотрим вопрос - как изменить тему оформления для браузера google chrome. Приступим.

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

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

После того как вы определились с темой вам необходимо просто навести курсор мыши на саму тему и нажать на кнопку "Бесплатно".

После того как вы нажмете на кнопку "Бесплатно", начнется процесс установки и ваш браузер немного преобразится в соответствии с выбранной темой. Вверху появится кнопка для отмены установки, если вам она не понравится.

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

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

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

В этом уроке я покажу где можно узнать версию браузера Mozilla Firefox, а также как можно обновить браузер до актуальной версии.

В этом уроке я расскажу вам как можно проверить обновления для Опера.

Если вы пользуетесь браузером Google Chrome и вам надоел его стандартный внешний вид, можно выйти из положения, скачав и установив тему с сайта «Интернет-магазин Chrome».

Как установить тему в Google Chrome: Настройки – Параметры – Личные материалы – Получить тему.

Можно пользоваться готовыми темами для Google Chrome, а можно создать тему своими руками с помощью онлайнового конструктора тем - Сhrome-theme creator.
Онлайн конструктор находится по адресу www.themebeta.com/chrome-theme-creator-online.html

Создать тему для Google Chrome - Сhrome-theme creator

Начну, как создать тему с онлайнового конструктора - Сhrome-theme creator.

Интерфейс конструктора состоит из двух частей.

а). В левой части находятся настройки будущей темы.

б). В правой части находится предварительный просмотр темы браузера Chrome во время конструирования.

Начнем с первой вкладки («basic» - с англ. основной). Здесь нужно заполнить поле с названием создаваемой темы (по желанию). Я назвал свою тему – «myStar»

Вторая вкладка («Images» - с англ. изображения) предназначена для загрузки деталей темы.
Внимание: когда будете создавать картинки в графическом редакторе или изменять готовые картинки для будущей темы, учтите разрешение монитора.

Наведя курсор на разделы во вкладке «Images» , появится выделенная красным цветом подсказка, которая показывает, какую часть в теме вы будете менять.

Давайте загрузим фоновые картинки для нашей темы нажатием кнопки «Choose Image», а палитрой поменяем цвет. Вот, что у меня получилось.

В третьей вкладке («Colors» - с англ. цвета) подбираем цвета для рамок, текста и т.д. В третьей вкладке «Colors» так же присутствуют подсказки при наведении курсора на разделы. Смотрим, что у меня вышло.

Вкладка («Pack» - с англ. упаковывать) – это завершающий этап в создании темы для Google Chrome.

«Pack and install theme » - упаковать и установить тему.

«Pack and download theme» - упаковать и загрузить тему с расширением. crx. Чтобы установить тему, достаточно перетащить файл .crx в окно браузера Chrome и все. Не правда ли, быстрая установка темы на Google Chrome?

«Pack and download zip file» - упаковать и загрузить созданную тему в виде zip-архива. Zip - архив темы можно разместить в интернет-магазине Chrome для общего пользования.


Вот и все!!! с помощью онлайн конструктора - Сhrome-theme creator мы разобрались.

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

Кто из нас не менял обои для Windows? Сейчас редко можно встретить такого человека. У кого-то кошечки, у кого-то красивая барышня, а кто-то любит абстракцию.

А вы знаете, что подобные заставки можно ставить и в браузере Google Chrome? Только там они называются темами.

Если вам надоело стандартное белое полотно, которое стоит по умолчанию, читайте далее о то, как можно поменять оформление темы в Гугл Хроме .

Меняем тему (заставку) в Хроме

Сменить тему в Google Chrome можно проделав следующую инструкцию:

Можно так же осуществить прямой переход по ссылке .

В разделе вы увидите огромную галерею всевозможных тем. Некоторые из них созданы дизайнерами Гугла, а некоторые были сделаны художниками. Все они бесплатные.

Когда найдете нужную тему, наведите на нее мышкой и во всплывшем окне нажмите «бесплатно» .

Другие темы для Google Chrome скачать

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

Скачать темы Гугл Хром:

Скачанные файлы имеют расширение CRX (иногда могут быть заархивированы). Для их установки следует разархивировать и просто перенести файлы темы в окно браузера.

Генератор тем (скинов) для Google Chrome

Если указанные выше методы не дали результат, то вам следует воспользоваться генератором тем My Chrome Theme , который можно скачать все из того же «Интернет-магазина» .

Прямая ссылка для скачивания.

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

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

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

Для создания нам понадобятся:

  1. Простейший графический редактор (подойдет даже Paint);
  2. Наша подробнейшая инструкция;
  3. Немножечко желания.

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

Существует два способа создать тему для Google Chrome:

  1. Написать с нуля (создав один текстовый документ и несколько картинок);
  2. Использовать специализированный онлайн-сервис.

Пока вы решаете, каким способом воспользоваться – я начну с самого «тяжелого».

Создание темы для Google Chrome с нуля

Темы, как и расширения для браузеров на движке «chromium» основываются на файле manifest.json .

Manifest.json – текстовый документ, хранящий в себе настройки тем и расширений, а так же название, описание и прочую служебную информацию.

Давайте создадим на рабочем столе новую папку с названием нашей будущей темы, у меня она будет называться «Do not do it!», а внутри её создадим текстовый документ — manifest.json , где manifest – название документа, а json – его . В дополнение, создайте пустую папку с названием «images», которая будет содержать в себе все графические элементы нашей темы.

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

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

Нам понадобятся изображения следующих размеров:

1. 1920x1080px (HD формат) – для использования в качестве основного фона в браузере.

2. 30x256px – данная картинка будет использована в качестве оформления окна Chrome.

3. 1100x40px – это изображение будет выступать в качестве заставки в левом верхнем углу браузера (не знаю зачем отдельно использовать в данном месте дополнительную картинку – можете использовать ее для дополнительной «кастомизации» темы, ).

4. 30x200px – оно будет выступать в качестве заливки неактивных открытых вкладок браузера.

5. 30x256px – данное изображение будет использовано для заливки активной открытой вкладки и панели закладок Chrome.

Внимательно отнеситесь к изображениям, в частности к их размерам, если вы не знаете, как сделать картинку именно такого размера и формы – изучите одну из наших .

Ну а если у вас уже все готово – следуем дальше и составляем файл manifest.json .

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

Документ, в котором будет описан код нашей темы начинается с фигурной скобки «{», следом необходимо заполнить поля:

{ "name":"Do not do it!", // поле, указывающее на название темы; "version":"1", // номер версии вашей темы (впоследствии, внося правки в темы, необходимо обновлять версию); "description":"Can still think twice?", // краткое описание темы; "manifest_version":2, // версия манифеста (есть две версии «манифеста» - 1 и 2, версия 1 – для браузеров Chrome ниже 18й версии, 2я для браузеров 18 версии и выше, включительно).

"theme":{ "images":{ "theme_frame": "images/theme_frame.jpeg", // изображение используемое в оформлении окна браузера; "theme_toolbar": "images/theme_toolbar.jpeg", // изображение используемое в качестве заливки активной открытой вкладки; "theme_tab_background": "images/theme_tab_background.jpeg", // заливка неактивных открытых вкладок; "theme_ntp_background": "images/theme_ntp_background.jpeg", // основной фон нашей темы; "theme_frame_overlay": "images/theme_frame_overlay.jpeg"}, // заливка в левом верхнем углу.

"theme" : {

"images" : {

"theme_frame" : "images/theme_frame.jpeg" , // изображение используемое в оформлении окна браузера;

"theme_toolbar" : "images/theme_toolbar.jpeg" , // изображение используемое в качестве заливки активной открытой вкладки;

"theme_tab_background" : "images/theme_tab_background.jpeg" , // заливка неактивных открытых вкладок;

"theme_ntp_background" : "images/theme_ntp_background.jpeg" , // основной фон нашей темы;

"theme_frame_overlay" : "images/theme_frame_overlay.jpeg" } , // заливка в левом верхнем углу.

В коде, на данной странице, используется символ – «//», он необходим для «комментирования» кода. Непосредственно в файле manifest.json – его можно удалить.

Указав пути к картинкам, следует прописать цвета шрифтов и элементов интерфейса. В manifest.json используются цвета RGB – их коды вы можете получить в любом онлайн конвертере.

"colors":{ "frame":, // Заполняет указанным цветом пустое пространство основного фона; "toolbar":, // Заполняет область в левом нижнем углу, на месте отображения «url» сайта; "tab_text":, // Цвет шрифта активной открытой вкладки; "tab_background_text":, // Цвет шрифта неактивной открытой вкладки; "bookmark_text":, // Цвет шрифта закладок на панели браузера; "ntp_background":, // Цвет заливки фона под иконками «приложений» в браузере; "ntp_text":, // Цвет шрифта названий приложений; "button_background":}, // Цвет кнопок «Закрыть», «Свернуть», «Во весь экран», в правом верхнем углу.

"colors" : {

"frame" : [ 0 , 0 , 0 ] , // Заполняет указанным цветом пустое пространство основного фона;

"toolbar" : [ 0 , 0 , 0 ] , // Заполняет область в левом нижнем углу, на месте отображения «url» сайта;

"tab_text" : [ 255 , 255 , 255 ] , // Цвет шрифта активной открытой вкладки;

"tab_background_text" : [ 167 , 167 , 167 ] , // Цвет шрифта неактивной открытой вкладки;

"bookmark_text" : [ 167 , 167 , 167 ] , // Цвет шрифта закладок на панели браузера;

"ntp_background" : [ 0 , 0 , 0 ] , // Цвет заливки фона под иконками «приложений» в браузере;

"ntp_text" : [ 167 , 167 , 167 ] , // Цвет шрифта названий приложений;

"button_background" : [ 255 , 255 , 255 ] } , // Цвет кнопок «Закрыть», «Свернуть», «Во весь экран», в правом верхнем углу.

Осталось задать позиционирование основного изображения фона и пару дополнительных настроек.

"tints":{ "buttons": // Указываем оттенки используемых цветов (оставьте значения указанные здесь); }, "properties":{ "ntp_background_alignment":"bottom", // Указываем относительно какого края окна будет расположено основное изображение (bottom – нижний, top – верхний); "ntp_background_repeat":"no-repeat" // Указываем необходимо ли «заполнять» нашим изображением все пространство окна браузера, в случае если оно больше по размеру, чем наше основное изображение. } }

Вы проделывали все действия вместе со мной? Отлично, можно закрывать файл манифеста с сохранением и приступать к тестированию получившейся темы, предварительно загрузив созданные ранее картинки в папку «images».

Тестирование темы для Chrome

Тестирование – звучит слишком громко, на самом деле, нам нужно проверить – не допустили ли мы ошибок в работе.

У вас уже установлена тема в браузере и ее необходимо немного видоизменить? Не проблема! Файлы уже установленных тем в Chrome хранятся по адресу C:\Users\Имя_Пользователя\AppData\Local\Google\Chrome\User Data\Profile 1\Extensions

Откройте браузер и перейдите в «Настройки» на вкладку «Расширения» и нажмите «Загрузить распакованное расширение». Обязательно проследите, чтобы был отмечен пункт «Режим разработчика».

В появившемся окне выберите папку с вашей темой для Chrome и нажмите «Ok» – в моем случае, это папка «Do not do it!».

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

Теперь можно наслаждаться собственной темой для Google Chrome, но в каждой бочке меда, найдется ложка сами знаете чего.

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

Как загрузить тему в магазин Chrome

Если вы решились расстаться с кровно заработанными деньгами – пройдите простую регистрацию в интернет магазине по ссылке https://chrome.google.com/webstore/category/extensions .

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

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

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

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



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

Создание темы для Chrome с помощью онлайн сервиса

В первой части статьи я описал «сложный» метод создания тем для браузера Google Chrome, сейчас перейдем к более простому, не требующему надобности копаться в коде и создавать множество дополнительных изображений. Все что вам понадобиться – зайти на сайт — www.themebeta.com/chrome-theme-creator-online.html с заранее подготовленным фоном большого размера.

Браузеры на платформе Chromium не поддерживают анимированных тем, в отличие от Opera.

Попав на сервис, к слову – никоим образом официально не относящимся к корпорации Google, вы увидите рабочую область, где слева расположены инструменты с комментариями (на англ. Языке), справа – визуализированное окно браузера Chrome, в котором будут отображаться все вносимые изменения, а внизу располагаются кнопки позиционирования вашего изображения относительно окна браузера.

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

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

Не загружая множество дополнительных изображений, рассмотренных в выше, окно вашего браузера будет отражать установленную цветовую схему Windows, т.е. для полной «кастомизации» темы – необходимо загрузить все предложенные изображения во вкладке «images», согласно размерам озвученным в первой части статьи.

Перейдя на вкладку «Pack», вам будет предложено на выбор три действия:

  1. Установить получившуюся тему в браузер (вспомните про недостаток с окном при открытии браузера).
  2. Упаковать тему в файл формата crx и скачать его на компьютер (этот файл является установочным для тем и расширений в браузере Chrome).
  3. Скачать «исходники» темы в zip архиве (вы сможете сразу загрузить готовую тему в интернет магазин).

Отмечу, что при использовании данного сервиса – ваша тема будет помещена в каталог и станет доступна для скачивания и установки другими пользователями.

Если будет интересно, в следующих постах я опишу процесс создания анимированных тем для браузера Opera.