Як створити власну тему для google chrome

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

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

Для створення нам знадобляться:

І я не намагаюся вас обдурити, найкрутіші теми для браузера 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.

Ви можете завантажити заповнений файл, підготовлений мною в якості зразка - hyperione.com/save/manifest.json або скласти його самостійно за запропонованою нижче інструкції.

Документ, в якому буде описаний код нашої теми починається з фігурної дужки «

"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 використовуються кольору RGB - їх коди ви можете отримати в будь-якому онлайн конвертері.

"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]>. // Колір кнопок «Закрити», «Згорнути», «На весь екран», в правому верхньому куті.