niedziela, 3 lipca 2011

Tutorial: Motywy do Google Chrome



Przedstawię Wam podstawy tworzenia motywów do Google Chrome. Nie jest to jakaś skomplikowana operacja ale wymaga cierpliwości i krzty rozumu, żeby skórka nie wypalała nam oczu po pierwszym włączeniu. Najpierw przedstawię rysunek pomocniczy, dzięki któremu będziemy widzieli co edytujemy.


  1. Tło
  2. Kolor tekstu na nieaktywnej karcie
  3. Kolor nieaktywnej karty
  4. Kolor tekstu aktywnej karty
  5. Kolor aktywnej karty
  6. Kolor tekstu Najczęściej odwiedzanych stron
  7. Kolor ramek w Najczęściej odwiedzanych stronach
  8. Kolor paska zakładek
  9. Obrazek paska
  10. Kolor paska narzędzi
  11. Kolor tekstu na pasku zakładek
  12. Kolor wypełnienia ramki Najczęściej odwiedzanych stron w przypadku gdy nie ma tam żadnej strony
Na początek utwórzmy folder w którym będziemy zapisywać wszystko co nam będzie potrzebne do skórki. Teraz stwórz plik o nazwie i rozszerzeniu „manifest.json” i edytuj go za pomocą notatnika.


{
"version": "1.0", //wersja motywu
"name": "Nazwa Motywu", //nazwa motywu
"theme": {
"images" : {
"theme_frame": "frame.png", // numer 9.
"theme_toolbar": "toolbar.png", // numer 5.
"theme_tab_background": "toolbarback.png", // numer 3.
"theme_ntp_background": "background.png" //numer 1.
},
"colors" : {
"frame" : [255, 255, 255], // numer 12.
"toolbar" : [25, 25, 112], // numer 10.
"ntp_text" : [209, 209, 209], // numer 6.
"ntp_section" : [51, 51, 204], // numer 7.
"button_background" : [255, 255, 255], // numer 10.
"ntp_background" : [0, 0, 0], // numer 8.
"tab_text" : [255, 255, 255], // numer 4.
"tab_background_text" : [255, 255, 255], // numer 2.
"bookmark_text" : [255, 255, 255] // numer 11.
},
"tints" : {
"buttons" : [0.00, 0.00, 0.00]
},
"properties" : {
"ntp_background_alignment" : "center bottom", // ustawienie tła
"ntp_background_repeat" : "no-repeat" // czy tło ma się powtarzać
}
}
}


Myślę, że nie ma tutaj nic nie zrozumiałego. Zdjęcia wklejamy bezpośrednio do folderu w którym znajduje się plik manifest.json. 
Jeśli mamy już wszystko porobione przejdźmy do testowania naszego motywu. Otwieramy przeglądarką w adresie strony wpisujemy „chrome://extensions/” i klikamy „Wczytaj rozszerzenie bez pakietu…” wybieramy folder w którym mamy zapisany nasz motyw i Voilà!
Jeśli coś jest jeszcze nie jasne proszę pisać w komentarzach :)

Brak komentarzy:

Prześlij komentarz