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

Настає час і звичний набридає, хочеться внести родзинку в найпопулярніший браузер і такий «унікальною фішкою» в 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” // номер версії вашої теми (згодом, вносячи правки в теми, необхідно оновлювати версію); “description” “Can still think twice? “// короткий опис теми;” manifest_version “// версія маніфесту (є дві версії« маніфесту »- 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 “// заливка в лівому верхньому кутку.

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

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

“Colors” “frame” // Заповнює вказаним кольором порожній простір основного фону; “toolbar” // Заповнює область в лівому нижньому кутку, на місці відображення «url» сайту; “tab_text” // Колір шрифту активної відкритої вкладки; “tab_background_text” // Колір шрифту неактивній відкритої вкладки; “bookmark_text” // Колір шрифту закладок на панелі браузера; “ntp_background” // Колір заливки фону під іконками «додатків» в браузері; “ntp_text” // Колір шрифту назв додатків; “button_background” / / Колір кнопок «Закрити», «Згорнути», «на весь екран», в правому верхньому куті.

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

“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

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

Якщо ви зважилися розлучитися з кровно заробленими грошима – пройдіть просту реєстрацію в інтернет магазині по посиланню.

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

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

В першу чергу упакуйте файли теми в zip архів і завантажте його в магазин 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 архіві (ви зможете відразу завантажити готову тему в інтернет магазин).

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

Такий простий і одночасно складною, була процедура створення власних тем для браузера Google Chrome, що вийшло у мене, можете подивитися за посиланням -.

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

Ссылка на основную публикацию