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↳Linux34 conteúdosKali Linux em um Servidor VPS: como, quando e por que usar?DevSecOps · dez 2024Construindo um Windows Service ou Linux Daemon com Worker Service & .NET Core – Parte 2Dev (Back & Front) · jul 2020Criando uma WebApi utilizando .NET, Linux e VSCodeDev (Back & Front) · ago 2019Ver tudo em DevSecOps →.
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:
{<br /> "name": "Minha Primeira Extensão",<br /> "version": "1.0",<br /> "description": "Minha primeira extensão",<br /> "browser_action":{<br /> "default_icon": "icon16.png",<br /> "popup": "popup.html"<br /> }<br />}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↳HTML45 conteúdosA importância do HTML e CSS para quem trabalha com UI Design e Design SystemProduto & UX · dez 2024Como hostear seu site HTML gratuitamente com GitHub PagesDev (Back & Front) · jun 2025SQL Server – Como criar um versionamento de código das suas Stored Procedures em HTML e com comentários da alteraçãoData · nov 2020Ver tudo em Dev (Back & Front) → 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><br /><head><br /><style><br />html,body{width:425px;}<br /></style><br /></head><br /><body><br /><h1>Olá, Mundo!</h1><br /></body><br /></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.
{<br /> "name": "Twitter Search",<br /> "version": "1.0",<br /> "description": "Faça busca no twitter com essa extensão.",<br /> "browser_action": {<br /> "default_icon": "img/twitter-logo-19.png",<br /> "popup": "background.html"<br /> },<br /> "icons": {<br /> "19" : "img/twitter-logo-19.png",<br /> "48" : "img/twitter-logo-48.png",<br /> "128" : "img/twitter-logo-128.png"<br /> },<br /> "permissions": [<br /> "http://search.twitter.com/"<br /> ]<br />} 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><br /><html><br /> <head><br /> <link href='http://fonts.googleapis.com/css?family=Ubuntu:bold' rel='stylesheet' type='text/css' /><br /> <link href='style.css' rel='stylesheet' type='text/css' /><br /> <script src="twitter.js" type='text/javascript'></script><br /> </head><br /> <body><br /> <div><br /> <header><br /> <h1><img src="img/twitter-logo-large.png" width="100px"/></h1><br /> </header><br /> <section><br /> <input id="search" value="" placeholder="Digite o que está procurando..." /><br /> <button id="buttonSearch">Buscar</button><br /> </section><br /> <div id="progressbar"><br />Carregando...<br /></div><br /> <section id="result"><br /> <header><h2>Resultado</h2></header><br /> <section id="response"><section><br /> </section><br /> </div><br /> </body><br /></html>style.css
body{<br /> width:100%;<br /> color:#333;<br /> font-size:12pt;<br /> background: -webkit-gradient(linear, center bottom, center top, from(#eee),to(#fff));<br /> text-align:center;<br />}<br />body>div{<br /> width:500px;<br /> max-height:600px;<br />}<br />body>div>header>h1{<br /> display:block;<br /> margin:0;<br /> padding:0px;<br />}<br />header>h2{text-align:left;}<br />img{border:none;}<br />p{<br /> margin:0px;<br /> padding:0px;<br /> text-align:left;<br />}<br /><br />img#avatar{<br /> -webkit-box-shadow: 1px 1px 4px #555; <br /> float:left;<br /> padding:3px;<br /> margin-right:10px;<br />}<br /><br />#search<br />{<br /> -webkit-border-radius: 3px;<br /> border:1px solid #ddd;<br /> font-size:12pt;<br /> padding:5px;<br /> width:80%;<br /> color:#555;<br />}<br /><br />#buttonSearch<br />{<br /> -webkit-border-radius: 3px;<br /> -webkit-box-shadow: inset 1px 1px 3px #ccffFF;<br /> background: -webkit-gradient(linear, center bottom, center top, from(#33CCFF),to(#88ffFF));<br /> border: 1px solid #bbb;<br /> color: #fff;<br /> cursor:pointer;<br /> font-size:12pt;<br /> font-family: 'Ubuntu', arial, serif;<br /> padding:5px;<br />}<br /><br />#progressbar{<br /> display:none;<br /> text-align:center;<br /> color:#888;<br /> font-size:12pt;<br />}<br /><br />#result{<br /> display:none;<br /> width:99%;<br />}<br /><br />#list{<br /> list-style:none;<br /> margin:0px;<br /> padding:0px;<br /> overflow:hidden;<br />}<br /><br />#list>li{<br /> margin:0px;<br /> padding:5px 2px 5px 2px;<br /> overflow:hidden;<br /> border-bottom:1px dotted #ccc;<br />}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<br />(function(window,document){<br /><br /> window.onload = function(){<br /><br /> var search = document.getElementById('search');<br /> var searchButton = document.getElementById('buttonSearch');<br /> var progressbar = document.getElementById("progressbar");<br /> var response = document.getElementById('response');<br /> var result = document.getElementById('result');<br /><br /> // executaa ação caso seja clicado no boção buscar<br /> searchButton.onclick = function()<br /> {<br /> if(search.value!="" && search.value!=null)<br /> {<br /> if(progressbar.style.display=="none" || progressbar.style.display=='') progressbar.style.display = "block";<br /> var url = "http://search.twitter.com/search.json?rpp=5&q="+search.value;<br /> ajaxGetRequest(url,createList);<br /> }<br /> }<br /><br /> // cria a lista com o resultado da busca<br /> function createList(json)<br /> {<br /> response.innerHTML=null;<br /><br /> var ul = document.createElement('ul');<br /> ul.id = "list";<br /><br /> for(var i=0;i<json.results.length;i++)<br /> {<br /> var li = document.createElement('li');<br /> li.innerHTML = '<p><img src="'+json.results[i].profile_image_url+<br /> '" valign="top" id="avatar"/><b>@'+json.results[i].from_user+<br /> '</b> : '+json.results[i].text+'</p>';<br /> ul.appendChild(li);<br /> } <br /><br /> response.appendChild(ul);<br /><br /> if(progressbar.style.display=="block")<br /> progressbar.style.display = "none";<br /><br /> if(result.style.display=="none" || result.style.display=='')<br /> result.style.display = "block";<br /> }<br /><br /> // função para a execução do ajax<br /> function ajaxGetRequest(url,callback)<br /> {<br /> var req = new XMLHttpRequest();<br /> req.open("GET",url,true);<br /> req.onreadystatechange = function(data)<br /> {<br /> if(req.readyState == 4 && req.status == 200)<br /> callback(JSON.parse(req.responseText)) <br /> else <br /> callback(null)<br /> }<br /> req.send(null);<br /> }<br /> }<br />})(window,document);<br />;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!
Trabalhou em diversos projetos usando inteligencia artificial para mineração de dados e desenvolvimento de soluções para empresas como McDonalds e FAPESP. Atualmente, trabalha como analista de sistemas e desenvolvedor senior, desenvolvendo soluções para a aviação na LAN & TAM Airlines.
