Создаем темы для Chromium v34+(aka Google Chrome)

test
Бывает так что существующие темы уже попросту допекли. Хочется создать свою тему. А иногда просто хочется разгрузить мозги и сделать что-то простое и приятное. Чем и займемся. Сильно с темизацией конечно не разгонишься, но кое-что приятное сделать можно. Если что-то будет непонятным, есть официальный гайд по созданию темы для браузера хром. Немного анатомии тем для хромиума/хрома.

Картинки

Используется 5 картинок: 1) Фрейм темы – Картинка отображается как рамка для кнопок "Закрыть", "Развернуть", "Свернуть". Если вы решите их не использовать(не добавите в свою тему), браузер будет использовать картинки с дефолтной темы. Требование к картинкам: Минимальная высота: 30px. Нет ограничений по ширине. Панелька(toolbar) – Фоновая картинка для кнопок "Назад", "Вперед", "Обновить" и всего этого ряда кнопок. Требования: Минимальная высота: 120px. Нет ограничений по ширине. Бекграунд для вкладок(табов) – Картинка используется для неактивных вкладок, когда открыто несколько вкладок. Требования: Минимальная высота: 65px. Бекграунд для вкладки "Добавить новую" – Эта картинка отображается в основной части окна для вновь созданной вкладки. Минимальный рекомендуемый размер 800x600, но любая картинка будет масштабирована под разрешение. Атрибуты темы – Картинка отображаемая в правом нижнем углу любой темы для Хрома.

Файл описания темы Manifest

Так же немного теории, практика немного позже. Файл содержит следующие секции, с которыми и происходят главные изменения. images – Картинки используемые темой описываются в этой секции. Именно их мы положим в нужную папку и опишем в этой секции. colors – Каждый элемент в этой секции определяет разные цвета используемые темой. Немного об элементах:
  • Фон статус бара такой же как и у тулбара.
  • Цвет текста статус бара такой же как цвет активной вкладки.
  • Цвет текста кнопка тулбара(там где отображаются загружаемые файлы) такой же как цвет текста закладок.
  • tints(Оттенки) – Оттенки используемые для всех кнопок в тулбаре("Вперед","Назад","Обновить", прочее). Значение является числом с плавающей точкой в районе от 0 до 1(или -1). Самый часто-используемый элемент в этой секции "buttons". Значение -1 не вносит никаких изменений в цвет элементов. Каждое значение имеет три отдельных параметра, таких как Hue(Цветность), Saturation(Насыщенность), Luminance(Яркость). Вот для каждого из них вы и устанавливаете значения такие как 0.346, 0.1, -0.5. Используйте их чтобы гармонизировать вашу тему.
  • properties(Свойства) – В манифесте темы вы можете использовать свойства для настройки отображения картинки установленной в фоне главного окна. Вы можете выровнять ее по верхней границе, нижней или центрировать в браузере и выбрать повторять ли картинку по x или y осям или нет.

Итак, скальпель... зажим...

Тему назовем просто DigitalWorld 1) Создаем папку themename 2) Создаем в ней папку images 3) Копируем туда картинку для фона, я назвал ее просто bg.png 4) Копируем с других тем или создаем все остальные 4 файла картинок. Иначе гугл-хром не даст нам посмотреть превью или запаковать тему в расширение. 5) Создаем файл manifest.json(базовый файл можно скачать по ссылке.
{
  "version": "1.0",
  "name": "Theme name",
  "manifest_version": 2,
  "theme": {
    "images" : {
      "theme_frame" : "images/frame.png",
      "theme_toolbar" : "images/toolbar.png",
      "theme_ntp_background" : "images/bg.png",
      "theme_tab_background" : "images/tab.png",
      "theme_ntp_attribution" : "images/theme_ntp_attribution.png"
    },
    "colors" : {
      "ntp_link": [255,255,255],
    "ntp_text": [255,255,255],
    "ntp_section_link": [255,255,255],
    "ntp_section_text": [10 , 17 , 27],
    "ntp_background": [10 , 17 , 27],
    "frame": [10 , 17 , 27],
    "toolbar": [10 , 17 , 27],
    "tab_text": [255,255,255],
    "tab_background_text": [222 , 222 , 222],
    "bookmark_text": [255,255,255]
    },
    "tints" : {
                "buttons" : [0.33, 0.5, 0.47],
                "frame_inactive": [0.50, 0.50, 0.50],
                "frame_incognito_inactive": [0.50, 0.50, 0.50]
    },
    "properties" : {
     "ntp_background_alignment" : "bottom",
    "ntp_background_repeat": "no-repeat"
    }
  }
}
В новых версиях хром нужно указывать версию файла-манифеста: "manifest_version": 2.

Упаковка и предпросмотр темы.

Откройте в Google Chrome страницу расширений/дополнений/extensions, можно просто набрав в строке браузера "chrome://extensions/" и нажав ввод. Включите режим разработчика("Developer mode") справа. Нажмите "Load unpacked extension" и выбирайте созданную папку с темой "Theme name". Если все правильно сделано, то браузер загрузит расширение/тему и вы ее увидите. Когда вы уже будете довольны внешним видом вашей темы, нажмите кнопку "Упаковка расширений..."(Pack extension) и хром создаст тему и сохранит рядом с папкой вашей темы. Он так же создаст PEM(приватный ключ) для вашей темы, что позволит обновлять версию темы в будущем, если вы загрузите тему в магазин расширений Chrome. Если все прошло нормально, хром сообщит вам что .crx и .pem файлы были созданы и путь к самим файлам. Собственно все.
Категория: 
Share/Save

Делитесь с друзьями в социальных сетях! Оставляйте комментарии!

Share/Save

Это Вам так же может быть интересно!