Como fazer seu próprio tema do Google Chrome

Você já quis personalizar a aparência do seu navegador da web? Os temas para o Google Chrome podem ser usados ​​para fazer exatamente isso. A Chrome Theme Store pode ter uma grande variedade de opções, de temas espaciais a carros e belas paisagens, mas e se nenhuma dessas opções for exatamente o que você deseja, ou se você quiser personalizar o Chrome para ter uma de suas próprias fotos como um fundo em vez disso? Bem, felizmente você pode fazer exatamente isso.

Existem dois métodos para criar seu próprio tema. O Chrome tem uma função embutida simples que permite importar uma imagem de fundo para a página da nova guia e personalizar o esquema de cores da interface do usuário a partir de uma série de predefinições. Se o recurso integrado do Chrome não tiver a quantidade de opções de personalização que você deseja, um site chamado ThemeBeta oferece a você um criador de temas do Chrome rico em recursos, mas fácil de usar (embora o processo de instalação seja um pouco mais complexo). Neste artigo, vamos orientá-lo no processo de criação de seu próprio tema do Chrome com ambas as ferramentas.

A ferramenta simples integrada do Chrome

Para usar o editor de temas integrado do Chrome, abra uma nova guia. No canto inferior direito da página nova guia há um ícone de lápis, clique nele para personalizar a aparência do seu Chrome.

Clique no ícone de lápis para abrir o editor de tema.

Na janela pop-up que aparece quando você clica no ícone de lápis, sua primeira opção é configurar a imagem de fundo. Aqui você pode escolher entre um número muito limitado de opções predefinidas ou pode carregar sua própria imagem. Esta imagem de plano de fundo só se aplica à página da nova guia, não se tornará um plano de fundo em nenhum site real.

Selecione uma imagem de plano de fundo para a página da nova guia.

Depois de selecionar uma imagem de fundo, vá para a guia “Cor e tema”. Aqui você pode escolher entre uma seleção de combinações de cores. Essas opções de cores afetam as cores da guia e as barras de pesquisa e de favoritos que formam a interface de usuário do Chrome. Em outras palavras, na maioria dos sites que você visita, essas cores serão mais perceptíveis do que a imagem de fundo, simplesmente porque a barra superior do navegador sempre será desta cor!

Selecione um esquema de cores predefinido.

Se nenhum dos esquemas de cores predefinidos for exatamente o que você deseja, a opção de cor superior esquerda permite que você escolha seu próprio esquema de cores, com um espectro completo de opções de cores para escolher. Para selecionar uma cor, primeiro clique no símbolo superior esquerdo e, em seguida, use o pop-up que aparece para escolher sua cor. Ajuste a mira no espectro de cores para obter sua sombra e a seta preta à direita da janela para escolher o brilho do tom. Se você não tiver certeza de como isso funciona - quanto mais para cima ou para baixo você move a seta preta, mais clara ou mais escura fica a sua cor. Para tons mais intensos, defina a cruz perto do topo e a seta no meio. Para cores mais claras, mova a mira um pouco mais para baixo e a seta para cima.

Depois de selecionar a cor desejada, clique em “Adicionar às cores personalizadas” no canto inferior direito. Em seguida, selecione sua cor personalizada na lista “Cores personalizadas” no canto inferior esquerdo e clique em “OK” para aplicá-la. Se você está escolhendo um esquema de cores personalizado, você só pode escolher uma cor, o Chrome escolherá uma segunda cor semelhante para completar o tema com o que ele acha que vai se encaixar melhor.

Dica: o Chrome quase sempre pressupõe que a cor escolhida é a mais escura das duas cores do tema e escolherá uma segunda tonalidade mais clara. Escolha de acordo!

Selecione um esquema de cores personalizado.

Quando estiver satisfeito com sua imagem de fundo e conjunto de cores, clique em “Concluído” para salvar seu tema personalizado e você está pronto para começar!

Temas de terceiros simplificados

Se você quiser um tema simples, a ferramenta integrada do Chrome deve ser suficiente, mas se você quiser mais individualidade, ThemeBeta oferece mais controle. O site permite que você modifique manualmente as cores das guias de primeiro e segundo plano, o texto nas barras de guias e muito mais.

Em primeiro lugar, você precisa navegar até o site da ThemeBeta. Você pode navegar pelos temas enviados pelo usuário na página inicial ou pode ir direto para a página do criador do tema para começar a criar o seu. A primeira etapa, uma vez que você está no criador do tema, é escolher uma imagem de fundo. Clique em “1. Carregar uma imagem ”e, em seguida, carregar uma imagem do seu disco rígido. Esta imagem será a base do seu tema e será a imagem de fundo na página nova guia.

Dica: Qualquer imagem que você enviar deve estar no formato de arquivo PNG ou JPG, pois esses são os únicos formatos suportados. Use um conversor online se sua imagem for diferente.

Se a imagem que você carregou não parece boa, pode ser muito ampliada ou ter barras nas laterais ou na parte superior - então você deve tentar alterar as opções de “Imagem de fundo”. Respectivamente, eles configuram o alinhamento horizontal, o alinhamento vertical, se a imagem se repete se for muito pequena para a tela, como a imagem é redimensionada para caber na tela e um ajuste de escala manual. Teste as opções até encontrar algo que o agrade!

Configure o posicionamento de sua imagem de fundo.

Depois que sua imagem for carregada, a visualização no lado direito da página será atualizada para representar a aparência do seu tema. O segundo passo é clicar em “2. Gerar cores ”, este botão usará as cores presentes na imagem que você carregou, para criar uma paleta de cores semelhantes para usar no resto da interface do usuário.

Se o esquema de cores gerado automaticamente se adequar à aparência desejada, você pode pular aqui para as instruções de instalação . Mas se você quiser configurar manualmente as cores de coisas como guias de primeiro plano, guias de plano de fundo e a barra de ferramentas, os detalhes são abordados na seção de configuração avançada abaixo.

Configuração avançada

Existem duas guias de opções de configuração avançada disponíveis no canto superior esquerdo, a primeira é “Imagens”. Aqui você pode configurar uma imagem de fundo para certos elementos. Quando você passa o mouse sobre cada uma das opções, ele destaca em vermelho o elemento que essa configuração modificaria na visualização.

Passe o mouse sobre as opções para ver que parte da interface do usuário elas mudam.

Dica: NTP significa “página nova guia”, as opções que começam com este acrônimo estão presentes apenas na página nova guia, outras estão visíveis em outras páginas.

• “Fundo NTP” configura o fundo principal, se você importou uma imagem anteriormente esta já estará “Carregada”.
• “Frame” configura a interface do usuário, excluindo a lista de guias, barra de pesquisa e barra de favoritos.
• “Barra de ferramentas” configura a guia ativa, a barra de favoritos e a área ao redor da barra de pesquisa.
• “Fundo da guia” configura a cor de fundo para guias não ativas.
• “Sobreposição de quadro” permite configurar uma segunda imagem que se sobrepõe à imagem em “Quadro”.
• “Atribuição NTP” adiciona uma imagem ao canto esquerdo inferior da página da nova guia, geralmente para fins de marca d'água.

Dica: se você carregou uma imagem e não gostou de sua aparência, você pode removê-la clicando no botão “X” ao lado do marcador “Carregado” relevante. Se o upload de uma imagem mudou a cor de fundo desse elemento, você pode defini-lo de volta manualmente ou clicar em “Gerar cores” na guia “Básico” novamente para redefinir o esquema de cores.

The second advanced tab is titled “Colors”. Here – as with the options on the previous page that had a box next to them – you can use the box to open a colour picker and pick a solid colour for the respective elements. Once again, if you mouse over the configuration option, it will highlight the affected element in the preview in red.

Click the box to open the colour picker for the respective elements.

• “Toolbar” configures the background colour of the ThemeBeta attribution label in the bottom left of the new tab page.
• “Tab Text” configures the colour of the text in the currently active tab in the tab list. It also sets the colour of the ThemeBeta attribution text in the bottom left corner of the new tab page.
• “Background Tab Text” configures the colour of the text in the inactive tabs in the tab list.
• “Bookmark Text” configures the colour of the text of items in the bookmarks bar.
• “NTP Text” configures the colour of the text or the recommended/regular page links in the centre of the page.
• “NTP Link” doesn’t have any effect.
• “Control Buttons” configures the colour of the minimise, maximise and close buttons in the top right corner.
• “Buttons” configures the colour of the forwards, backwards, reload and home buttons.

Once you’ve configured all of the advanced options the way you want them, you’re ready to proceed to the installation process.

Installation of a third-party theme

Por motivos de segurança, o Google agora permite que apenas extensões e temas sejam instalados por meio da Chrome Webstore. Para instalar seu tema personalizado, você precisará habilitar um recurso de desenvolvedor. Infelizmente, essa mudança significa que o botão simples “Empacotar e instalar” nas guias “Básico” e “Empacotar” não funcionam mais. Se você tentar o método “Empacotar e instalar”, receberá uma mensagem de erro.

Arquivos CRX de terceiros não podem ser instalados no Chrome.

Para contornar isso, vá para a guia “Pacote” e clique em “Pacote e download do arquivo Zip”

Clique no botão “Empacotar e baixar o arquivo Zip” na guia “Empacotar”.

Depois de fazer o download do arquivo zip, extraia os arquivos e salve-os no disco rígido. Clique duas vezes no arquivo que você baixou e selecione Extrair na parte superior do seu visualizador de arquivos. Você terá que selecionar para onde extrair seus arquivos. Lembre-se de onde você os salvou para que possa carregá-los novamente com mais facilidade.

Dica: Se você renomear a pasta para indicar qual é o tema, pode ser mais fácil encontrá-lo novamente no futuro, se quiser reutilizá-lo.

Extraia os arquivos do arquivo ZIP e salve-os em seu disco rígido.

A próxima etapa é a página de extensões do Chrome. Você pode acessá-lo clicando nos três pontos no canto superior direito, em “Mais ferramentas”, depois em “Extensões”, ou pode clicar aqui .

Clique nos três pontos e, em seguida, em Mais ferramentas> Extensões.

Assim que estiver no menu de extensões, no canto superior direito da página, há um controle deslizante marcado “Modo de desenvolvedor”. Habilitá-lo. Assim que o modo de desenvolvedor estiver habilitado, três botões devem aparecer no canto superior esquerdo. O que você precisa é “Load unpacked”. Clique em “Carregar descompactado” e importe a pasta que você extraiu do arquivo zip anteriormente.

Habilite o modo de desenvolvedor e clique em “Carregar descompactado”.

Dica: você deseja importar a pasta pai, não a pasta “imagens” que ela contém. Se você não o renomeou antes, o nome será algo como “theme1234567890”

Assim que o tema for importado, um alerta aparecerá na guia atual, confirmando que o tema foi instalado e oferecendo um botão de desfazer. Antes de fechar este alerta, abra uma nova guia e certifique-se de que tudo esteja como você deseja.

Não esconda o alerta de confirmação até ter certeza de que está satisfeito com o resultado!

Se o seu tema não saiu da maneira que você esperava, clique em “Desfazer” e tente modificar o seu modelo novamente. Quando estiver satisfeito com os resultados, fique à vontade para fechar a página “Extensões” e continuar navegando com seu novo tema personalizado do Chrome.