Nota: Esto es una traducción de mi artículo, How to build a Chrome extension, Part 3: Loading any web page in a popup
Chrome permite el usar API de acción de página y acción de navegador para mostrar una ventana emergene, o popup, cuando se hace click al ícono.
Para añadir un popup, crea un archivo popup.html con el contenido de tu ventana y agrega lo siguiente a tu manfest.json para la acción de navegador:
{
"name": "Mi Extension",
...
"browser_action": {
"default_icon": "miicono.png",
"popup": "popup.html"
}
...
}
O para acción de página:
{
"name": "Mi Extension",
...
"page_action": {
"default_icon": "miicono.png",
"popup": "popup.html"
}
...
}
La limitación de los popups, sin embargo, es que son páginas estáticas y no pueden ser cambiados dinámicamente. Además, sólo se pueden usar páginas locales a la extensión; no puedes cargar páginas externas.
Entonces, ¿cómo arreglamos esto? Podemos usar una técnica web algo vieja llama iframe. Un marco en línea, o iframe, es un elemento HTML que permite cargar cualquier página dentro de otra en un tipo de caja. Así, aunque no puedas cargar una página externa como popup, puedes cargar cualquier página dentro de la página del popup.
Un ejemplo sencillo para una extensión de búsqueda de Bing puede ser:
<html>
<head>
<style type="text/css">
body {width:200; height:300;}
</style>
</head>
<body>
<iframe src="http://m.bing.com" width="100%" height="100%" frameborder="0">
</iframe>
</body>
</html>
Como puedes ver, he cargado la versión móvil de Bing, http://m.bing.com. Dado el pequeño espacio disponible en popups, usar páginas móviles con este médoto es ideal porque son minimalistas y requieren menos espacio.
También he declarado explícitamente el tamaño de la página (200 por 300) y del iframe (100% de la página). Puedes cambiar esto para lo que le convenga más a tu página.
En Chrome, esta extensión se vería así:
Puedes descargar la extensión de Bing completa de la galería de extensiones de Chrome y el código fuente (bajo el GPLv2) de Mediafire.
Ahora, ¿qué pasa si quieres cargar una página diferente dependiendo de una opción de la extensión? Se puede hacer esto fácilmente construyendo el elemento iframe dinámicamente cuando se carga la página, como muestra este extracto de código de ChromeMilk:
$(document).ready(function() {
var popup = localStorage.popup || 'igoogle';
var frame = document.createElement('iframe');
frame.setAttribute('width', '100%');
frame.setAttribute('height', '100%');
frame.setAttribute('frameborder', '0');
frame.setAttribute('id', 'rtmframe');
if (popup == 'gmail') {
// abrir gmail gadget
$('body').height(300).width(200);
frame.setAttribute('src', 'http://www.rememberthemilk.com/services/modules/gmail/');
}
else if (popup == 'iphone') {
// abrir iphone web app
$('body').height(480).width(320);
frame.setAttribute('src', 'http://i.rememberthemilk.com/');
}
else if (popup == 'mobile') {
// abrir web app movil
$('body').height(300).width(200);
frame.setAttribute('src', 'http://m.rememberthemilk.com/');
}
else {
// igoogle y default
$('body').height(400).width(400);
frame.setAttribute('src', 'http://www.rememberthemilk.com/services/modules/googleig/');
}
document.body.appendChild(frame);
});
De esta manera, la extensión determina el tamaño del popup y la dirección del iframe a partir de una opción del usuario.
Existen algunas limitaciones de usar este método. La más significativa es que no se puede modificar el iframe una vez ha sido cargado, ya que esto es prevenido por el navegador por seguridad.
Eso es prácticamente todo con respecto a cargar páginas externas en popups. Puedes usar esto para múltiples cosas. Ya mencioné páginas móviles, pero otras como gadgets de iGoogle también funcionan bien.
¿Tienes algún tip para construir extensiones basadas en popups? ¿Estás teniendo trabajo construyendo tu extensión? ¡Deja un comentario!
