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:
<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
<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">Buscarbutton>
section>
<div id="progressbar"><br />Carregando...<br />div>
<section id="result">
<header><h2>Resultadoh2>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 = '![]()
+json.results[i].profile_image_url+
'" valign="top" id="avatar"/>@'+json.results[i].from_user+
' : '+json.results[i].text+'
';
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!
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!
Nenhum comentário:
Postar um comentário