пятница, 19 марта 2010 г.

Темы Google Chrome своими руками

Я вот посмотрел на свой Google Chrome я подумал, ведь можно самому сделать для него тему оформления. Но как?
Ввел соответственный запрос и перешел по первой ссылке. Попал на сообщество пользователей Google Chrome, выбрал тему и начал внимательно ее читать.

После прочтения выбрал тему, на которой я буду проводить эксперименты, обновил архиватор 7-zip, и приступил к работе.

1. Для начала выбирите одну из тем с галереи google chrome, и скачайте любую понравившуюся, скачивать лучше другим браузером. Я выбрал Ёжика в тумане.

2. Скачанный файл с расширением *.crx открывается архиватором, например 7-zip. Тот архиватор который был установлен у меня, открывать файл не стал, помогло обновление программы на более новую версию. В архиве будет папка с изображениями, и файл конфигурации manifest.json. Скопируйте содержимое в удобное для вас место на диске. Я создал папку на диске C:\th\001

3. Разберем файл manifest.json:

{"theme":
{"images":
{
"theme_button_background": "img\/button.png",
"theme_tab_background": "img\/tab.png",
"theme_toolbar": "img\/toolbar.png",
"theme_ntp_attribution": "img\/attribution.png",
"theme_frame": "img\/frame.png",
"theme_ntp_background": "img\/ntp.png"
},
"colors":
{
"ntp_section_text": [34, 34, 34],
"tab_text": [0, 0, 0],
"frame": [105, 125, 126],
"ntp_background": [255, 255, 255],
"ntp_link": [34, 34, 34],
"tab_background_text": [0, 0, 0],
"ntp_text": [0, 0, 0],
"ntp_section": [218, 225, 226, 0.9],
"ntp_section_link": [6, 45, 117],
"ntp_header": [129, 157, 165, 1],
"toolbar": [231, 235, 241],
"bookmark_text": [0, 0, 0]
},
"tints":
{
"buttons": [0.6, 0.082, 0.5]
},
"properties":
{
"ntp_background_repeat": "repeat-x",
"ntp_background_alignment": "top"
}
},
"version": "0.3",
"name": "Shabelsky"
}

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

3.1 "images" - отвечает за изображения. Я открывал исходник, создавал новый слой, заливал его желаемым цветом и сохранял в новую папку. В этом деле рекомендую выбранную тему применить, и сравнивать на месте, то что в папке, и то что в теме, а не воображать, а где будет эта картинка и как она себя будет вести и отображаться. Папка, в которой находятся изображения, может называться по разному, (это я выяснил вскрыв не одну тему) в основном i/img/image. Не всегда файлы внутри папки имеют расширение, но вроде как всегда они *.png

3.2 "colors" - отвечает за цвета в системе RGB [0, 0, 0] - черный, [255, 255, 255] - белый. В общем графический редактор вам в помощь :)

3.3 "tints" - что это такое, я не понял. Что такое tint понятно, с анг. это оттенок, но откуда брать значения непонятно. Мне повезло что то значение которое было не вылезло боком, по крайней мере я этого не заметил :)

3.4 "properties" - отвечает за поведение фонового изображения (background) "repeat-x" - повторение изображения по вертикали, "top" - располагать изображение по центру.

3.5 "version" и "name" указывайте что хотите. Я указал 0.3 потому как это была третья попытка, ну и обозначил свое авторство)

4. Как только вы сделали все нужные манипуляции, удостоверились, что это именно те изображения что вам нужны, сравнили все цвета, и внесли все нужные и важные изменения в код, открывайте - Настройка и управление Google Chrome - Расширения. Справа вверху будет плюсик Режим разработчика, жмите на него и выбирайте Упаковка расширений. Через Обзор указывайте путь до папки в которой находятся файл конфигурации manifest.json и папка с изображениями. Жмите Ok.
Выскочит окошко с информацией о том что:

Созданы следующие файлы:
Расширение: C:\th\001.crx
Файл ключей: C:\th\001.pem
Храните файл ключей в надежном месте. Он потребуется для создания новых версий расширения.

001.crx это и есть то, ради чего вы старались, созданная вами тема. Для того чтобы ее применить, достаточно перетащить ее в окно браузера.
001.pem нужен для обновления вашей темы, храните его, если оно вам надо. Есть не просит, пусть лежит, я так думаю :)

Ну в общем и все. Если вам интересно какая тема получилась у меня, можете скачать ее и посмотреть. Она под стать моей нынешней теме журнала в ЖЖ.

Источник, из которого черпал информацию.

Комментариев нет: