Como criar um tema para o Google Chrome
Olá amigos! Tudo bem?
Há alguns dias, ensinámos-te a personalizar o Google Chrome (ver aqui) e hoje, vai ser ainda melhor! E se criarmos os nossos próprios temas? Com as cores e imagens que quisermos!!!
Neste tutorial vamos criar um tema passo a passo e falarei sobre cada item que constitui o tema.
Para começarmos a criar um tema para o Chrome, precisamos de algum local para armazenar os ficheiros, para isso, cria uma pasta onde quiseres com o nome que quiseres. Eu, por exemplo, vou criar uma pasta com o nome “Pplware Kids”.
Dentro dessa pasta criamos uma pasta chamada “imagens” (sem aspas) para as imagens.
Agora, abrimos o Bloco de Notas e cola o seguinte texto:
{
|
||
"author": "(Escreve o teu nome)", "manifest_version": 2, "version": "1.0", "name": "Pplware Kids", "theme": {
|
||
"images" : {
}, "colors" : {
}, |
||
} |
||
} |
||
Agora, para continuar a criação do tema, precisamos das imagens necessárias, que devem ser colocadas na pasta “imagens” (sem aspas) criada anteriormente. Depois de colocares todas as imagens pretendidas nessa pasta, vamos analisar a seguinte tabela:Onde diz (Escreve o teu nome) deves escrever o teu nome para que na informação do tema esteja lá o nome do criador.
Elementos de Imagens
| Descrição | Notação manifest.json | Tamanho Recomendado |
| Área por detrás dos separadores. | “theme_frame” | ∞ x 80 |
| A mesma área que a anterior só que nos separadores inativos. | “theme_frame_inactive” | ∞ x 80 |
| A mesma área que na primeira só que no modo Privado. | “theme_frame_incognito” | ∞ x 80 |
| A mesma área que a anterior só que nos separadores inativos do modo Privado. | “theme_frame_incognito_inactive” | ∞ x 80 |
| Imagem para o separador ativo (atual) e a barra de ferramentas. | “theme_toolbar” | ∞ x 120 |
| Área dos Separadores que não estão ativos | “theme_tab_background” | ∞ x 65 |
| O mesmo que a anterior só que no Modo Privado. | “theme_tab_background_incognito” | ∞ x 65 |
| Imagem de fundo quando, por exemplo, abrimos um novo separador. | “theme_ntp_background” | Mínimo recomendado: 800 x 600 |
| Parte de trás da “theme_frame” não incluindo os separadores. | “theme_frame_overlay” | 1100 x 40 |
| Imagem que aparece na secção “Tema Criado Por:” | “theme_ntp_attribution” | |
| Fundo dos botões de controlo (Minimizar, Maximizar e Fechar) | “theme_window_control_background” |
Na tabela anterior, é possível encontrar os elementos de imagens que podem ser inseridos num tema para o Google Chrome e, devem ser inseridos entre os elemento “images” : { e }, da seguinte forma:
"images" : {
|
|
"theme_frame": "imagens/(nome da imagem).(extensão)" |
|
}, |
|
E se houver mais que uma imagem a ser colocada:
"images" : {
|
|
"theme_frame": "imagens/(nome da imagem).(extensão)", |
|
"theme_ntp_background" : "imagens/(nome da imagem).(extensão)" |
|
}, |
|
Ou seja, sempre que colocares um outro elemento a seguir, deves colocar uma vírgula no final do anterior, mas nunca no último, caso o faças irá dar erro.
Agora, a segunda tabela.
Elementos de Cores
| Descrição | Notação manifest.json |
| Cor dos separadores | “frame” |
| Cor dos separadores no modo inativo | “frame_inactive” |
| Cor dos separadores no modo privado | “frame_incognito” |
| Cor dos separadores no modo inativo do modo Privado | “frame_incognito_inactive” |
| Cor da barra dos marcadores (quando não está sempre visível) | “toolbar” |
| Cor do texto no separador atual | “tab_text” |
| Cor do texto nos separadores inativos | “tab_background_text” |
| A cor do texto dos marcadores | “bookmark_text” |
| A cor do fundo | “ntp_background” |
| Cor do texto que aparece dentro da área do fundo | “ntp_text” |
| Cor dos links no fundo | “ntp_link” |
| Cor da linha dos links no fundo | “ntp_link_underline” |
| A cor dos quadrados das secções quando o cursos etá por cima | “ntp_header” |
| Cor dos “Separadores Recentemente Fechados” e da frame das ligações rápidas | “ntp_section” |
| A cor do texto na secção | “ntp_section_text” |
| Cor do texto dos links da página das secções | “ntp_section_link” |
| Cor da linha inferior dos links das secções | “ntp_section_link_underline” |
| Cor de fundo de todos os itens da barra de tarefas | “button_background” |
A aplicação dos elementos desta tabela faz-se da mesma forma do anterior só que, em vez de colocarmos a imagem entre aspas colocamos a cor em RGB na forma [R, G, B] (vê aqui as cores) e colocamos entre “colors” : { e }, Por exemplo:
"colors" : {
|
|
"toolbar" : [251, 200, 65] |
|
}, |
|
Segue-se o mesmo raciocínio em relação às vírgulas: só se coloca no fim de uma notação caso haja alguma a seguir.
Depois de tudo definido, vamos guardar o ficheiro manifest.json e, para carregar a extensão para o Google Chrome, clicamos no botão das Definições e depois em Ferramentas e depois em Extensões.
Agora, clica em Modo de programador e depois em Carregar extensão descomprimida.
Navega até onde tens a pasta do tema e seleciona-a e o tema deve ser aplicado.
Para comprimir a extensão, ou seja, transformá-la num ficheiro .crx que é o tipo de ficheiro das extensões do Google Chrome, clicamos em Comprimir Extensão e guardar o tema em .crx e uma chave que deve ser utilizada para comprimir versões seguintes da extensão.
Para instalar um tema basta arrastar o ficheiro .crx para a página das Extensões e Adicionar.
O que foi aqui falado pode ainda ser mais aprofundado pois ainda existem os tints e as properties. Se alguém estiver interessado na continuação comente que será ouvido(a).
Vou vos deixar uma prenda! Criámos um tema para o Google Chrome do Pplware Kids que pode ser instalado através deste link. Espero que gostem!
Velocímetro Pplware
Teste a velocidade da sua Internet
Artigos mais populares
Aviso: Todo e qualquer texto publicado na internet através deste sistema não reflete, necessariamente, a opinião deste site ou do(s) seu(s) autor(es). Os comentários publicados através deste sistema são de exclusiva e integral responsabilidade e autoria dos leitores que dele fizerem uso. O autor deste site reserva-se, desde já, o direito de excluir comentários e textos que julgar ofensivos, difamatórios, caluniosos, preconceituosos ou de alguma forma prejudiciais a terceiros. Textos de caráter promocional ou inseridos no sistema sem a devida identificação do seu autor (nome completo e endereço válido de email) também poderão ser excluídos.