Como criar seu próprio tema no Google Chrome
O Google Chrome, hoje em dia, é um dos navegadores de internet mais usados no mundo, chegando a estar entre os cinco mais usados. O navegador conquistou esse lugar após incluir opções de personalização, como temas e extensões. O Chrome já possui uma grande variedade de temas disponíveis, mas o tema perfeito para você já existe? Se a resposta para essa pergunta é não, a solução é muito simples e não precisa ser um expert para conseguir criar seu próprio tema. Existem extensões no próprio navegador que permitem criar temas, como a extensão Meu tema do Chrome, que pode ser instalada nesse link: https://chrome.google.com/webstore/detail/my-chrome-theme/oehpjpccmlcalbenfhnacjeocbjdonic?utm_source=chrome-ntp-icon. Essa extensão é muito simples de usar e cria temas com qualquer imagem a sua escolha , como na imagem a seguir:
Para adicionar imagens a parte do toolbar, background tab, e frame é necessário criar seu próprio tema sem ajuda de nenhum aplicativo. Mas como se cria um tema dessa forma? A resposta é muito simples, confira a seguir:
Para criar seu tema, você vai precisar do programa notepad++, que pode ser baixado nesse link: https://notepad-plus-plus.org/download/v6.8.8.html, além desse programa, você precisa das imagens e criar uma pasta, a pasta deve conter o nome do seu tema, como mostra a seguir:
Dentro dessa pasta é necessário criar uma pasta com o nome Imagens, para colocar as suas imagens, você vai precisar de uma imagem para cada item a seguir, irei disponibilizar o tamanho mínimo e o tamanho que eu utilizei para cada uma:
attribution: não há altura ou largura mínima para essa imagem, eu utilizei 213x75
background: o mínimo é 800x600, eu utilizei 1344x648
frame: a altura mínima é 30 e não há mínimo de largura, eu utilizei 947x40
tab: a altura mínima é 65, não há mínimo para largura, eu utilizei 471x65
toolbar: a altura mínima é 120 e não há largura mínima, eu utilizei 1342x130
A sua pasta de imagens no final deve estar dessa forma:
É importante para a codificação que os nomes das imagens sejam iguais os nomes das imagens na foto. Para editar as imagens é muito simples, você pode usar programas CorelDRAW, photoshop, ou até mesmo o Paint, para mostrar o quanto é simples, eu fiz tudo no próprio paint, você pode recortar as imagens e remodelar da forma como quiser, basta clicar em selecionar e selecionar a parte desejada, em seguida clique em recortar, então você só tem que diminuir o tamanho e colar a imagem por cima, como vou demonstrar a seguir:
1-
2-
3- Após realizar os passos mencionados a sua imagem estará dessa forma:
Agora basta ajustar o tamanho, para isso clique em Redimensionar e então selecione pixels, se a caixa manter taxa de proporção estiver selecionada, a imagem sempre estará proporcional, e você só vai conseguir mudar um dos tamanhos e o outro irá se ajustar automaticamente, se você desmarcar essa opção será possivel escolher o tamanho exato da imagem:
Mas fique atento, ela pode ser distorcida no processo, então evite deixar altura e largura muito desproporcionais, se for necessário corte sua imagem.
Agora que já aprendemos a editar as nossas imagens, vamos passar para a parte da codificação, será necessário o notepad++ para editar o código, pegue o código a seguir e cole no seu notepad++:
{
"version": "1.0", "manifest_version":2, "name": "Easy to Learn", "theme": { "images" : { "theme_frame" : "imagens/frame.png", "theme_toolbar" : "imagens/toolbar.png", "theme_ntp_background" : "imagens/background.png", "theme_tab_background" : "imagens/tab.png", "theme_ntp_attribution" : "imagens/attribution.png" }, "colors" : { "ntp_link": [0,0,0], "ntp_text": [0,0,205], "ntp_section_link": [255,255,255], "ntp_section_text": [255,255,255], "ntp_background": [0,0,0], "frame": [255,255,255], "toolbar": [0,0,0], "tab_text": [255,255,255], "tab_background_text": [0,0,0], "bookmark_text": [255,255,255], "button_background": [255,255,255] }, "tints" : { "buttons" : [-1, 0.5, 0.5], "frame_inactive": [-1, -1, -1], "frame_incognito_inactive": [0.50, 0.50, 0.50] }, "properties" : { "ntp_background_alignment" : "bottom", "ntp_background_repeat": "no-repeat" } } }
Após colar o código no notepad++, vamos editá-lo, você vai precisar mudar o nome do tema, em "name": "exemplo", , agora na parte imagens, o código vai reconhecer na pasta as suas imagens, por isso é importante salvá-las com o mesmo nome que nas imagens mostradas aqui, se não, será necessário editar essa parte. Na parte "colors" : { você encontrará o local em que irá editar as cores de todo o texto que aparece no seu chrome, irei mostrar em uma imagem como vai ficar se deixar exatamente assim, mas para mudar a cor será necessário o código hexadecimal da cor, que você pode encontrar nessa página http://erikasarti.net/html/tabela-cores/ aqui você encontra código de várias cores, mas para facilitar, o código para preto é [0,0,0] e o código para branco é [255,255,255] é importante na hora de editar o código que não mude nada além dos números, uma vírgula errada pode resultar em syntax error.
Quando o seu código estiver pronto, você deve salvá-lo com o nome manifest.json, o nome precisa ser esse, e deve selecionar, na hora de salvar, all types (*.*), como mostra na imagem a seguir:
Quando o arquivo já estiver pronto e salvo na pasta com o nome do seu tema, como na imagem abaixo, o seu tema já estará pronto, agora vamos colocá-lo no seu navegador.
Abra o google Chrome e vá na aba extensões, digitando chrome://extensions/ no seu navegador, após abrir a página de extensões, clique em Carregar extensão expandida e em seguida selecione a pasta do tema, pronto, o seu tema já estará no navegador. Para fazer ajustes, como por exemplo, mudar a cor de algum escrito, basta abrir o código e editar a cor, após editar basta salvar e novamente ir em Carregar extensão expandida no chrome e selecionar a pasta, então você deve atualizar a página para ver as atualizações, dessa forma é possível criar o seu tema "perfeito". Com o código da forma que está, os escritos vão ficar como na imagem a seguir:
Quando seu tema estiver "perfeito", abra a página de extensões novamente e clique em Compactar Extensão, em seguida, na aba Diretório raiz da extensão:, selecione a pasta do seu tema e clique em Compactar extensão:
Pronto o seu tema já está funcionando normalmente, após compactar a extensão será criado um novo arquivo, não se preocupe, ele é o arquivo responsável pela instalação dos temas no Google Chrome.
Para vizualizar o processo sendo realizado, acesse o vídeo abaixo:
