seja bem vindo ao forum eof, caso nao seja cadastrado se cadastre para poder visualizar todo o conteudo ^^

Você não está conectado. Conecte-se ou registre-se

 » Programação Web » Outros » [tutorial] criar tema para chrome

[tutorial] criar tema para chrome

Ir em baixo  Mensagem [Página 1 de 1]

1 [tutorial] criar tema para chrome em Seg Fev 16, 2015 11:33 am

Kodo no Kami

avatar
master
master
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

[Você precisa estar registrado e conectado para ver esta imagem.]

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

[Você precisa estar registrado e conectado para ver 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"
 }
 }
}

[Você precisa estar registrado e conectado para ver 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"
 }
 }
}

[Você precisa estar registrado e conectado para ver 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"
 }
 }
}

[Você precisa estar registrado e conectado para ver 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"
 }
 }
}

[Você precisa estar registrado e conectado para ver 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]
 }
 }
}

[Você precisa estar registrado e conectado para ver 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]
 }
 }
}

[Você precisa estar registrado e conectado para ver 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


_________________ASSINATURA_________________
[Você precisa estar registrado e conectado para ver esta imagem.]
[Você precisa estar registrado e conectado para ver esta imagem.]

Contato:
Spoiler:

Contato:
Facebook: [Você precisa estar registrado e conectado para ver este link.]
Skype: hackerfts315
http://endoffile.umforum.net

2 Re: [tutorial] criar tema para chrome em Seg Fev 16, 2015 1:44 pm

susp3it0virtu@l

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


_________________ASSINATURA_________________

[Você precisa estar registrado e conectado para ver esta imagem.]

Frases:

-"Ninguém baterá tão forte quanto a vida.Porém,não se trata de quão forte pode bater,se trata de quão forte pode ser atingido e continuar seguindo em frente.É assim que a vitória é conquistada" - Rocky Balboa

-"Um homem não está acabado quando enfrenta a derrota. Ele está acabado quando desiste." - Richard Nixon

-"Sometimes,you have to demo a threat to spark a solution" - Barnaby Jack

Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum