Como criar um tema para o Google Chrome | Pplware Kids

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.

browser02


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” : { }, 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.

img_chrometema01

Agora, clica em Modo de programador e depois em Carregar extensão descomprimida.

img_chrometema02

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!

Arquivado na categoria: O meu computador


Deixar uma resposta


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.



×