Como criar uma Extensão do Google Chrome com JQuery
Olá a todos, agora a pouco acabei de desenvolver minha primeira extesão do Google Chrome e nada mais justo que fazer um tutorial de como criar uma extensão simples para Google Chrome com JQuery.
A extensão que ensino a fazer neste tutorial apenas substitui o body da pagina do compilando.org por um texto.
Este tutorial segue o princípio “baby steps” então sinta-se a vontade para pular alguns passos caso seja expert. ;)
O primeiro passo é criar uma pasta
mkdir div_flutuante
O segundo passo consiste em criar um arquivo chamado manifest.json, este arquivo é responsasvel pode definir as configurações da extensão, nele vc define os imports das páginas, onde a extenção funcionará e coisas do gênero. o arquivo deve conter o seguinte conteúdo:
{
"name" : "Div Flutuante",
"version" : "0.1",
"description" : "Apenas um tutorial...",
"content_scripts" : [
{
"matches" : [
"http://compilando.org/*",
"http://www.compilando.org/*"
],
"js" : ["jquery-1.8.2.min.js", "magic.js"],
"run_at" : "document_end"
}
],
"page_action" : {
"default_icon" : "icon.png"
},
"icons" : {
"48" : "icon.png",
"128" : "icon.png"
},
"manifest_version": 2
}
Podemos observar algumas configurações muito bacanas, já incluo o JQuery em content_scripts, e definos os icones, o ícone q está em page_action define o icone que aparecerá ao acessarmos compilando.org, imagem a qual aparecerá na barra de endereços.
Baixe o JQuery para a pasta.
cd div_flutuante
wget http://code.jquery.com/jquery-1.8.2.min.js
Crie o arquivo magic.js o qual importamos no manifest.
Dentro do magic.js vamos colocar a mágica da extensão.
$('html').html("Compilando.org");
Agora coloque alguma imagem com o nome icon.png na pasta e pronto.
Vamos adicionar nossa extensão ao chrome para que possamos ver como ficou.
Acesse chrome://chrome/extensions/ e clique em Developer Mode ou
Modo Desenvolvedor se seu Chrome estiver em português. Após isto clique em Load Unpacked Extension(Carregar extensão descompactada) e selecione a pasta onde esta o manifest.json.
Agora acesse compilando.org e veja a mágica acontecer. =]
Este é um tutorial que foge do Hello World normalmente utilizado pois já inclui o JQuery e utiliza as funções que desenvolvemos apenas no dominio que especificamos no arquivo manifest.
Caso queiram o Hello World Tradicional da Google acesse: http://developer.chrome.com/extensions/getstarted.html
O site de Dev da google contem mmuitos exemplos que ajudam bastante, então recomendo uma passeada por lá.
Caso queiram o código deste tutorial eu o coloquei no GitHub: https://github.com/scudelletti/tutorial_chrome_extension
Abraços galera.
E desculpem caso haja algum erro tanto de ortografia quanto de código, já está de madrugada. Muahahahaha ;)
Ah não esqueçam depois de remover a extensão. Afinal Hello World nao fica em produção não é?
Fontes de Consulta: http://imasters.com.br/artigo/19377/javascript/criando-extensao-para-google-chrome http://developer.chrome.com/extensions/getstarted.html