Criando extensão para Google Chrome
Autor: leonardo | Publicado: 2012-05-30T10:15:00-07:00

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 16x16 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:


&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
html,body{width:425px;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Olá, Mundo!&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;

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


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

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&gt;div{
    width:500px;
    max-height:600px;
}
body&gt;div&gt;header&gt;h1{
    display:block;
    margin:0;
    padding:0px;
}
header&gt;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&gt;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]&amp;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!="" &amp;&amp; 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&amp;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&lt;json.results.length;i++)
   {
    var li = document.createElement('li');
    li.innerHTML = '&lt;p&gt;&lt;img src="'+json.results[i].profile_image_url+
        '" valign="top" id="avatar"/&gt;&lt;b&gt;@'+json.results[i].from_user+
        '&lt;/b&gt; : '+json.results[i].text+'&lt;/p&gt;';
    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 &amp;&amp; req.status == 200)
     callback(JSON.parse(req.responseText)) 
    else 
     callback(null)
   }
   req.send(null);
  }
 }
})(window,document);
;i++)&gt;

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!

fonte:imasters
vídeo:clique aqui