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á 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!
De 0 a 10, o quanto você recomendaria este artigo para um amigo?