[tutorial] criar tema para chrome

e ae galera ano passado fiz um tutorial ensinando criar extensao do chrome nesse tutorial vou ensinar como criar um tema para ele, para começar fazemos o mesmo esquema da extensao criamos um pasta e dentro dela criamos um arquivo com o nome manifest.json, dentro desse arquivo colocamos manifest_version seguido da versao que é 2, isso indica que a versao do arquivo manifest é a 2

Código:

{
 "manifest_version" : 2
}

depois usamos o name seguido do nome do tema (eu chamei de kodo koneko)

Código:

{
 "manifest_version" : 2,
 "name" : "kodo koneko"
}

depois a versao do tema que seria o version

Código:

{
 "manifest_version" : 2,
 "name" : "kodo koneko",
 "version" : "1.0"
}

agora usamos theme e abrimos um novo bloco de chaves

Código:

{
 "manifest_version" : 2,
 "name" : "kodo koneko",
 "version" : "1.0",
 "theme" : {
 }
}

dentro do bloco tema podemos usar outros atributos entre eles imagem e cores e atraves deles que vai modificar o tema do chrome, primeiro vamos brincar com imagens, usamos o atributo images e abrimos um novo bloco

Código:

{
 "manifest_version" : 2,
 "name" : "kodo koneko",
 "version" : "1.0",
 "theme" : {
 "images" : {
 }
 }
}

a primeira alteraçao que vamos fazer vai ser o fundo da nova aba, para isso usamos o atributo theme_ntp_background e passamos para ele o nome da imagem (a imagem deve estar dentro da pasta e deve ser no formato png e ela é estatica ou seja quando for desenhada no chrome vai continuar com o mesmo tamanho entao use uma imagem do tamanho certo no caso a imagem que eu usei tem tamanho 1920x1080)

Código:

{
 "manifest_version" : 2,
 "name" : "kodo koneko",
 "version" : "1.0",
 "theme" : {
 "images" : {
 "theme_ntp_background" : "highkoneko.png"
 }
 }
}

agora vamos instalar o tema para ver como fico, para isso aperte no botao opçao que fica perto da url aquele com tres riscos, depois configuraçao e extensoes, habilite o modo desenvolvedor depois aperte em carregar extensao expandida e localize a pasta

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

pronto agora so testar para ver se tem uma imagem de fundo la na nova aba

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

tipo agora vamos colocar uma imagem do autor (nao precisa ser uma foto so uma imagem escrito um texto ou slogan basta tambem nao precisa ser muito grande), para colocar a imagem do autor usamos o atributo theme_ntp_attribution (no caso usei apenas uma imagem que fiz no paint mesmo)

Código:

{
 "manifest_version" : 2,
 "name" : "kodo koneko",
 "version" : "1.0",
 "theme" : {
 "images" : {
 "theme_ntp_background" : "highkoneko.png",
 "theme_ntp_attribution" : "kodoslogan.png"
 }
 }
}

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

podemos colocar uma imagem na parte que fica aba atual url e favorito com o atributo theme_toolbar (no caso coloquei uma imagem toda azul)

Código:

{
 "manifest_version" : 2,
 "name" : "kodo koneko",
 "version" : "1.0",
 "theme" : {
 "images" : {
 "theme_ntp_background" : "highkoneko.png",
 "theme_ntp_attribution" : "kodoslogan.png",
 "theme_toolbar" : "kodoazul.png"
 }
 }
}

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

podemos colocar uma imagem na parte inferior da aba com o atributo theme_frame (no caso coloquei uma imagem toda vermelha)

Código:

{
 "manifest_version" : 2,
 "name" : "kodo koneko",
 "version" : "1.0",
 "theme" : {
 "images" : {
 "theme_ntp_background" : "highkoneko.png",
 "theme_ntp_attribution" : "kodoslogan.png",
 "theme_toolbar" : "kodoazul.png",
 "theme_frame" : "kodovermelho.png"
 }
 }
}

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

podemos colocar uma imagem nas outras abas com o atributo theme_tab_background (no caso coloquei uma imagem toda verde)

Código:

{
 "manifest_version" : 2,
 "name" : "kodo koneko",
 "version" : "1.0",
 "theme" : {
 "images" : {
 "theme_ntp_background" : "highkoneko.png",
 "theme_ntp_attribution" : "kodoslogan.png",
 "theme_toolbar" : "kodoazul.png",
 "theme_frame" : "kodovermelho.png",
 "theme_tab_background" : "kodoverde.png"
 }
 }
}

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

existe outros atributos alem dos citados porem vamos nos limitar apenas nesses, para mudar a cor do texto criamos um atributo colors dentro do atributo theme e passamos um bloco para ele tambem

Código:

{
 "manifest_version" : 2,
 "name" : "kodo koneko",
 "version" : "1.0",
 "theme" : {
 "images" : {
 "theme_ntp_background" : "highkoneko.png",
 "theme_ntp_attribution" : "kodoslogan.png",
 "theme_toolbar" : "kodoazul.png",
 "theme_frame" : "kodovermelho.png",
 "theme_tab_background" : "kodoverde.png"
 },
 "colors" : {
 }
 }
}

para mudar a cor do texto na nova aba usamos o atributo ntp_text passamos para ele um conjunto com 3 valores que sao equivalente ao rgb (no caso eu coloque a cor azul para o texto 0,0,255)

Código:

{
 "manifest_version" : 2,
 "name" : "kodo koneko",
 "version" : "1.0",
 "theme" : {
 "images" : {
 "theme_ntp_background" : "highkoneko.png",
 "theme_ntp_attribution" : "kodoslogan.png",
 "theme_toolbar" : "kodoazul.png",
 "theme_frame" : "kodovermelho.png",
 "theme_tab_background" : "kodoverde.png"
 },
 "colors" : {
 "ntp_text" : [0,0,255]
 }
 }
}

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

para mudar a cor do texto da aba atual usamos o atributo tab_text (no caso coloquei amarelo 255,255,0)

Código:

{
 "manifest_version" : 2,
 "name" : "kodo koneko",
 "version" : "1.0",
 "theme" : {
 "images" : {
 "theme_ntp_background" : "highkoneko.png",
 "theme_ntp_attribution" : "kodoslogan.png",
 "theme_toolbar" : "kodoazul.png",
 "theme_frame" : "kodovermelho.png",
 "theme_tab_background" : "kodoverde.png"
 },
 "colors" : {
 "ntp_text" : [0,0,255],
 "tab_text" : [255,255,0]
 }
 }
}

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

bom galera esse é so alguns de muitos outros atributos que existe para customizar seu tema, embora esse tutorial so vou mostrar esses ainda sim da para criar alguns temas legais ai ^^

by kõdo no kami

legal man sempre com dicas/post interessantes, vou testar aqui =)