Seções iMasters
Desenvolvimento + JavaScript

Criando extensão para Google Chrome

Olá! Veremos neste artigo como criar uma extensão para o Google Chrome; primeiro faremos um hello world e, depois, uma outra que será capaz de fazer uma busca no Twitter, retornando os cinco
primeiros resultados.

Você vai adicionar um ícone para o Google Chrome que, quando clicado,
exibe uma página gerada automaticamente. As extensões são compatíveis
com qualquer versão do Google Chrome, em Windows, Mac ou Linux.

Primeiro vamos criar uma pasta chamada minha_extensão. Dentro dessa pasta vamos criar o um arquivo chamado manifest.json e colocar dentro dele o seguinte código no formato json:

{
"name": "Minha Primeira Extensão",
"version": "1.0",
"description": "Minha primeira extensão",
"browser_action":{
"default_icon": "icon16.png",
"popup": "popup.html"
}
}

Explicando as diretrizes

  • name: nome da aplicação
  • version: versão
  • description: descricap
  • browser_action ação que executaremos no browser, ele possui suas próprias diretrizes
  • default_icon:icone padrão pode ser jpg, gif ou png
  • popup: html que será apresentado, sente caso ele aparecer atrelado ao ícone no browser.

Crie uma imagem 16×16 em png para esse exemplo e o chame de icon16.png.

Crie
um arquivo de texto chamado popup.html. Esse arquivo nada mais é do que o
corpo do nosso aplicativo. Adicione o seguinte código a ele:

<html>
<head>
<style>
html,body{width:425px;}
</style>
</head>
<body>
<h1>Olá, Mundo!</h1>
</body>
</html>

Carregando a extensão

Vá até o menu “ferramenta” e clique em extensões. Abrirá uma página como a que está abaixo:

Nesta página, clique em modo do desenvolvedor; lá tem um botão
carregar uma extensão em desenvolvimento. Selecione a pasta e clique em
OK. Aparecerá um ícone do lado da barra de endereço, basta clicar nele para exibir o conteúdo da página.

Clique no ícone e você verá o resultado da nossa extensão.

Agora, vamos à parte prática: criar uma extensão integrada com o Twitter.

Extensão integrada com o Twitter

Vamos fazer uma
extensão capaz de fazer uma busca no Twitter retornando os cinco
primeiros resultados.

Criaremos os arquivos:

  • manifest.json
  • background.html
  • style.css
  • twitter.js
  • O diretório img onde as imagens ficarão.

Primeiro vamos criar e implementar o arquivo manifest.json.

{
"name": "Twitter Search",
"version": "1.0",
"description": "Faça busca no twitter com essa extensão.",
"browser_action": {
"default_icon": "img/twitter-logo-19.png",
"popup": "background.html"
},
"icons": {
"19" : "img/twitter-logo-19.png",
"48" : "img/twitter-logo-48.png",
"128" : "img/twitter-logo-128.png"
},
"permissions": [
"http://search.twitter.com/"
]
}

Perceba que neste código existem duas novas diretrizes:

  • icons –  possibilita colocar os ícones da extensão;
  • permissions – seta permissão para que sejam feitas
    requisições para um determinada url. Neste caso, usei o endereço do
    twitter search http://search.twitter.com.

Agora criaremos o arquivo background. Como já falamos, ele é o arquivo
que será a interface da extensão. Usei para a implementação do
background html5 e css3. Não vou explicar muito sobre como fiz a
interface. Seguem abaixo os códigos:

background.html

<!DOCTYPE html>
<html>
    <head>
        <link href='http://fonts.googleapis.com/css?family=Ubuntu:bold' rel='stylesheet' type='text/css' />
        <link href='style.css' rel='stylesheet' type='text/css' />
        <script src="twitter.js" type='text/javascript'></script>
    </head>
    <body>
        <div>
            <header>
                <h1><img src="img/twitter-logo-large.png" width="100px"/></h1>
            </header>
            <section>
                <input id="search" value="" placeholder="Digite o que est&aacute; procurando..." />
                <button id="buttonSearch">Buscar</button>
            </section>
            <div id="progressbar"><br />Carregando...<br /></div>
            <section id="result">
                <header><h2>Resultado</h2></header>
                <section id="response"><section>
            </section>
        </div>
    </body>
</html>

style.css

body{
    width:100%;
    color:#333;
    font-size:12pt;
    background: -webkit-gradient(linear, center bottom, center top, from(#eee),to(#fff));
    text-align:center;
}
body>div{
    width:500px;
    max-height:600px;
}
body>div>header>h1{
    display:block;
    margin:0;
    padding:0px;
}
header>h2{text-align:left;}
img{border:none;}
p{
    margin:0px;
    padding:0px;
    text-align:left;
}

img#avatar{
    -webkit-box-shadow: 1px 1px 4px #555;
    float:left;
    padding:3px;
    margin-right:10px;
}

#search
{
    -webkit-border-radius: 3px;
    border:1px solid #ddd;
    font-size:12pt;
    padding:5px;
    width:80%;
    color:#555;
}

#buttonSearch
{
    -webkit-border-radius: 3px;
    -webkit-box-shadow: inset 1px 1px 3px #ccffFF;
    background: -webkit-gradient(linear, center bottom, center top, from(#33CCFF),to(#88ffFF));
    border: 1px solid #bbb;
    color: #fff;
    cursor:pointer;
    font-size:12pt;
    font-family: 'Ubuntu', arial, serif;
    padding:5px;
}

#progressbar{
    display:none;
    text-align:center;
    color:#888;
    font-size:12pt;
}

#result{
    display:none;
    width:99%;
}

#list{
    list-style:none;
    margin:0px;
    padding:0px;
    overflow:hidden;
}

#list>li{
    margin:0px;
    padding:5px 2px 5px 2px;
    overflow:hidden;
    border-bottom:1px dotted #ccc;
}

Vamos partir para o que interessa, que é o arquivo que realiza a lógica da aplicação, o twitter.js

Na realidade, a lógica é bem simples: fiz uma requisição ajax usando o XMLHttpRequest e a url da api, que é o twitter search, http://search.twitter.com/search.json?rpp=[numero de resultados por pagina]&q=[valor da busca]

// Elements
(function(window,document){

window.onload = function(){

var search = document.getElementById('search');
var searchButton = document.getElementById('buttonSearch');
var progressbar = document.getElementById("progressbar");
var response = document.getElementById('response');
var result = document.getElementById('result');

// executaa ação caso seja clicado no boção buscar
searchButton.onclick = function()
{
if(search.value!="" && search.value!=null)
{
if(progressbar.style.display=="none" || progressbar.style.display=='') progressbar.style.display = "block";
var url = "http://search.twitter.com/search.json?rpp=5&q="+search.value;
ajaxGetRequest(url,createList);
}
}

// cria a lista com o resultado da busca
function createList(json)
{
response.innerHTML=null;

var ul = document.createElement('ul');
ul.id = "list";

for(var i=0;i<json.results.length;i++)
{
var li = document.createElement('li');
li.innerHTML = '<p><img src="'+json.results[i].profile_image_url+
'" valign="top" id="avatar"/><b>@'+json.results[i].from_user+
'</b> : '+json.results[i].text+'</p>';
ul.appendChild(li);
}

response.appendChild(ul);

if(progressbar.style.display=="block")
progressbar.style.display = "none";

if(result.style.display=="none" || result.style.display=='')
result.style.display = "block";
}

// função para a execução do ajax
function ajaxGetRequest(url,callback)
{
var req = new XMLHttpRequest();
req.open("GET",url,true);
req.onreadystatechange = function(data)
{
if(req.readyState == 4 && req.status == 200)
callback(JSON.parse(req.responseText))
else
callback(null)
}
req.send(null);
}
}
})(window,document);
;i++)>

Após a construção do javascript, é so instalar ou recarregar a extensão e testar!

Clique aqui para fazer o download do código-fonte.

Bom, infelizmente as agências não enxergam os plugins de browsers como uma
uma ferramenta de publicidade. Estão perdendo a oportunidade de criar
expêriencias maravilhosas para os usuários!

Espero que tenham gostado. Abraços!

Mensagem do anunciante:

Torne-se um Parceiro de Software Intel®. Filie-se ao Intel® Developer Zone. Intel®Developer Zone

Comente também

55 Comentários

Excelente Post.
Grato.

    Andre Luz da Silva

    Ahhhh soh com o teu post, já criei outra extensão, no caso criei para o flickr , eu listo de 8 a 20 fotos, dos tamanhos de 150 a 300px

Andre Luz da Silva

perfeito, mais alguma coisa pra eu brincar com javascript

    Camilo Teixeira de Melo

    Valeu andré, em breve vou postar como desenvolver para firefox.

      Eder

      Ola Sr, voce consegue criar uma extensão que faz a página da um reload em x segundos e quando aparecer determinada palavra a extensão faz uma açao, do tipo brilhar a aba, ou sair um som etc ? Consegue ? replica no ederangelo21@hotmail.com

    Andre Luz da Silva

    Show de bola, estarei no aguardo ^^

Esse arquivo que você diz que é para criar ´usando qual program? Word, bloco de notas ou outro? eu criei usando o bloco de notas e não deu certo.

    Camilo Teixeira de Melo

    Você pode usar o notepad ++ ou o Aptana mas desde que o arquivo esteja em UTF-8, por default no windows os arquivos são criados em ASCI.

    Luis

    Valeu cara, tinha até desistido e voltei no seu site e vi o meu erro não tava criando nessa codificação, vou tentar agora!

William Fernandes

Não tinha parado ainda para ver a criação de extensões do Chrome mais ficou ótimo a explicação.
Já fiz para firefox mais sou meio perdido ainda ficou muito simples a hora que você colocar a do firefox com toda certeza estarei lendo. Sobre o tutorial ótimo meus parabéns!

simples e completo..Excelente post

Sheldon Cooper

Perfeito já estou criando as minhas extensões. Parabéns pelo post!

Gabriel Barros

Após ler este excelente post, ganhei incentivo para ler a documentação sobre extensões do Google Chrome (http://code.google.com/chrome/extensions/index.html). Já criei até o momento três extensões, entre elas o “Gerador de senhas” (https://chrome.google.com/extensions/detail/kdacplkimgffdleckinmifhckipbonan?hl=pt-br) e continuo tendo mais ideias.

    Camilo Teixeira de Melo

    Eu instalei a sua extensão, parabéns ficou show!

Tácio Andrade

Muito obrigado pelo tutorial, estava a algum tempo em busca de algo deste tipo, pretendo criar algumas extensões para mim e se for o caso compartilha-la com os amigos.

Abração.

Diário do Android

Acabei de fazer meu primeiro app para o Chrome, que cria um botão que leva o usuário diretamente para meu blog, mas não era bem isso que eu queria.

Estou precisando criar um webapp para o Chrome que fique ao lado da barra de endereço e que tipo veja os últimos dez posts do meu blog! Será que posso usar a mesma metodologia que você usou Camilo? Devo usar RSS ou o quê?

Parabéns pelo post!

    Camilo Teixeira de Melo

    Desculpa a demora na resposta, neste caso você pode fazer um leitor de rss em javascript que só traz 10 ultimos feeds

    Diário do Android

    Opa! Valeu Camilo!

    Abraço!

José Freitas

Muito bom mesmo!!!!!
Eu somente uso o Chrome, mas nem todos pensam como eu né!…
Pena que não tem por ai um tutorial para fazer extensões para o firefox, tão bom e bem explicado com esse aki do Google Chrome!
:-(

Felipe

Sempre bem explicado o Chorme é o melhor até para programar

Ronald Araújo

Não sei se já falaram sobre isso ai em cima, mas o meu apresentou um errinho na parte do código manifest.json

{
“name”: “Minha Primeira Extensão”,
“version”: “1.0”,
“description”: “Minha primeira extensão”,
“browser_action”:{
“default_icon”: “icon16.png”,
“popup”: “popup.html”
}
}

Porém só foi tirar os acentos de Extensão! Ele estava reclamando da codificação UTF…

Geovane Krüger

Estou tentando fazer uma extensão para exibir dados de um jogo, mas até agora não entendi como fazer para pegar esses valores do site do jogo.

Um conhecido lá do jogo desenvolveu um extensão que quando entra-se em um determinada pagina do jogo, já abre um popup com os calculos sobre os jogadores.

Mas como faço para pegar esses dados?

Rafael Piza

Muito bom,

Fiz a minha, ele pega as últimas notícias do site olhar digital.

Se quiser instalar:
http://www.catalogodacapital.com.br/olharDigital/instalar.html

Valeu, té mais

ArielSantos

aki no meu está dando um erro no arquivo manifest.json
{
“name”: “Twitter Search”,
“version”: “1.0”,
“description”: “Faca busca no twitter com essa extensao.”,
“browser_action”: {
“default_icon”: “img/twitter-logo-19.png”,
“popup”: “background.html”
},
“icons”: {
“19” : “img/twitter-logo-19.png”,
“48” : “img/twitter-logo-48.png”,
“128” : “img/twitter-logo-128.png”
},
“permissions”: [
“http://search.twitter.com/”
]
}

diz que a pasta de destino está incorreta e reclama sobre codificação utf-8

Kevin Oliveira

Opa! Gostei muito, só gostaria de saber quais são as APIs para a criação da extensão para o feed do meu site, podem me informar? Obrigado.

SoniEx 2

Precisa de continuidade, precisa ensinar como alterar a página pela extensão, alterar sem você clicar no ícone, e muito mais.

Poderia continuar com os tutoriais de extensões para o Google Chrome?

felipe melo

como montar uma extensão que é um botão para nova guia.

Kobra

Valew,obrigado,ótimo tuto.

Gabriel

Ta dando um erro, diz q o JSON ñ é valido….

Marcelo

Criei uma extensão para Gerar e Validar CPF/CNPJ para auxiliar Programadores, Analista de Teste, Analistas de Sistemas e Estudantes a testarem seus softwares.

Funcionalidades:
Gerador CPF/CNPJ (apenas números);
Gerador CPF/CNPJ (com mascará);
Validador CPF/CNPJ.

https://chrome.google.com/webstore/detail/ipfihnddjaepajgdamecijfdefikdgam

Carlos

ótimo post, sucinto, direto e com ótima explicação.

diana

Adorei o post,bem explicado.

Juan

como eu ponho ela para download?

Diego

olá camilo, queria saber se tem como fazer ela por o meu site em vez do twitter e colocar as ultimas postagens do meu site aparecer em miniposts qual seria a parte desse codigo que eu teria que mudar para ficar assim

Felipe

Quando eu clico no icone nao acontece nada, sabe me dizer se esta faltando algo?

Felipe

eu uso MAC, como criar um arquivo .JSON?

Alberto Lima

Parabens pelo post.
Gostaria que fazer uma extensão para aumentar ou diminuir a fonte da pagina que estou visitando, sem precisar recorrer as configuracoes do browser. Isso por que ha sites que que damos zoom na pagina mas a fonte continua do mesmo tamanho.
Voce tem um código pra isso?

André Bento

Parabens pelo post, mas como faço para criar um app desses que leia o rss do meu site:::

Samuel

Obrigado!

Thiago

Como crio uma extensão, que, após intalar, mostra anuncios adsense no facebook da pessoa, sabe ? existe varios disso, mas desconheço como fazer. podem me ajudar com algo ? ou um site que explique isso. Valeu gente e parabéns pelo post!

    Camilo Teixeira de Melo

    Thiago, para incluir anuncio basta usar o Ad words do Google mesmo. Como os Plugins possuem como base para programação de interface o HTML5 não é complicado incluir tal widget.

Danilo Formiga

Camilo, tentei fazer aqui o jeito que você ensinou, colocando o manifest_version como o google pede, sendo que eu clico em buscar e não acontece absolutamente nada.
Tentei em outro tutorial, tentei dar um console.log e ver se imprimia algo, mas to parado sem conseguir fazer nada.

    Camilo Teixeira de Melo

    Oi Danilo Formiga. Esse post é de 2011 . O twitter mudou o formato da API. Neste caso o ideal é ver como se produz um add-on e caso queira fazer a mesma versão, adaptar para a versão do Twiter API 1.1 pois ele está usando hoje OAuth.

Cláudio

Como faço para incluir o recurso de notificações no ícone? tipo usado na extensão da globo.com para chrome, alertando que tem “N” novas atualizações.

Vanderson Assis

Excelente! Simples e funcional muito obrigado cara!!!

Kayky Vitor Cruz

quando eu boto ta dizendo que precisa de uma tal chave!?

Nisael Moreira Gomes

No youtube esta começando agora um curso sobre o assunto: http://www.youtube.com/watch?v=-u25J8usi5A

Gilberto

Como faz para esconder o codigo .js que fica mostrando apos instalar a extensao ?

agip

Isso se chama virus de navegador ,,,este aí identico , entrou no sistema de nossa empresa e está causando serios transtornos ,,,esses nomes que aparecem nesta postagem já estão sendo passados para serem tomadas as devidas providências ….Isto nada mais é do que crime cibernetico e tem suas punições.

    Camilo T. Melo

    Agip, acho que você está equivocado em sua acusação. Crimes cibernéticos, como o próprio nome diz, são crimes realizados na internet. O que foi e é divulgado aqui é simplesmente conhecimento em programação. E não considero tão avançada assim. O que cada pessoa faz com o conhecimento já é um problema dela e a mesma irá acarretar com as consequências. Outra coisa, se a sua empresa está sendo atacado por addware, spyware etc… Com certeza é porque a sua empresa não planejou, ou de forma desleixada, de forma eficaz a segurança da informação

Qual a sua opinião?