LanguageExtensões relacionadas:
Fazendo seus próprios Temas para Chrome
Temas do Google Chrome são extensões favoritas para seus usuários e você pode encontrar milhares deles pela internet, com a maior fonte sendo a Chrome Web Store.
Mas muitos usuários curiosos gostariam de criar seus próprios temas pessoais ou até mesmo compartilhá-los com seus amigos e o mundo externo.
Este pequeno tutorial mostrará a estrutura interna dos temas do Google e como você pode criar o seu próprio a partir de qualquer imagem.
Estrutura dos Temas do Chrome
Um Tema para Chrome nada mais é do que uma extensão que não contém código-fonte extenso ou scripts e basicamente consiste em duas partes:
- imagens usadas para o tema em si
- um único arquivo manifest.json que contém parâmetros e configurações para formar o tema
Estas duas partes são então empacotadas em um único arquivo com a extensão de arquivo CRX.
Como preparar manualmente um Tema do Google
Você certamente precisará de um papel de parede adequado que deseja usar para seu tema e também de uma ideia básica sobre o tema como um todo. Mas você também precisará de várias ferramentas de software para fazer isso acontecer:
- Um editor de imagens. Use qualquer programa que preferir, há muitas ferramentas de software disponíveis para usar. Até o básico Microsoft Paint serve, mas é claro que você pode usar ferramentas profissionais, como Adobe Photoshop ou CorelDraw.
- Um editor de texto. O bloco de notas básico serve, assim como qualquer outro programa similar.
Uma vez que você tenha tudo isso, basta seguir os passos abaixo para criar seu próprio tema do Google Chrome.
Passo 1: Crie um diretório com o nome do tema
Uma das primeiras coisas que você fará é criar um novo diretório para seu tema e nomeá-lo com o nome do seu tema. Digamos "my_new_theme". Dentro desta pasta crie outra chamada "images", que conterá todas as imagens usadas pelo seu novo tema.
Passo 2: Crie as imagens para o seu tema
Para criar um tema funcional você precisará de quatro elementos básicos de imagem, ou cinco, se quiser adicionar seu próprio logotipo pessoal ao tema, mas isso é pura opção. Todas as imagens usadas em temas do Google Chrome devem estar no formato de arquivo PNG.
Se suas imagens estiverem em outro formato, você terá que convertê-las primeiro para PNG com qualquer software ou ferramenta de conversão online disponível.
Aqui está a lista de cada elemento de imagem com os requisitos adequados:
Moldura do Tema (frame.png)
Esta imagem é usada para a moldura do seu novo tema do Google Chrome e como imagem de fundo dos botões "Fechar", "Minimizar" e "Maximizar". Se você não quiser usar esta imagem, então seu tema criado para Chrome funcionará como o tema padrão do Chrome e exibirá a barra de título nativa do sistema operacional.
A imagem moldura do tema precisa ter uma altura mínima de 30px sem limitação na largura. Este elemento geralmente é feito com as cores mais escuras.
Barra de Ferramentas do Tema (toolbar.png)
Este elemento do tema é exibido como o fundo dos botões "Avançar", "Voltar" e "Atualizar" e também como a barra de ferramentas das extensões. Representa tanto a aba atual quanto a barra de ferramentas.
Precisa de uma altura mínima de 120px sem limitação na largura.
Fundo da Aba do Tema (tab.png)
Usado para abas inativas caso mais abas estejam abertas ao mesmo tempo. Tem requisito de altura mínima de 65px e sem limitações na largura.
Fundo da Página Nova (background.png)
Isso representará a imagem principal exibida quando uma nova aba é aberta. O tamanho mínimo recomendado da imagem é 800x600, mas para melhor aparência, use papéis de parede que correspondam à resolução da tela na qual o tema será usado. Esta imagem deve usar as cores mais claras para melhor apresentação visual.
Atribuição do Tema (theme_ntp_attribution.png)
O logotipo do criador, exibido no canto inferior direito do tema do Google Chrome. É puramente opcional.
Depois de preparar todos os elementos de imagem, mova-os para o diretório "images" que você criou no passo 1, assim a pasta deve conter 4-5 imagens.
Passo 3: Crie o arquivo manifest
Todo add-on do Google Chrome que pode ser instalado como aplicação web ou tema tem seu próprio arquivo "manifest.json". Este arquivo fornece ao navegador informações sobre o tema.
Você pode encontrar mais informações sobre formato de arquivo JSON em nosso banco de dados.
O manifest contém código para 4 coisas diferentes: nome, imagens, cores, tonalidades e propriedades. Um exemplo do código no arquivo manifest.json é mostrado abaixo.
|
{ "version": "1.0", "name": "my_new_theme", "theme": { "images" : { "theme_frame" : "images/frame.png", "theme_toolbar" : "images/toolbar.png", "theme_ntp_background" : "images/background.png", "theme_tab_background" : "images/tab.png", "theme_ntp_attribution" : "images/theme_ntp_attribution.png" }, "colors" : { "ntp_link": [255,255,255], "ntp_text": [255,255,255], "ntp_section_link": [255,255,255], "ntp_section_text": [10 , 17 , 27], "ntp_background": [10 , 17 , 27], "frame": [10 , 17 , 27], "toolbar": [10 , 17 , 27], "tab_text": [255,255,255], "tab_background_text": [10 , 17 , 27], "bookmark_text": [255,255,255] }, "tints" : { "buttons" : [0.33, 0.5, 0.47], "frame_inactive": [0.50, 0.50, 0.50], "frame_incognito_inactive": [0.50, 0.50, 0.50] }, "properties" : { "ntp_background_alignment" : "bottom", "ntp_background_repeat": "no-repeat" } } } |
Basta abrir um arquivo novo no bloco de notas, copiar e colar o código e salvar com o nome manifest. Depois disso, renomeie a extensão de txt para json.
Agora que você criou seu próprio arquivo manifest.json, vamos analisar o que cada uma das seções significa e faz e o que você pode editar.
Nome
Esse é o nome do seu novo tema do Google Chrome. O nome no arquivo manifest.json deve corresponder ao nome do seu tema escrito no Passo 1.
Imagens
As imagens do Passo 2 do nosso guia são definidas nesta seção do arquivo manifest.json. Se quiser mudar o nome do arquivo ou a pasta das suas imagens, você terá que fazer a correspondente alteração também no arquivo manifest.json.
Cores
Cada elemento desta seção define as cores usadas no tema. Há apenas algumas coisas para lembrar sobre cores:
- A cor do texto do botão de download na barra de ferramentas é a mesma que a cor do texto dos bookmarks.
- A cor de fundo da barra de status é a mesma que a cor da barra de ferramentas que você escolher.
- A cor do texto na barra de status é a mesma que a cor do texto da aba que você escolher.
Tonalidades
O elemento tonalidade especifica a tonalidade de cor para todos os ícones dentro de todos os botões na barra de ferramentas (avançar, voltar, atualizar, etc.). Cada tonalidade tem um valor flutuante de 0 a 1 ou -1. O valor -1 significa que nenhuma alteração será feita na cor desse elemento. Os valores das tonalidades são organizados como [Matiz, Saturação, Luminosidade] e você pode usar valores como por exemplo 0.256, 0.2, -0.4 para definir a cor. Você pode ajustar os valores para fazer os botões se misturarem ou se destacarem.
Propriedades
A seção propriedades no arquivo manifest.json é usada para definir as configurações para a imagem principal de fundo. A imagem de fundo pode ser alinhada ao topo, baixo ou centro do navegador e você pode escolher se ela se repete ao longo do eixo x ou y, ou não se repete.
Passo 4: Empacotando e visualizando seu tema
Agora você deve ter suas imagens prontas no diretório "my_new_theme/images" e um arquivo manifest.json no diretório "my_new_theme".
Para testar seu novo tema, abra seu navegador Google Chrome e digite "chrome://extensions" na barra de endereço e pressione enter.
Uma vez dentro, clique no "+" próximo ao link "Modo de desenvolvedor" do lado direito. Você deverá ver algumas opções aparecerem na página. Clique em "Carregar extensão descompactada" e navegue pelo seu computador até o diretório "my_new_theme". Selecione-o e pressione OK. Se um arquivo manifest.json apropriado estiver presente nessa pasta, o Chrome carregará seu novo tema. Agora confira seu navegador para ver se está tudo certo.
Você pode repetir esse processo até ajustar seu próprio tema do Google até a perfeição. Quando estiver satisfeito com seu Tema personalizado do Google Chrome, basta pressionar o botão "Empacotar extensão" e o Chrome criará o tema e salvará no diretório "my_new_theme" com a extensão de arquivo CRX. Também será criado um arquivo com extensão PEM, que é uma chave privada para seu tema Google, que permitirá atualizar essa extensão no futuro, se você fizer upload do seu tema para a Galeria de Extensões do Chrome.
Se tudo correr bem, o Google Chrome informará que os arquivos .crx e .pem foram criados e também mostrará o local destes novos arquivos. Depois que você criar alguns temas para Google Chrome, verá que não é tão difícil assim.
Como fazer Temas para Chrome mais facilmente
Você pode é claro fazer as coisas mais rapidamente se usar algumas das ferramentas dedicadas para Temas do Chrome. Uma dessas ferramentas foi, agora descontinuada, o Theme Creator. Você ainda pode baixá-la da web store e usar, mas ela não é mais suportada pelo Google e pode apresentar falhas. Ainda assim é uma das maneiras mais convenientes de criar novos Temas para Chrome rapidamente.