Como criar uma extensão para Google Chrome – Tutorial Simples

Nesta postagem vou mostrar como criar uma simples extensão para o Google Chrome, um botão que quando clicado abra uma pequena janela em HTML.

Primeiro vamos crar uma pasta chamada minha_primeira_extensao, e debtro dela um arquivo com o nome manifest.json, nele ficará as configurações de nossa extensão.

Cole o seguinte código neste arquivo:

{
"name": "Minha Primeira Extensão",
"version": "1.0",
"description": "Descrição da Minha Primeira Extensão",
"manifest_version": 2,
"browser_action":{
"default_icon": "icone.png",
"default_popup": "popup.html"
}
}

Explicando os elementos:

name – Nome de Exibição da sua extensão

version – Versão da sua extensão

description – Descrição

manifest_version – Versão do manifest, não altere

browser_action – Ação que será execudada no navegador

default_icon – Icone que irá aparecer no navegador

default_popup – Arquivo HTML que abrirá al clicarmos no ícone

 

Crie ou baixe uma imagem para ser seu ícone, no tamanho de 16 x 16px e salve nesta mesma pasta com o nome icone.png

Crie um arquivo chamado popup.html e também salve nesta pasta, cole o seguinte conteúdo:

<!--?xml version="1.0" encoding="UTF-8" ?--><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />Minha Primeira Extensão

Olá Mundo!

 

Diretório com os arquivos da extensão
Diretório com os arquivos da extensão

Instalando e compartilhando

Acesse o menu de ferramentas e depois extensões, ative o ‘Modo desenvolvedor’ e clique em ‘Carregar extensão expandida…’ navegue até a pasta criada e clique em ‘Abrir’.

Carregando a Extensão
Carregando a Extensão

Pronto sua extensão já esta carregada e pode ser testada.

Depois de ter feito todas as modificações necessárias, clique em ‘Compactar extensão…’, informe novamente o caminho, e ele criará um arquivo compactado de sua extensão, que poderá ser compartihada com seus amigos através do arquivo minha_primeira_extensao.crx

Espero que tenha sido útil este simples tutorial.

Paulo Collares

Servo de Jesus Cristo, Analista de Sistemas, com especialidade em Engenharia de Software Saiba mais sobre mim

  • Amigo.
    Consegui realizar esse processo e funcionou perfeitamente. Porém, não consigo colocar para executar uma function javascript ao clicar no ícone da exntensão.

    A função seria:

    function taliton()
    {
    var tempo = 1000;
    var menu = $(‘a.farm_icon_c’);
    var x = 0;

    $(menu).each(function() {

    setTimeout(function(minhaVar) {
    $(minhaVar).click();

    }, tempo * ++x, this)

    })
    }

    setInterval(taliton,100000);

    Consegue me ajudar nessa questão? Li e re-li http://developer.chrome.com/extensions/pageAction.html#manifest por várias vezes e não consegui chegar onde eu queria…

    • Paulo Collares

      Não sei, nunca testei algo mais avançado.

  • bruno

    ja fiz compactei agora como faço pra ele instalar automatico ao baixar

    • Paulo Collares

      É só acessar o menu de ferramentas e depois extensões, ative o ‘Modo desenvolvedor’ e clique em ‘Carregar extensão expandida…’ navegue até a pasta criada e clique em ‘Abrir’.

  • muito bom o tutorial. eu tenho um site wordpress, como eu faço para aparecer as ultimas postagens na extensao criada?

  • André Barbosa

    exite a possibilidade de ter um botão no site e chama o extensão?