LanguagePowiązane rozszerzenia:
Tworzenie własnych motywów do Chrome
Motywy Google Chrome to ulubione dodatki jego użytkowników i możesz znaleźć ich tysiące w całym internecie, a największym źródłem jest Chrome Web Store.
Ale wielu dociekliwych użytkowników chciałoby tworzyć własne, spersonalizowane motywy, a nawet dzielić się nimi ze znajomymi i resztą świata.
Ten krótki poradnik pokaże wewnętrzną strukturę motywów Google oraz jak stworzyć własny na podstawie dowolnych obrazków.
Struktura motywów Chrome
Motyw Chrome to nic innego jak dodatek, który nie zawiera rozbudowanego kodu źródłowego ani skryptów i zasadniczo składa się z dwóch części:
- obrazów używanych dla samego motywu
- jednego pliku manifest.json zawierającego parametry i ustawienia potrzebne do utworzenia motywu
Następnie te dwie części są pakowane do jednego pliku z rozszerzeniem CRX.
Jak ręcznie przygotować motyw Google
Z pewnością będziesz potrzebować odpowiedniej tapety, której chcesz użyć w swoim motywie, oraz podstawowego pomysłu na cały motyw. Ale będziesz też potrzebować kilku narzędzi programistycznych, żeby to zrobić:
- Edytor obrazów. Użyj dowolnego programu — jest ich mnóstwo. Nawet podstawowy Microsoft Paint wystarczy, ale oczywiście możesz użyć profesjonalnych narzędzi, takich jak Adobe Photoshop czy CorelDraw.
- Edytor tekstu. Zwykły Notatnik będzie odpowiedni, podobnie jak każdy inny tego typu program.
Gdy masz to wszystko, wystarczy wykonać kroki poniżej, aby utworzyć własny motyw Google Chrome.
Krok 1: Utwórz katalog o nazwie motywu
Jedną z pierwszych rzeczy, które zrobisz, jest utworzenie nowego katalogu dla swojego motywu i nadanie mu nazwy odpowiadającej nazwie motywu. Powiedzmy „my_new_theme”. Wewnątrz tego folderu utwórz jeszcze jeden, nazwany „images”, który będzie zawierał wszystkie obrazy używane przez nowy motyw.
Krok 2: Utwórz obrazy dla swojego motywu
Aby utworzyć działający motyw, potrzebujesz czterech podstawowych elementów graficznych, albo pięciu, jeśli chcesz dodać do motywu własne osobiste logo, ale to czysta opcjonalność. Wszystkie obrazy używane w motywach Google Chrome muszą być w formacie PNG.
Jeśli twoje obrazki są w jakimś innym formacie, najpierw musisz je przekonwertować do PNG przy użyciu dowolnego oprogramowania albo dostępnych narzędzi do konwersji online.
Poniżej znajduje się lista wszystkich elementów obrazów wraz z właściwymi wymaganiami:
Ramka motywu (frame.png)
To obraz jest używany do ramki nowego motywu Google Chrome oraz jako tło dla przycisków „Zamknij”, „Minimalizuj” i „Maksymalizuj”. Jeśli nie chcesz używać tego obrazu, to stworzony motyw Chrome będzie działał jak domyślny motyw Chrome i wyświetli wrodzony pasek tytułu systemu operacyjnego.
Obraz ramki motywu wymaga minimalnej wysokości 30px bez ograniczeń co do szerokości. Ten element jest zwykle tworzony w najciemniejszych kolorach.
Panel narzędzi motywu (toolbar.png)
Ten element motywu jest wyświetlany jako tło przycisków „Dalej”, „Wstecz” i „Odśwież”, a także jako pasek narzędzi rozszerzeń. Odpowiada zarówno aktualnej karcie, jak i paskowi narzędzi.
Wymaga minimalnej wysokości 120px bez ograniczeń co do szerokości.
Tło karty motywu (tab.png)
Używane dla kart nieaktywnych, gdy jednocześnie otwartych jest więcej kart. Ma minimalny wymagany rozmiar wysokości 65px bez ograniczeń co do szerokości.
Tło nowej karty (background.png)
Reprezentuje główny obraz wyświetlany, gdy otwierana jest nowa karta. Zalecany minimalny rozmiar obrazu to 800x600, ale dla najlepszego efektu użyj tapet dopasowanych do rozdzielczości ekranu urządzenia, na którym będzie używany motyw. Ten obraz powinien używać najjaśniejszych kolorów dla najlepszego zaprezentowania wizualnego.
Przypisanie motywu (theme_ntp_attribution.png)
Logo twórcy — wyświetlane w prawym dolnym rogu motywu Google Chrome. Jest to całkowicie opcjonalne.
Gdy przygotujesz wszystkie elementy obrazów, po prostu przenieś je do katalogu „images”, który utworzyłeś w kroku 1, dzięki czemu folder powinien zawierać 4–5 obrazów.
Krok 3: Utwórz plik manifest
Każdy dodatek Google Chrome, który może być zainstalowany jako aplikacja internetowa lub motyw, ma własny plik „manifest.json”. Ten plik dostarcza przeglądarce informacje o motywie.
Więcej informacji o formacie pliku JSON znajdziesz w naszej bazie.
Manifest zawiera kod dla 4 różnych rzeczy: nazwy, obrazów, kolorów, odcieni (tints) i właściwości. Przykład kodu w pliku manifest.json pokazano poniżej.
|
{ "version": "1.0", "name": "my_new_theme", "theme": { "images" : { "theme_frame" : "images/frame.png", "theme_toolbar" : "images/toolbar.png", "theme_ntp_background" : "images/background.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": [10 , 17 , 27], "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" } } } |
Wystarczy otworzyć nowy plik w notatniku, skopiować kod, wkleić go i zapisać pod nazwą manifest. Następnie zmień rozszerzenie pliku z txt na json.
Skoro masz już utworzony plik manifest.json, spójrzmy na to, co oznaczają i robią poszczególne sekcje oraz co możesz w nich edytować.
Nazwa
To nazwa twojego nowego motywu Google Chrome. Nazwa w pliku manifest.json powinna odpowiadać nazwie twojego motywu zapisanej w kroku 1.
Obrazy
Obrazy z kroku 2 naszego poradnika są zdefiniowane w tej sekcji pliku manifest.json. Jeśli chcesz zmienić nazwę pliku lub folderu z obrazami, musisz również odpowiednio zmienić wpisy w pliku manifest.json.
Kolory
Każdy element w tej sekcji określa kolory używane w motywie. O kolorach trzeba pamiętać tylko o kilku rzeczach:
- kolor tekstu przycisku paska narzędzi pobierania jest taki sam jak kolor tekstu zakładek;
- kolor tła paska stanu jest taki sam jak wybrany kolor paska narzędzi;
- kolor tekstu na pasku stanu jest taki sam jak wybrany kolor tekstu karty.
Odcienie (tints)
element tints określa odcień koloru dla wszystkich ikon wewnątrz wszystkich przycisków na pasku narzędzi (forward, back, refresh itd.). Każdy odcień ma wartość zmiennoprzecinkową z zakresu od 0 do 1 lub -1. Wartość -1 oznacza, że nie zostaną wprowadzone żadne zmiany w kolorze tego elementu. Wartości odcieni są ułożone jako [Hue, Saturation, Luminance] i możesz używać wartości, na przykład 0.256, 0.2, -0.4, aby zdefiniować kolor. Możesz dostosować wartości, aby przyciski albo „wtopiły się”, albo wyróżniały.
Właściwości
sekcja properties w pliku manifest.json służy do zdefiniowania ustawień głównego obrazu tła. Obraz tła można wyrównać do góry, do dołu lub do środka przeglądarki, a także możesz zdecydować, czy ma się powtarzać w osi x albo y, czy w ogóle nie ma się powtarzać.
Krok 4: Pakowanie i podgląd motywu
Now powinieneś mieć przygotowane obrazy w katalogu "my_new_theme/images" oraz plik manifest.json w katalogu "my_new_theme".
Aby przetestować nowy motyw, otwórz przeglądarkę internetową Google Chrome i wpisz w pasku adresu „chrome://extensions”, a następnie naciśnij klawisz Enter.
Gdy już tam wejdziesz, kliknij na „+” obok linku „Developer model” po prawej stronie. Teraz powinno pojawić się kilka opcji na stronie. Kliknij „Load unpacked extension” i przejdź na swoim komputerze do katalogu „my_new_theme”. Wybierz go i kliknij OK. Jeśli w tym folderze jest prawidłowy plik manifest.json, Chrome załaduje twój nowy motyw. Teraz sprawdź w przeglądarce, czy wszystko jest w porządku.
Możesz powtarzać ten proces, aż dopracujesz swój motyw Google Theme do perfekcji. Gdy będziesz zadowolony z własnego motywu Google Chrome, po prostu naciśnij przycisk „Pack extension”, a Chrome utworzy motyw i zapisze go w katalogu „my_new_theme” z rozszerzeniem CRX. Zostanie także utworzony plik z rozszerzeniem PEM, który jest kluczem prywatnym do twojego motywu Google — pozwoli on aktualizować to rozszerzenie w przyszłości, jeśli prześlesz swój motyw do Chrome Extensions Gallery.
Jeśli wszystko pójdzie dobrze, Google Chrome poinformuje, że utworzono pliki .crx i .pem oraz wyświetli też lokalizację tych nowych plików. Gdy utworzysz kilka motywów Google Chrome, zobaczysz, że naprawdę nie jest to takie trudne.
Jak tworzyć motywy Chrome łatwiej
Oczywiście możesz robić to szybciej, jeśli używasz dedykowanych narzędzi dla Chrome Themes. Jednym z takich narzędzi był teraz już wycofany z użycia Theme Creator. Nadal możesz go pobrać ze sklepu web store i używać, ale nie jest już wspierany przez Google i mogą pojawiać się usterki. Mimo to nadal jest jednym z najwygodniejszych sposobów na szybkie tworzenie nowych motywów Chrome.