iMotorola • 24.11.12 20:36
Como criar tema para Google Chrome 24.11.12 20:36
Eae galera do PPF, vim aqui ensinar como fazer um tema para o Google Chrome
Precisa de:
Paint.NET = Download Aqui
GIMP = Download Aqui
Note PAD = Download Aqui
JSONLite = Download Aqui
Vamos lá:
Uma vez que você tenha disponíveis os aplicativos necessários para a criação do tema, é hora de começar a trabalhar. Desde a criação das imagens até a produção de um arquivo CRX com o tema pronto são necessários quatro passos, os quais você confere em detalhes abaixo.
1° Criação das imagens:
Um dos elementos principais na personalização do Google Chrome são as imagens a serem utilizadas na barra de endereço, plano de fundo e barra de título. Você vai precisar de cinco imagens diferentes, cada uma para um elemento do navegador. Mesmo que o seu tema tenha apenas um jogo de cores e tonalidade, é necessário criar uma figura com a coloração desejada.
Para manter tudo organizado, crie uma pasta em qualquer diretório do seu computador com o nome escolhido para o tema. Em seguida, dentro da pasta criada adicione mais um diretório, com o nome “imagens”. Salve todas as figuras criadas dentro dessa pasta. Assim, fica mais fácil encontrar os arquivos para futuras edições.
Atenção: O elemento correspondente a cada uma das imagens é exibido em vermelho nas ilustrações abaixo.
Theme frame – imagem exibida na barra de título do navegador e atrás dos botões “Minimizar”, “Maximizar” e “Fechar”. A altura mínima para essa figura é de 30 pixels. Não há mínimo para a largura.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Theme toolbar – essa imagem será exibida na barra de favoritos e atrás da barra de endereço do Google Chrome. A altura mínima para essa figura é de 120 pixels. Não há mínimo para a largura.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Theme tab background – figura mostrada nas abas inativas do navegador. Embora normalmente os desenvolvedores prefiram colocar apenas uma cor nessa imagem é possível utilizar qualquer tipo de gravura. A altura mínima para essa figura é de 65 pixels. Não há mínimo para a largura.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
New tab page background – essa é a imagem mostrada como fundo quando uma nova aba é aberta no navegador. Recomenda-se o uso de uma imagem com resolução mínima de 800 x 600.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Theme attribution – a imagem escolhida para esse elemento é exibida no canto inferior direito da tela quando uma nova aba é aberta. Ela indica quem foi o criador do tema. Não há altura ou largura mínima para essa imagem.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Depois que todos os arquivos tiverem sido criados, a sua pasta “imagens” ficará com aparência similar à da imagem abaixo.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
2° Codificação
Uma vez que você tenha criado as imagens necessárias para inserir no tema, é hora de começar a mexer com o código. Para começar, abra um novo no Bloco de Notas, copiando o código abaixo para ele.
Agora, clique em “Arquivo” e escolha a opção “Salvar como...”. Digite “manifest.json” no campo “Nome do arquivo” e marque a opção “Todos os arquivos” no campo “Tipo”. Certifique-se de que o arquivo está sendo salvo na pasta raiz do tema e clique em “Salvar”.
Isso fará com que um arquivo do tipo JSON seja criado, o qual terá o código necessário para a criação do tema desejado. Não se deixe intimidar pelos comandos presentes no código. Por mais que pareçam coisas vindas de outro mundo, logo você vai perceber que, na verdade, o código até faz um pouco de sentido.
Como você pode perceber o tema é dividido em quatro partes principais: images, color, tints e properties. Cada uma delas é responsável pela configuração de uma propriedade do tema.
Em “images” é onde todas as imagens criadas no primeiro passo deste tutorial serão carregadas, a fim de serem exibidas em seus determinados lugares.
• theme_frame: recebe a imagem a ser utilizada na barra de título do navegador;
• theme_toolbar: recebe a imagem a ser utilizada na barra de favoritos e barra de endereço;
• theme_ntp_background: recebe a imagem que será exibida como fundo de tela ao abrir uma nova aba;
• theme_tab_background: recebe a imagem que será exibida nas abas inativas;
• theme_ntp_attribution: recebe a imagem que identifica o(s) desenvolvedor(es) do tema.
Em “colors”, o usuário pode alterar as cores de exibição de links, botões e abas. As cores estão em formato RGB, por isso cada um dos valores entre os colchetes representa uma das opções de coloração (vermelho, verde e azul). É possível encontrar tabelas completas dos códigos RGB na internet. Na imagem mais abaixo é possível visualizar, em vermelho, os itens que podem ser alterados.
• ntp_link: responsável pela cor dos links presentes na área dos sites mais acessados e das abas fechadas recentemente;
• ntp_text: altera a cor do texto exibido na tela ao abrir uma nova aba no navegador;
• ntp_background: controla a cor de fundo da tela ao abrir uma nova aba;
• tab_text: responsável pela cor do texto do título da aba ativa;
• tab_background_text: responsável pela cor do texto do título das abas inativa;
• bookmark_text: controla a cor do texto exibido na barra dos favoritos.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Aproveite para mudar as cores e fazer experiências, a fim de descobrir o que os demais itens em “colors” alteram. Em “tints” você controla matiz, saturação e iluminação dos botões de navegação (“voltar”, “atualizar”, “próximo”).
Os valores entre colchetes podem assumir valores entre -1 e 1, onde -1 não faz alteração alguma na coloração do botão. Ou seja, você pode utilizar valores como 0.123, 0.3 e -0.555. Ajuste os valores de modo que os botões fiquem com uma boa aparência para o seu tema.
Em “properties”, é possível alterar o comportamento de alguns itens. Por exemplo, a linha “"ntp_background_alignment" : "bottom"” está dizendo que a imagem de fundo da nova aba deve ser alinhada na parte de baixo da janela, enquanto a linha de baixo especifica que a imagem não deve ser repetida caso ela seja menor do que a resolução da tela.
Novamente, solte a imaginação e procure por mais propriedades que podem ser somadas às duas presentes nesse código de exemplo. Uma vez que você tiver feito as alterações necessárias, utilize o JSONLint para validá-lo antes de realizar os teste no Google Chrome.
3° Teste do tema
A parte de teste do tema é, talvez, a mais divertida. Afinal de contas você verá o resultado do seu trabalho. Na barra de endereço do navegador digite “chrome://extensions” e pressione a tecla “Enter”. Em seguida, clique no símbolo “+” presente ao lado de “Modo do desenvolvedor” e escolha a opção “Carregar extensão em desenvolvimento...”.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Pronto, agora é só selecionar a pasta criada no início do tutorial com o nome do seu tema e esperar até que ele seja exibido no Google Chrome. Não se assuste caso as cores e as imagens fiquem diferentes do que você havia imaginado. É perfeitamente comum ter que realizar alguns (ou vários) ajustes depois da primeira prova. Justamente por isso que é chamado teste.
4° Ajustes e arquivo CRX
Depois de fazer todos os ajustes necessários nas imagens e nas cores do tema, está na hora de criar o arquivo CRX, esse sim responsável pela instalação dos temas no Google Chrome. Para fazer isso, basta acessar a página de extensões novamente e clicar no botão “Compactar extensão...”.
Agora é só aguardar até que o arquivo de extensão seja criado pelo navegador e enviar para seus amigos a fim de ter uma segunda opinião a respeito do tema. Por mais complicado que pareça em um primeiro momento, basta começar a mexer no código, alterando cores opções, para perceber que é muito mais fácil criar um tema para Google Chrome do que se imagina.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
CRÉDITOS: TecMundo
Precisa de:
Paint.NET = Download Aqui
GIMP = Download Aqui
Note PAD = Download Aqui
JSONLite = Download Aqui
Vamos lá:
Uma vez que você tenha disponíveis os aplicativos necessários para a criação do tema, é hora de começar a trabalhar. Desde a criação das imagens até a produção de um arquivo CRX com o tema pronto são necessários quatro passos, os quais você confere em detalhes abaixo.
1° Criação das imagens:
Um dos elementos principais na personalização do Google Chrome são as imagens a serem utilizadas na barra de endereço, plano de fundo e barra de título. Você vai precisar de cinco imagens diferentes, cada uma para um elemento do navegador. Mesmo que o seu tema tenha apenas um jogo de cores e tonalidade, é necessário criar uma figura com a coloração desejada.
Para manter tudo organizado, crie uma pasta em qualquer diretório do seu computador com o nome escolhido para o tema. Em seguida, dentro da pasta criada adicione mais um diretório, com o nome “imagens”. Salve todas as figuras criadas dentro dessa pasta. Assim, fica mais fácil encontrar os arquivos para futuras edições.
Atenção: O elemento correspondente a cada uma das imagens é exibido em vermelho nas ilustrações abaixo.
Theme frame – imagem exibida na barra de título do navegador e atrás dos botões “Minimizar”, “Maximizar” e “Fechar”. A altura mínima para essa figura é de 30 pixels. Não há mínimo para a largura.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Theme toolbar – essa imagem será exibida na barra de favoritos e atrás da barra de endereço do Google Chrome. A altura mínima para essa figura é de 120 pixels. Não há mínimo para a largura.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Theme tab background – figura mostrada nas abas inativas do navegador. Embora normalmente os desenvolvedores prefiram colocar apenas uma cor nessa imagem é possível utilizar qualquer tipo de gravura. A altura mínima para essa figura é de 65 pixels. Não há mínimo para a largura.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
New tab page background – essa é a imagem mostrada como fundo quando uma nova aba é aberta no navegador. Recomenda-se o uso de uma imagem com resolução mínima de 800 x 600.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Theme attribution – a imagem escolhida para esse elemento é exibida no canto inferior direito da tela quando uma nova aba é aberta. Ela indica quem foi o criador do tema. Não há altura ou largura mínima para essa imagem.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Depois que todos os arquivos tiverem sido criados, a sua pasta “imagens” ficará com aparência similar à da imagem abaixo.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
2° Codificação
Uma vez que você tenha criado as imagens necessárias para inserir no tema, é hora de começar a mexer com o código. Para começar, abra um novo no Bloco de Notas, copiando o código abaixo para ele.
- Spoiler:
- {
"version": "1.0",
"name": "Tema Mário",
"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/ntp_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": [255 , 255 , 255],
"frame": [255,255,255],
"toolbar": [164, 211, 238],
"tab_text": [255,255,255],
"tab_background_text": [96,123,139],
"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"
}
}
}
Agora, clique em “Arquivo” e escolha a opção “Salvar como...”. Digite “manifest.json” no campo “Nome do arquivo” e marque a opção “Todos os arquivos” no campo “Tipo”. Certifique-se de que o arquivo está sendo salvo na pasta raiz do tema e clique em “Salvar”.
Isso fará com que um arquivo do tipo JSON seja criado, o qual terá o código necessário para a criação do tema desejado. Não se deixe intimidar pelos comandos presentes no código. Por mais que pareçam coisas vindas de outro mundo, logo você vai perceber que, na verdade, o código até faz um pouco de sentido.
Como você pode perceber o tema é dividido em quatro partes principais: images, color, tints e properties. Cada uma delas é responsável pela configuração de uma propriedade do tema.
Em “images” é onde todas as imagens criadas no primeiro passo deste tutorial serão carregadas, a fim de serem exibidas em seus determinados lugares.
• theme_frame: recebe a imagem a ser utilizada na barra de título do navegador;
• theme_toolbar: recebe a imagem a ser utilizada na barra de favoritos e barra de endereço;
• theme_ntp_background: recebe a imagem que será exibida como fundo de tela ao abrir uma nova aba;
• theme_tab_background: recebe a imagem que será exibida nas abas inativas;
• theme_ntp_attribution: recebe a imagem que identifica o(s) desenvolvedor(es) do tema.
Em “colors”, o usuário pode alterar as cores de exibição de links, botões e abas. As cores estão em formato RGB, por isso cada um dos valores entre os colchetes representa uma das opções de coloração (vermelho, verde e azul). É possível encontrar tabelas completas dos códigos RGB na internet. Na imagem mais abaixo é possível visualizar, em vermelho, os itens que podem ser alterados.
• ntp_link: responsável pela cor dos links presentes na área dos sites mais acessados e das abas fechadas recentemente;
• ntp_text: altera a cor do texto exibido na tela ao abrir uma nova aba no navegador;
• ntp_background: controla a cor de fundo da tela ao abrir uma nova aba;
• tab_text: responsável pela cor do texto do título da aba ativa;
• tab_background_text: responsável pela cor do texto do título das abas inativa;
• bookmark_text: controla a cor do texto exibido na barra dos favoritos.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Aproveite para mudar as cores e fazer experiências, a fim de descobrir o que os demais itens em “colors” alteram. Em “tints” você controla matiz, saturação e iluminação dos botões de navegação (“voltar”, “atualizar”, “próximo”).
Os valores entre colchetes podem assumir valores entre -1 e 1, onde -1 não faz alteração alguma na coloração do botão. Ou seja, você pode utilizar valores como 0.123, 0.3 e -0.555. Ajuste os valores de modo que os botões fiquem com uma boa aparência para o seu tema.
Em “properties”, é possível alterar o comportamento de alguns itens. Por exemplo, a linha “"ntp_background_alignment" : "bottom"” está dizendo que a imagem de fundo da nova aba deve ser alinhada na parte de baixo da janela, enquanto a linha de baixo especifica que a imagem não deve ser repetida caso ela seja menor do que a resolução da tela.
Novamente, solte a imaginação e procure por mais propriedades que podem ser somadas às duas presentes nesse código de exemplo. Uma vez que você tiver feito as alterações necessárias, utilize o JSONLint para validá-lo antes de realizar os teste no Google Chrome.
3° Teste do tema
A parte de teste do tema é, talvez, a mais divertida. Afinal de contas você verá o resultado do seu trabalho. Na barra de endereço do navegador digite “chrome://extensions” e pressione a tecla “Enter”. Em seguida, clique no símbolo “+” presente ao lado de “Modo do desenvolvedor” e escolha a opção “Carregar extensão em desenvolvimento...”.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Pronto, agora é só selecionar a pasta criada no início do tutorial com o nome do seu tema e esperar até que ele seja exibido no Google Chrome. Não se assuste caso as cores e as imagens fiquem diferentes do que você havia imaginado. É perfeitamente comum ter que realizar alguns (ou vários) ajustes depois da primeira prova. Justamente por isso que é chamado teste.
4° Ajustes e arquivo CRX
Depois de fazer todos os ajustes necessários nas imagens e nas cores do tema, está na hora de criar o arquivo CRX, esse sim responsável pela instalação dos temas no Google Chrome. Para fazer isso, basta acessar a página de extensões novamente e clicar no botão “Compactar extensão...”.
Agora é só aguardar até que o arquivo de extensão seja criado pelo navegador e enviar para seus amigos a fim de ter uma segunda opinião a respeito do tema. Por mais complicado que pareça em um primeiro momento, basta começar a mexer no código, alterando cores opções, para perceber que é muito mais fácil criar um tema para Google Chrome do que se imagina.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
CRÉDITOS: TecMundo
TioCentos • 24.11.12 21:46
