Publicidade

Lomadee, uma nova espécie na web. A maior plataforma de afiliados da América Latina.

segunda-feira, 3 de agosto de 2009

Criando temas para o Google Chrome

Se você gostou dos temas para o Google Chrome (além do meu, também tem esse e esse outro), que tal agora fazer o seu próprio? É bem fácil, mas requer alguma habilidade para manipular as imagens. Vamos lá.

Primeiro, pegue um dos temas acima. Ele vem com a extensão CRX, mas na verdade ele é um arquivo zipado. Altere a extensão dele para ZIP e descompacte-o em uma pasta, C:\meutema\, por exemplo. Observe que dentro dele há uma pasta "images" e um arquivo "manifest.json". A pasta "images" contém, obviamente, as imagens usadas no tema.

O arquivo JSON é a a definição de cores e imagens do tema. Ele tem uma estrutura similar ao CSS, então se você estiver familiarizado com essa linguagem vai achar bem fácil fazer as alterações, se não for o seu caso não se preocupe, é bastante simples. O Google disponibilizou uma documentação aqui, mas vamos ver um exemplo. Abra o "manifest.json" em qualquer editor de texto puro, como o bloco de notas, e você vai ver algo como isso:

{
"name": "black canary theme",
"theme": {
"colors": {
"frame": [ 0, 0, 0 ],
"ntp_link": [ 0, 0, 0 ],
"ntp_section": [ 172, 172, 172 ],
"ntp_text": [ 52, 23, 15 ],
"toolbar": [ 222, 222, 222 ]
},
"images": {
"theme_frame": "images/theme_frame_blackcanary.png",
"theme_ntp_background": "images/theme_ntp_background_norepeat.png",
"theme_toolbar": "images/theme_toolbar.png"
},
"tints": {
"buttons": [ 33, 0.5, 0.47 ]
}
},
"version": "1.0"
}
Pulemos a propriedade "name", que dispensa comentários. A segunda, "colors", vai indicar as cores usadas no tema. "Frame" para a borda da janela, "ntp_section" para fundo de títulos, "ntp_text" para a fonte dos títulos, e por aí vai. As cores são indicadas no padrão RGB, e você provavelmente vai querer fazer muitas experimentações.

Na propriedade "images" você indica as imagens que serão usadas no tema. "Theme_frame" é a imagem principal, que vai na barra de títulos. Dica: ela deve ser bastante comprida e estreita, se você não quiser que a imagem seja repetida como em um mosaico. "Theme_ntp_background" é mostrada ao fundo ao abrir uma nova guia, e "theme_toolbar" é o fundo da barra de ferramentas.

Por último, "tints" indica a cor dos ícones nos botões na barra de ferramentas. Essa propriedade funciona um pouco diferente das outras, então experimente bastante antes de chegar à cor que você quer.

Mas e agora, e para testar as modificações no browser? Basta compactar de novo os arquivos e alterar a extensão para CRX? Não! Você precisa "empacotar" a extensão usando o próprio Chrome. Só que em linha de comando. Abra uma janela do saudoso DOS (clique em Iniciar, Executar e digite "cmd". Nela, navegue até a pasta que contém o chrome.exe e digite o comando a seguir:

chrome.exe --pack-extension=C:\meutema

Onde C:\meutema\ é a pasta onde estão os seus arquivos. Pronto! Ele deve gerar dois arquivos, meutema.crx e meutema.pem. Basta dar um clique duplo no CRX e, se estiver tudo certo, ele aplica o tema. Dúvidas? Poste aí nos comentários.

_\\//

6 comentários:

  1. Cara, o tutorial é ótimo!
    mas qdo eu vou salvar em *.zip nao salva, ja instala.
    Vc pode me ajudar?

    ResponderExcluir
  2. Pedro, clique com o botão direito do mouse no link do tema e escolha "Salvar link como..." ou algo assim. Dessa forma você consegue salvar o arquivo CRX e depois alterar a extensão dele para ZIP.

    ResponderExcluir
  3. Vlw vey, ja consegui :D
    mais e se eu quiser zipar para *.crx, como eu faço?

    ResponderExcluir
  4. Pedro, no final do post eu ensino como fazer isso em linha de comando. Mas se você já está usando a versão 4 do Chrome, acesse o menu Ferramentas (aquele com o ícone de chave-de-boca) e clique em Extensões. Vai aparecer uma tela com as extensões instaladas no seu navegador. No lado direito tem um botão Pack extension que serve exatamente para isso.

    ResponderExcluir
  5. Bom tuto... só to em duvida numa coisa, eu sei q tu explico pro karinha ai em cima porém não localizo o butão extensões...
    No final do post tu tbm explica porém como eu faria pra chegar até a pasta pelo akele quadradozinho q só responde a certos comandos?!

    ResponderExcluir
  6. Desculpe, não entendi sua dúvida. Pode explicar melhor?

    ResponderExcluir