Criando extensão para Google Chrome

Camilo Teixeira de Melo
em Desenvolvimento

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:

A Mundipagg lança a inovadora API em REST, garantindo flexibilidade e simplicidade na integração. Conheça as nossas funcionalidades.

Camilo Teixeira de Melo

Colaborador no desenvolvimento na Engine javascript do Firefox(SpiderMonkey), já fez parte do time de desenvolvimento da FAPESP, portal CETESB e de redes sociais Filmow e Mulher & Mãe. Atualmente trabalha na agência Creata sendo um dos responsáveis pelo desenvolvimento, infra e arquitetura de sistemas e sites para clientes como McDonalds, NUK entre outros. http://www.camilotx.com.br

Comentários

Para comentar no iMasters você precisa estar logado.

O iMasters possui mais de 13 mil textos publicados, em 13 anos já somos uma comunidade de mais 350 mil pessoas. Cadastre-se agora mesmo GRATUITAMENTE e tenha acesso a todo o mundo iMasters.

Já tenho conta Quero me cadastrar
    1. 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

    1. 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.

  1. 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!

  2. 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.

  3. 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!

  4. 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!
    :-(

  5. 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…

  6. 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?

  7. 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

  8. 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?

  9. 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

  10. 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?

  11. 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!

  12. 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.

  13. 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.

  14. 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.

    1. 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

  15. Como que eu faço pra quando ser instalado a extenção, ao entrar no navegador, nao necessite clicar no ICONE para abrir o popup, queria que ele abri-se automatico e ficasse fixo, tem como ?

Este projeto é mantido e patrocinado pelas empresas: