El navegador web Google Chrome está creciendo lentamente en popularidad. Esto no es una sorpresa, ya que es un gran navegador y está respaldado nada menos que por Google. También proporciona excelentes herramientas para desarrolladores web y me encuentro usándolo cada vez más (en realidad, Firebug es lo único que me impide cruzar al otro lado).
Con la introducción de las extensiones, Google Chrome se volvió aún más ágil y potente.
En este tutorial, vamos a crear una extensión simple, que coloca un pequeño icono junto a la barra de direcciones de Chrome y, cuando se hace clic, obtendrá el feed RSS de Tutorialzine y mostrará una vista previa elegante de nuestros últimos tutoriales.
Primero unas palabras sobre las extensiones.
Cómo funcionan las extensiones
Las extensiones en Google Chrome son básicamente páginas web. Tiene archivos javascript, hojas de estilo e imágenes. Incluso puede usar bibliotecas de JavaScript como jQuery.
Sin embargo, las extensiones se tratan de manera un poco diferente a su página web normal, que se muestra en el navegador. Puedes tener acceso a todas las pestañas abiertas, al historial de navegación del usuario, puedes manipular todas las páginas que se abren, enviar solicitudes AJAX a cualquier sitio web y mucho más.
También tiene la ventaja (o la limitación) de que su extensión solo se ejecuta en un navegador. Puedes olvidarte de todos los problemas de compatibilidad y adoptar las nuevas funciones HTML5 de Google Chrome.
Desarrollo de extensiones
Las extensiones se empaquetan en un .crx (archivo zip renombrado) pero durante el desarrollo, puede asignar su carpeta de trabajo como una extensión. De esta forma, puede cambiar e implementar rápidamente el código sin necesidad de volver a empaquetarlo.
Esto se hace abriendo la página de la extensión (escriba chrome://extensions/ en la barra de direcciones, o haz clic en Icono de llave inglesa> Extensiones ) y haciendo clic en Modo de desarrollador> Cargar extensión desempaquetada... en la pagina. Después de realizar un cambio en la extensión, solo presione el enlace Recargar debajo de ella.
Una vez que haya terminado de desarrollar, haga clic en Extensión del paquete.. y se creará un archivo crx para usted. Puede servir este archivo desde su sitio y permitir que los visitantes de su sitio lo instalen.
Google Chrome es, con mucho, el navegador más fácil para crear extensiones, como verá en los pasos a continuación.
Una nota sobre la depuración :para depurar su extensión, haga clic con el botón derecho en el icono de su extensión, junto a la barra de direcciones, y elija Inspeccionar ventana emergente . También puedes consultar este tutorial.
Paso 1:manifiesto.json
El primer paso para crear una extensión es mapear una carpeta en su disco duro como una extensión (como se explicó anteriormente). Vas a poner todos tus archivos en esta carpeta.
Lo único que Chrome requiere de su extensión es el manifest.json expediente. Este es un archivo de texto que contiene los ajustes de configuración en forma de un objeto json.
Este es el que vamos a utilizar:
manifiesto.json
{
"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 estamos especificando el nombre de la extensión y una serie de otras opciones, como acciones y permisos del navegador.
En browser_actions , ponemos configuraciones que están en relación con la ventana del navegador. La ventana emergente propiedad le dice a Chrome que vamos a mostrar tutorialzine.html como una ventana emergente. Hay una serie de configuraciones que puede poner en browser_actions. Puede leer más en la documentación de la extensión de Google Chrome.
Para esta extensión no necesitamos acceder a las páginas actualmente abiertas, ni manipular pestañas y ventanas. Sin embargo, si los necesitáramos, tendríamos que incluir una propiedad de permisos, con las direcciones de las páginas.
Para obtener más información sobre el archivo de manifiesto, consulte la documentación de Google Chrome.
Paso 2:HTML 5
Como se mencionó anteriormente, le dijimos a Chrome que tutorialzine.html se abrirá como una ventana emergente. Este es un archivo html regular, completo con hojas de estilo y archivos js.
Y como Google Chrome tiene un muy buen soporte para HTML5, podemos codificar tutorialzine.html en él. Sin embargo, puede usar cualquier versión de HTML con la que normalmente codifica sus sitios.
tutorialzine.html
<!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>
Como puede ver, estamos abordando los archivos css y js directamente. Chrome los incluirá por nosotros. Como si estuviéramos trabajando en una página web normal.
Paso 3 - CSS3
Como la extensión se representa en Google Chrome, no necesitamos limitarnos con el mínimo común denominador cuando se trata de compatibilidad con CSS3. Es por eso que podemos darnos el lujo de usar reglas sofisticadas como -webkit-box-reflection y -webkit-gradiente .
estilos.css - Parte 1
*{
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;
} -webkit-caja-reflect crea un reflejo de CSS puro debajo de las imágenes en miniatura. Se necesitan varios parámetros para generar el reflejo:posición del reflejo, desplazamiento desde la parte inferior de la imagen y una máscara (que se define con un degradado).
estilos.css - Parte 2
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;
} En la segunda parte del código también estamos usando un degradado, pero esta vez como fondo para el elemento h1.
Paso 4 - jQuery
El JavaScript se ejecuta como si fuera parte de una página web normal. Esto significa que podemos incluir la biblioteca jQuery y definir un $(document).ready() funcionar como lo haríamos normalmente en un proyecto web.
Hacer clic en el icono de la extensión tiene el mismo efecto para los scripts de la página que abrir la página en un navegador.
Dentro de $(document).ready(), obtenemos los últimos resultados de la fuente RSS de Tutorialzine, con la ayuda de la API YQL de Yahoo . Hemos usado esta API un par de veces antes, aquí en Tz. Nos permite usar una sintaxis similar a SQL para obtener datos en formato JSON.
Después de obtener los datos, generamos el marcado HTML y lo incluimos en tutorialzine.html . También lo guardamos en localStorage como una solución de almacenamiento en caché simple. localStorage es una forma sencilla de guardar datos persistentes (sobrevive entre cargas de página). Esto hace que la experiencia de usar la extensión sea mucho más rápida.
secuencia de comandos.js
$(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="https://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);
}
}); En localStorage también almacenamos una marca de tiempo. Lo usamos para determinar la antigüedad del caché en localStorage. Si tiene más de una hora, lo ignoramos y recuperamos los datos nuevamente.
Aquí hay una muestra de los datos que se devuelven de YQL.
{
"query": {
"count": "1",
"created": "2010-06-09T12:02:33Z",
"lang": "en-US",
"results": {
"item": {
"title": "Neon Text Effect With jQuery & CSS",
"link": "http://feedproxy.google.com/..",
"comments": [
"https://tutorialzine.com/2010/06/neon-text-effect..",
"11"
],
"pubDate": "Tue, 01 Jun 2010 20:11:54 +0000",
"creator": "Martin Angelov",
"category": [
"CSS",
"jQuery"
],
"guid": {
"isPermaLink": "false",
"content": "https://tutorialzine.com/?p=925"
},
"description": "In this combined design and coding tutorial..",
"commentRss": "https://tutorialzine.com/2010/06/neon-text-e..",
"origLink": "https://tutorialzine.com/2010/06/neon-text-eff.."
}
}
}
} Esta estructura está disponible para nosotros en el msj variable en la línea 11 de script.js.
¡Con esta, tu primera extensión de Google Chrome está completa!
Conclusión
Puede leer más sobre las extensiones (incluidas las funciones avanzadas que no se tratan en este tutorial) en la página de documentación de extensiones de Google Chrome. Espero que este tutorial le haya dado un buen comienzo para ampliar la funcionalidad del navegador.
¿Qué opinas? ¿Harías una extensión de Chrome para tu sitio web?