Crear una extensión para Google Chrome. Programación en Castellano.

Categorías destacadas

Artículo

Inicio Artículo Varios Chrome

¡votar!

Crear una extensión para Google Chrome

El navegador Chrome creado por Google, poco a poco va ganando más adeptos, debido a que es un gran navegador y todos aquellos que lo prueban, repiten. Con la posibilidad de instalar extensiones en el navegador, su potencia ha aumentado.

En este tutorial, vamos a ver como crear una pequeña extensión que consiste en un icono al lado de la barra de herramientas y cuando se pulse, mostrará las últimas entradas del rss.

El primer paso es crear el archivo Manifest.json. En este archivo lo que hacemos es crear el mapeo de una carpeta de nuestro equipo, donde vamos a poner todos los archivos de la extensión.

Este archivo no es más que un archivo de texto con opciones de configuración en forma de un objeto JSON. Este es el archivo que utilizaremos en este ejemplo.

{
"name": "Tutorialzine Extension",
"version": "1.0",
"description": "Making your first Google Chrome extension.",
"browser_action":	{
"default_icon": "icon.png",
"popup": "tutorialzine.html"
},
"icons":{
"128":"icon_128.png"
}
}

En este archivo especificamos el nombre de la extensión y otras opciones como la acción del navegador y los permisos.

En el campo “browser_action” indicamos las acciones del navegador. En este caso le indicamos el nombre del icono y el archivo emergente que se ejecutará.

En el segundo paso, lo que hacemos es crear el archivo HTML que hemos dicho que se ejecutará, en este caso tutorialzine.html. Es un archivo en html normal donde se puede utilizar cualquier versión. El código del archivo es el siguiente:

<!DOCTYPE html> <!-- The new doctype -->
<html>
<head> <!-- No title and meta tags are necessary for the extension -->
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="jquery.min.js"></script> <!-- Including jQuery -->
<script src="script.js"></script> <!-- Our script file -->
</head>
<body>
<h1>Latest Tutorials on Tutorialzine</h1>
<div id="content">
<!-- The latest tutorials are going to be inserted here -->
</div>
</body>
</html>

En el siguiente paso, lo que hacemos es crear la hoja de estilos. Como la extensión es para Chrome, se puede utilizar propiedades de CSS3 sin problemas, como pueden ser -webkit-box-reflection and -webkit-gradient.

*{
margin:0;
padding:0;
}
body{
/* Setting default text color, background and a font stack */
font-size:12px;
color:#666;
/* A webkit gradient: */
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEE), to(#DDD));
text-shadow:1px 1px 0 white;
font-family:Arial, Helvetica, sans-serif;
overflow-x:hidden;
}
.tutorial{
width:500px;
padding:10px 20px;
margin-bottom:10px;
}
img{
width:100px;
height:100px;
float:left;
/* Webkit CSS3 Reflection */
-webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.75, transparent), to(rgba(255, 255, 255, 0.3))) 0 0 0 0 stretch stretch;
}
p,a{
padding:10px 0 0 120px;
display:block;
}
a,a:visited{
color:#09F;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
h1{
/* Webkit gradient: */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEE), to(#DDD));
border-bottom: 1px solid #F0F0F0;
font-size: 24px;
font-weight: normal;
margin-bottom: 30px;
padding: 30px 0px;
text-align: center;
text-shadow: white 0px 1px 1px;
}
h2{
font-size:24px;
font-weight:normal;
right:40px;
padding-left:120px;
}
h1,h2{
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
}

Por último, lo que hacemos es darle funcionalidad a la extensión. Como la página es html, el JavaScript funcionará de forma normal, por lo que se puede hacer uso de librería como jQuery o cualquier otra que se necesite.

Dentro del script, lo que haremos será recuperar las 2 últimas entradas del RSS del blog para luego mostrarlas al pulsar sobre el icono. Para eso utilizaremos el API de Yahoo YQL, que nos permite obtener los datos de una forma similar a SQL pero con formato JSON.

Con estos datos optenemos la información que se mostrará en la página html que hemos creado.

$(document).ready(function(){
var query = "SELECT * FROM feed WHERE url='http://feeds.feedburner.com/Tutorialzine' LIMIT 2";
// Storing the seconds since the epoch in now:
var now = (new Date()).getTime()/1000;
// If there is no cache set in localStorage, or the cache is older than 1 hour:
if(!localStorage.cache || now - parseInt(localStorage.time) > 1*60*60)
{
$.get("http://query.yahooapis.com/v1/public/yql?q="+encodeURIComponent(query)+"&format=json&callback=?",function(msg){
// msg.query.results.item is an array:
var items = msg.query.results.item;
var htmlString = "";
for(var i=0;i<items.length;i++)
{
var tut = items[i];
// Extracting the post ID from the permalink:
var id = tut.guid.content.match(/(\d+)$/)[0];
// Looping and generating the markup of the tutorials:
htmlString += '<div class="tutorial">\
<img src="http://tutorialzine.com/img/posts/'+id+'.jpg" />\
<h2>'+tut.title+'</h2>\
<p>'+tut.description+'</p>\
<a href="'+tut.link+'" target="_blank">Read more</a>\
</div>';
}
// Setting the cache
localStorage.cache	= htmlString;
localStorage.time	= now;
// Updating the content div:
$('#content').html(htmlString);
},'json');
}
else{
// The cache is fresh, use it:
$('#content').html(localStorage.cache);
}
});

Con este código, la extensión para Chrome ya estaría lista.

Podéis ver más información sobre el tema de las extensiones en el sitio oficial.

Vía: tutorialzine.com