A confecção de extensões para o Google Chrome requer basicamente três arquivos: JSON, HTML e o ícone da extensão.
A nossa extensão de teste será compatível com todas as versões do Chrome e roda independente de plataforma (Windows, Linux ou Mac) .
De início criamos um diretório de nome Extensao_teste que conterá os seguintes arquivos:
JASON
Crie um arquivo texto de formatação UTF-8, nomeei de manifest.json e insira o código abaixo.
{
"name": "Nome da aplicação",
"version": "1.0",
"description": "Descrição da aplicação",
"browser_action":
{
"default_icon": "icon.png",
"popup": "popup.html"
}
}
Explicando o código…
- name, version e description são auto-explicativos.
- browser_action: Ações da extensão (também auto-explicativo).
- default_icon: ícone que será mostrado na barra do navegador.
- popup: arquivo html que será chamado quando clicar no ícone.
HTML
Crie um arquivo HTML de nome popup.html e insira o código abaixo.
<html>
<head>
<style>
html,body{width:195px;}
</style>
</head>
<body>
<h1>Hello, Word!</h1>
</body>
</html>
Se não souber o que acontece aqui em cima você terá que dá uma pausa e ler isso antes de continuar.
ÍCONE
Insira também dentro do diretório Extensao_teste um ícone de nome icon no formato PNG e de tamanho 16x16.
O diretório Extensao_teste deve ficar similar a figura ao lado.
Carregando a extensão
No Chrome clique no menu (lado direito ao lado da barra de endereço) e vá em Ferramentas/Extensões. Na aba de extensões clique em modo do desenvolvedor do lado direito para expandir as opções de carregamento, compactação e atualização de extensões.
Clique em Carregar extensão em desenvolvimento… selecione o diretório Extensao_teste e clique em ok, a extensão será adicionada logo em baixo e aparecerá o ícone na barra de extensões como mostra a figura abaixo.
Feito! quando clicar no ícone da extensão irá aparecer o que escrevemos no corpo do arquivo HTML. Agora vale sua imaginação e conhecimento em HTML e JavaScritp para o desenvolvimento.
Comentários
Postar um comentário