W dzisiejszym dość krótkim poście, przedstawię Ci metodę tworzenia własnych motywów dla przeglądarki Chrome. Pozwoli Ci to na późniejsze dostosowanie jej, pod własne potrzeby. W aktualnym przypadku stworzymy motyw w stylu DarkCleanMatrix :)
1. Chrome
Od czegoś trzeba zacząć...
Na samym początku, jako bazę tworzymy nasz plik z manifestem. Sama konfiguracja ma dość przejrzystą strukturę, gdyż stworzona jest w formacie json. W dalszej części będzie nas interesowała głównie sekcja [theme][colors].
manifest.json
{
"manifest_version": 3,
"name": "Minimal for programmers",
"version": "1.0.0",
"description": "Minimal theme for programmers",
"theme": {
"colors": {
"frame": [13,2,8],
"frame_inactive": [13,2,8],
"frame_incognito": [13,2,8],
"frame_incognito_inactive": [13,2,8],
"background_tab": [13,2,8],
"background_tab_inactive": [13,2,8],
"background_tab_incognito": [13,2,8],
"background_tab_incognito_inactive": [13,2,8],
"bookmark_text": [0,255,65],
"button_background": [13,2,8],
"tab_background_text": [235,235,235],
"tab_background_text_inactive": [235,235,235],
"tab_background_text_incognito": [235,235,235],
"tab_background_text_incognito_inactive": [235,235,235],
"tab_text": [0,255,65],
"toolbar": [13,2,8],
"toolbar_button_icon": [0,255,65],
"omnibox_text": [235,235,235],
"omnibox_background": [20,21,24],
"ntp_background": [13,2,8],
"ntp_header": [0,255,65],
"ntp_link": [ 0, 255, 0 ],
"ntp_text": [0,255,65]
},
"properties": {
"ntp_background_alignment": "bottom",
"ntp_background_repeat": "no-repeat"
},
"tints": {
"buttons": [13,2,8.2]
}
}
}Pierwsze uruchomienie
Na początku upewniamy się że naszej przeglądarce na stronie ustawień, w prawym górnym rogu mamy włączony tryb developera.
Po czym plik manifest.json z pkt.1, umieszczamy w folderze (może mieć dowolną nazwę), który następnie spakujemy do archiwum typu zip np. po przez program 7zip.
Nowo utworzoną paczkę należy przeciągnąć na otwartą w chrome stronę ustawień (chrome://extensions/). Po tym, motyw powinien załadować się automatycznie.
Finalny wynik
(Kliknij na zdjęcie, aby powiększyć)
Czas na dostosowanie
W celu dostosowania motywu pod siebie, polecam skorzystać z tego arkusza opisującego pozostałe funkcje które następnie ustawimy w sekcji [theme][colors].
2. Firefox
Zasada pozostaje ta sama...
W podobnym tonie przygotowałem motyw pod firefox-a. W tym przypadku również tworzymy plik manifest.json, który następnie wrzucamy do archiwum .zip. Plik następnie umieszczamy na stronie ustawień (about:addons).
manifest.json
{
"manifest_version": 2,
"version": "1.0",
"name": "Minimal for programmers",
"theme": {
"images": {
"additional_backgrounds": [
"images/bg-000-5672c42860d5b06e1058dc477397f3ef.svg"
]
},
"properties": {
"additional_backgrounds_alignment": [
"top"
],
"additional_backgrounds_tiling": [
"repeat"
]
},
"colors": {
"toolbar": "rgb(0, 0, 0)",
"toolbar_text": "rgb(0, 255, 69)",
"frame": "rgb(0, 0, 0)",
"tab_background_text": "rgb(0, 255, 69)",
"toolbar_field": "rgb(0, 0, 0)",
"toolbar_field_text": "rgb(0, 255, 69)",
"tab_line": "rgb(0, 0, 0)",
"popup": "rgb(0, 0, 0)",
"popup_text": "rgb(0, 255, 69)",
"tab_selected": "rgb(49, 49, 49)",
"tab_text": "rgb(0, 255, 69)",
"toolbar_bottom_separator": "rgb(0, 255, 69)",
"toolbar_field_border_focus": "rgb(0, 0, 0)",
"tab_loading": "rgb(0, 0, 0)"
}
}
}*Firefox, jako jedyny wymaga by dodatki (nawet własne), były podpisane. Możesz dla testów włączyć tymczasowo obsługę dodatków do końca sesji, bądź przejść pod adres "about:config" i ustawić flagę "xpinstall.signatures.required" jako "false".
Finalny wynik
(Kliknij na zdjęcie, aby powiększyć)
Komentarze