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