Как создать свою тему для google chrome. Как создать тему для Google Chrome. Ягодные темы для Google Chrome
Несмотря на то, что в Интернете существует великое множество Тем для браузера Google Chrome на любой вкус, большинству пользователей хотелось бы создать и использовать собственную.
Ведь у всех вкусы разные и из большого каталога Тем, кому-то подходит изображение фона, но не подходит цветовая схема оформления браузера или наоборот, а также всё может испортить цвет какой-нибудь кнопочки или панельки.
Свою тему можно создать, прибегнув к изменению кода уже ранее кем-то созданной темы, но зачем разбираться в коде, если существует бесплатное приложение для браузера под названием My Chrome Theme. Уважаемые читатели блога, сегодня я расскажу вам о применении его функционала на практике.
ТЕМА ДЛЯ CHROME
Открываем интернет-браузер и в адресную строку вставляем прямую ссылку на установку приложения из Интернет-магазина Chrome:
Https://chrome.google.com/webstore/search/my%20chrome%20theme?hl=ru
или, если не доверяете мне и боитесь подхватить вирус по ссылке, можете . А также можете самостоятельно найти это приложение через Поиск в Интернет-магазине и нажать на кнопку “Войти и добавить”. ВАЖНО! Для полноценной работы приложения и для его установки, Вам необходимо иметь учётную запись почты Gmail, которую можно легко зарегистрировать.
Входим в свою учётную запись при помощи ввода в необходимые поля своего E-mail и пароля.
Откроется окно с информацией о приложении, где нужно нажать на кнопку “УСТАНОВИТЬ”.
При получении всплывающего окна с информацией, нажимаем кнопку “Добавить”.
Ждём, пока завершится процесс загрузки (размер файла около 1,5 Мегабайт) и установки приложения, после чего автоматически в новой вкладке открывается страница с пиктограммой для быстрого доступа к приложению.
НАСТРОЙКИ GOOGLE CHROME
Для создания своей темы кликаем мышкой на пиктограмму My Chrome Theme и на открывшейся странице нажимаем кнопку “START MAKING THEME”.
На первом шаге выбираем загрузку своего изображения для фона нажатием на Upload Image (Загрузить изображение) или Use Webcam (Сделать изображение с веб-камеры).
Загрузив картинку, мы можем откорректировать её позицию (кнопка – Adjust position), добавить несколько эффектов (кнопка – Image Effects) и посмотреть на результат (переключатель внизу – DESIGN MODE/PREVIEW MODE.
Закончив с картинкой, кликаем на кнопку “Continue to Step 2” вверху страницы.
При клике мышкой по объектам браузера (подсвечиваются), можем выбрать цвет, в который хотим их раскрасить (можно выбрать разные цветовые схемы) или применить оптимальные цвета нажатием кнопки “I’m Feeling Lucky”.
Закончив с подбором цветов переходим к 3-му шагу, нажав кнопку “Continue to Step 3” вверху браузера.
Пишем название свое темы в поле “Give your theme a name” и нажимаем кнопку “Make my theme!”.
Https://www.mychrometheme.com/t/9iahq2iyl4q7g4nzujo0r2bw3
После нажатия кнопки “INSTALL MY THEME” нажимаем на кнопку “Далее” в нижнем левом углу браузера.
Соглашаемся на установку нажатием на кнопку “Добавить”.
Всё, теперь у вас есть созданная собственными руками тема для Chrome.
Прошу Вас оставлять комментарии к статье и делиться ссылкой со своими друзьями. Спасибо за внимание!
Наступает время и привычный надоедает, хочется внести изюминку в самый популярный браузер и такой «уникальной фишкой» в Chrome может стать «тема», и не скаченная с официального интернет магазина, а собственная, ни на кого не похожая.
Как вы могли уже понять, сегодня мы разберем вопрос про создание собственных тем для браузера Google Chrome.
Для создания нам понадобятся:
- Простейший графический редактор (подойдет даже Paint);
- Наша подробнейшая инструкция;
- Немножечко желания.
И я не пытаюсь вас обмануть, самые крутые темы для браузера Chrome создаются в считанные минуты, но перейдем от слов к делу.
Существует два способа создать тему для Google Chrome:
- Написать с нуля (создав один текстовый документ и несколько картинок);
- Использовать специализированный онлайн-сервис.
Пока вы решаете, каким способом воспользоваться – я начну с самого «тяжелого».
Создание темы для 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», вам будет предложено на выбор три действия:
- Установить получившуюся тему в браузер (вспомните про недостаток с окном при открытии браузера).
- Упаковать тему в файл формата crx и скачать его на компьютер (этот файл является установочным для тем и расширений в браузере Chrome).
- Скачать «исходники» темы в zip архиве (вы сможете сразу загрузить готовую тему в интернет магазин).
Отмечу, что при использовании данного сервиса – ваша тема будет помещена в каталог и станет доступна для скачивания и установки другими пользователями.
Если будет интересно, в следующих постах я опишу процесс создания анимированных тем для браузера Opera.
Я всегда завидовал людям, которые наделены навыками программирования в сочетании с возможностью создавать программное обеспечение красивым с художественной точки зрения.
К счастью, мы живем во время, когда можно не зависеть от посторонних людей и заставить программное обеспечение выглядеть так, как нам этого хочется.
Возможность настройки здесь не является запоздалой мыслью разработчиков, она была заложена практически с самого начала. Быть в состоянии выбирать или цветовую схему для наших приложений – хорошо, возможность создать свою собственную тему – еще лучше. Для Chrome существуют интернет-сайты и отдельные плагины, доступные через Chrome Web Store, способные создать уникальный внешний вид для вашего браузера.
При первой же мысли о визуальной персонализации Chrome в голову нам приходят два названия. Первое – Chrome Theme Creator, доступный как онлайн-приложение, так и в качестве отдельного плагина. Второе приложение называется My Chrome Theme. Принцип работы у этих программ практически одинаковый.
И так, как создать тему для google chrome:
1) Скачать и установить один из вышеназванных плагинов. Установка обычно занимает всего пару кликов и не требует каких-либо специальных знаний.
2) Выберите фоновое изображение.
3) Выберите понравившийся вам цвет для активного окна и вкладки.
19ЌарВ этой инструкции я расскажу как быстро и легко создать тему для браузера Google Chrome . Это самый простой способ, но на всякий случай я распишу всё подробно.
Что вам понадобится:
-Приложение
-My Chrome Theme
-Регистрация в Гугле
1.Для начала открываем Chrome и заходим в приложения.
2.Теперь заходим в Магазин. (не бойтесь ничего покупать не надо).
3.В поиске вводим My Chrome Theme и нажимаем Enter.
4.Находим приложение My Chrome Theme и нажимаем по кнопке Бесплатно.
5.Выйдет вот такое окошко, нажимаем добавить. Кстати, после того, как вы нажмёте кнопку Бесплатно, у вас могут потребовать авторизоваться в google.
6.Теперь ждём, когда скачается и установится.
7.Теперь опять заходим в Приложения и выбираем My Chrome Theme.
8.Нажимаем Start Making Theme
9.Тут теперь можно выбрать загрузить картинку с компьютера или же с веб камеры. В моём случае я загружаю с компа.
10.Выбираем картинку или фотографию.
11.Теперь редактируем положение картинки или фото и жмём Continue to Step 2.
12.Тут жмём по кисточкам и выбираем цвета для каждого элемента отдельно. После этого жмём Continue to Step 3.
13.Пишем название темы и жмём Make my theme!
15.Внизу где загрузки выйдет новая загрузка. Нажимаем Далее.
16.Теперь нажимаем Добавить.
17.И любуемся. Правда, в моём случае, фото не подходящее. Для тех, кто уже давно знаком с интернетом, эта инструкция покажется смешной, так как слишком уж всё подробно расписано. Но не будем забывать, что некоторые люди не такие асы в пользовании интернетом и им требуется подробное описание.
Тема представляет собой архив, в который упакованы несколько картинок, которые определяют внешний вид браузера. Можно их изменить вручную, а можно воспользоваться онлайн сервисом для создания тем .
Можно, конечно, зайти в магазин веб-приложений Гугла или на другой сайт и выбрать себе подходящую тему, а можно создать тему самому и гордиться своей работой. Также, с помощью этого онлайн редактора вы можете загрузить уже имеющуюся у вас тему и изменить ее.
Если вы решили создать тему для Google Chrome, то для начала, вам понадобятся несколько картинок, сопоставимых по разрешению с вашим монитором и любопытность, чтобы разобраться что к чему.
Перейдя по этому адресу , перед вами появится простой редактор тем. Вариантов создания тем есть два: простой(Basic) и продвинутый(Advanced). В простом варианте тема создается в два шага, на третий шаг происходит загрузка и установка темы.
1. Нажатием на первую зеленую кнопку загружается фоновый рисунок для пустой вкладки. Картинку желательно брать с одной стороны, соразмерную по разрешению с вашим монитором, с другой, не слишком большую, так как может замедлиться загрузка новой вкладки.
2. На втором шаге нужно выбрать цвет рамки окна и верхней панели. На выбор есть немного предустановленых вариантов цветов. Если вы не нашли для себя подходящий, тогда нужно будет поработать с расширенным редактором.
3. Все готово для загрузки и установки темы. При нажатии на синюю кнопку тема скачается, после чего у вас на экране появится предложение добавить тему. Оценив полученный результат, вы можете оставить ее или отменить ее применение.
Самая последняя кнопка позволяет закачать на сайт какую-нибудь тему и изменить ее на свой вкус.
Продвинутые настройки появляются при нажатии на вкладку Advanced и находятся на трех последующих вкладках, после первой. Основные возможности сосредоточены на первых четырех пунктах вкладки Images.
NTP Background – New Tab Page Background. Это фоновый рисунок новой страницы новой вкладки. Этот параметр равнозначен первой кнопке из базового режима, но в отличие от него, позволяет выровнять фон и задать его повторение, если картинка представляет собой узор или она небольшого размера.
Frame – это рамка окна. Можно задать как цвет, так и изображение. Обычно, я задаю изображение. Его размер тоже можно взять большой.
Toolbar – это верхняя панель, где сосредоточены вкладки, адресная строка, панель плагинов и закладок. С тулбаром тоже можно пофантазировать, задав ему изображение или просто цвет.
Tab Background – цвет фоновых вкладок. Здесь все также, как и в предыдущих пунктах.
На следующей вкладке Colors можно задать цвета для любого текста в интерфейсе браузера. Я их описывать не буду, так как они подсвечиваются при наведении на них мышкой в панели предпросмотра.
Последняя, четвертая, вкладка Pack позволяет:
— упаковать и установить тему
— упаковать и загрузить тему без установки
— упаковать и скачать тему в виде zip-архива
После нажатия на первую кнопку тема скачается, установится непонятно куда, поэтому можно воспользоваться второй кнопкой и сначала скачать тему, а потом установить ее.
Последняя кнопка пригодится вам, если вы захотите показать кому-то свой ново созданный шедевр, как вот я сейчас покажу вам, что у меня вышло: