menu "ferramenta" e clique em extensoes. Abrira uma pagina como a que esta abaixo:Nesta pagina, clique em modo do desenvolvedor; la tem um botao carregar uma extensao em desenvolvimento. Selecione a pasta e clique em OK. Aparecera um icone do lado da barra de endereco, basta clicar nele para exibir o conteudo da pagina.Clique no icone e voce vera o resultado da nossa extensao. Agora, vamos a parte pratica: criar uma extensao integrada com o Twitter.Extensao integrada com o TwitterVamos fazer uma extensao capaz de fazer uma busca no Twitter retornando os cinco primeiros resultados.Criaremos os arquivos:manifest.jsonbackground.htmlstyle.csstwitter.jsO diretorio img onde as imagens ficarao.Primeiro vamos criar e implementar o 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/" ]} Perceba que neste codigo existem duas novas diretrizes:icons - possibilita colocar os icones da extensao;permissions - seta permissao para que sejam feitasrequisicoes para um determinada url. Neste caso, usei o endereco do twitter search http://search.twitter.com.Agora criaremos o arquivo background. Como ja falamos, ele e o arquivo que sera a interface da extensao. Usei para a implementacao do background html5 e css3. Nao vou explicar muito sobre como fiz a interface. Seguem abaixo os codigos: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.cssbody{ 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 e o arquivo que realiza a logica da aplicacao, o twitter.js Na realidade, a logica e bem simples: fiz uma requisicao ajax usando o XMLHttpRequest e a url da api, que e 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 acao caso seja clicado no bocao 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"; } // funcao para a execucao do ajax