Creando Extensiones para el Acceso Rápido de Opera
From Opera 15 onward, Opera 11 & 12’s extension format is no longer supported, and instead, we’ve switched to Chromium’s extension model. Check out our new documentation for developing extensions for Opera 15 and higher and start building your own extensions.
Introducción
En el 2007, presentamos al mundo: Acceso Rápido. La idea se volvió popular y hoy en día pueden ser encontradas implementaciones similares en otros navegadores. Pero estamos muy orgullosos, ¿qué clase de padres seríamos si no ayudáramos a nuestro “bebé” a crecer y desarrollar nuevas habilidades? Para la versión 11.10 de Opera, hemos mejorado la visualización y la interacción con el usuario, y hemos agregado soportes para que los desarrolladores puedan controlar la forma como sus sitios se ven en las celdas del Acceso rápido. Ahora, en Opera 11.50, estamos dando un paso más allá con las Extensiones para el Acceso Rápido.
De la misma forma en que puede extender las funciones de su navegador a través de los cientos y cientos de extensiones de Opera, también podrá personalizar y ampliar el Acceso Rápido para que sea aún más útil. En lugar de limitarse a imágenes de la página Web o íconos de Acceso rápido, ahora también podrá mostrar el contenido de extensiones, en tiempo real. Este artículo le mostrará como hacerlo.
Nota: Para ver un ejemplo funcionando, necesitará Opera 11.50 además de alguna extensión de ejemplo: descargar nuestro Reloj para Acceso Rápido.
Lo básico
En pro de mantener la compatibilidad con las extensiones comunes, las
Extensiones para el Acceso Rápido utilizan el mismo formato y estructura
salvo por un par de agregados. En otras palabras, los siguientes agregados al archivo config.xml
cambiarán una Extensión para Opera, ya
existente, en una Extensión para el Acceso Rápido de Opera:
- Un elemento
<feature>
conteniendo un atributoname
, el cual al tomar el valoropera:speeddial
, volverá a la extensión una Extensión para Acceso Rápido. - Un atributo
viewmodes
dentro de la etiqueta<widget>
que tomará el valorminimized
, a los efectos de mostrar el fondo de la página en la celda del acceso rápido.
Por favor, tenga en cuenta, que estas extensiones no pueden utilizarse tanto en el Acceso Rápido como en la barra de herramientas del navegador. En otras palabras, una extensión que tiene un botón en la barra de herramientas, no puede ser al mismo tiempo Extensión en Acceso Rápido mediante la implementación actual.
Especificando que la extensión es para el Acceso Rápido en el config.xml
Vamos a poner en práctica la metodología a través de una extensión de
ejemplo. Para ver los siguientes fragmentos de código en su contexto,
descargue nuestra extensión Reloj para el
Acceso Rápido y revise el código fuente en los archivos que conforman el
paquete clock_SD_extension.oex
, recuerde que la compresión utilizada es ZIP con extensión de archivo OEX. La Figura 1 muestra cómo se verá nuestra extensión cuando esté terminada.
Figura 1: La extensión de reloj instalada en el Acceso Rápido de Opera.
Mientras que, normalmente una celda de Acceso Rápido común muestra una
captura de pantalla de una página Web, las Extensiones para Acceso Rápido
mostrarán la pantalla de inicio (o el fondo) que tiene la extensión—esto es
index.html
por defecto. Para activar esto, necesitamos primero
agregar el atributo viewmodes
a la etiqueta <widget>
de nuestro config.xml
, con el valor
minimized
:
<widget xmlns="http://www.w3.org/ns/widgets"
id="http://example.com/SimpleClockSD" viewmodes="minimized">
Esto le dice al navegador que muestre el fondo de la extensión
minimizado—el tamaño de una ventana individual de Acceso Rápido al 100% es de 256 píxeles de ancho por 160 píxeles de alto. Además, necesitamos también agregar los elementos param
y feature
, acompañado este último del atributo required
:
<feature name="opera:speeddial" required="false">
<param name="url" value="http://en.wikipedia.org/wiki/Time"/>
</feature>
El elemento feature
necesita un atributo que indique si el
Acceso rápido es necesario para que la Extensión pueda funcionar. Por
ejemplo, podría haber otros navegadores o clientes que sean compatibles con
las extensiones de Opera pero no con el Acceso Rápido. Si pese a esto, su
extensión aún es capaz de funcionar, el valor de required
dentro de feature
será false
; en cambio, si su
extensión no trabaja al no haber un Acceso Rápido, el valor será
true
.
El elemento param
, por su parte, es necesario, para
especificar que página deberá cargarse, cuando se haga clic en la ventana de
Acceso Rápido donde se muestra la extensión.
Aquí está el archivo config.xml
completo para esta extensión:
<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
id="http://example.com/SimpleClockSD" defaultlocale="en"
viewmodes="minimized">
<name short="Simple Clock">Clock Speed Dial Extension</name>
<description>Este es un ejemplo de Extensión para Acceso rápido que
muestra un Reloj Simple.</description>
<author href="http://people.opera.com/danield/">Daniel Davis</author>
<icon src="images/icon_64.png"/> <!-- Icon source:
http://www.openclipart.org/detail/17552 -->
<feature name="opera:speeddial" required="false">
<param name="url" value="http://en.wikipedia.org/wiki/Time"/>
</feature>>
</widget>
Agregando contenido a la extensión
El siguiente paso es crear algo interesante para mostrar en la ventana del Acceso Rápido. Esto es la página de fondo de la extensión, para lo cual
necesitamos crear un archivo al que llamaremos index.html
en el
mismo directorio donde se encuentra config.xml
. Para este
ejemplo, hemos creado un simple reloj digital programado en JavaScript que
muestra la hora actual con minutos y segundos. Primero creamos un index.html
básico, con un elemento output
vacío:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Extensión de Reloj para el Acceso Rápido</title>
</head>
<body>
<output></output>
<script src="scripts/background.js"></script>
</body>
</html>
Seguidamente, necesitamos crear un directorio de scripts
que contendrá el archivo background.js
que enlazaremos luego. Este archivo JavaScript contiene algo parecido a esto:
window.addEventListener('load', function() {
// Función simple que pone un prefijo cero cuando el valor es menor que 10
function formatTime(time) {
return (time < 10) ? '0' + time : time;
}
var output = document.querySelector('output');
var date, hours, mins, secs;
// Toma y muestra la hora actual cada 500 milisegundos
var timer = window.setInterval(function() {
date = new Date();
hours = date.getHours();
mins = date.getMinutes();
secs = date.getSeconds();
output.innerHTML = formatTime(hours) + ':' + formatTime(mins) + ':' +
formatTime(secs);
}, 500); // Dos veces por segundo para permitir ligeros retrasos en la
ejecución de JavaScript
}, false);
La hoja de estilo que le acompaña (style.css
), es también
simple, pero incluye un pequeño truco:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
/* Utilice display:table y display:table-cell
para luego poder utilizar vertical-align:middle */
body {
background: #444;
color: #fff;
display: table;
height: 100%;
width: 100%;
}
output {
display: table-cell;
font-family: monospace;
font-size: 10em;
text-align: center;
text-shadow: 0 0.1em 0.1em #000;
vertical-align: middle;
}
/* Los ajustes de estilo de aquí solo se aplican estando minimizado */
@media screen and (view-mode: minimized) {
output {
font-size: 1.8em;
}
}
Como usted puede ver, hay una consulta “media” CSS3 al final del archivo
que verifica si se da la condición de view-mode: minimized
, de
acuerdo con las especificaciones de la característica Media-view-mode
En otras palabras los estilos en esta sección solo se aplicarán cuando la página se muestre minimizada, tal como pasa en una celda de Acceso Rápido. Esta es una forma práctica de anular los estilos de una situación determinada, sin tener que mantener múltiples diseños.
Terminando la extensión
Como es usual, empaquetamos nuestra creación en un contenedor ZIP que
contenga todos los archivos del directorio de trabajo (pero no el directorio
en sí) y renombramos el archivo con la extensión .oex
Si no lo
ha hecho aún, descargue clock_SD_extension.oex y pruébelo.
La API SpeedDialContext
Una vez instalada, nuestra extensión puede controlar dinámicamente su
celda de Acceso Rápido mediante la API SpeedDialContext
. Una API muy simple con dos propiedades de escritura: title
y
url
. Estas se colocarán en el archivo background.js
a través del objeto opera.contexts.speeddial
, de esta
manera:
if (opera.contexts.speeddial) {
var sd = opera.contexts.speeddial;
sd.title = "Mi título";
sd.url = "mipagina.html";
}
Podemos utilizar estas características para mejorar nuestra extensión de
reloj, por ejemplo, haciendo que se muestre un mensaje amistoso de acuerdo a
la hora del día que sea. El único archivo que es necesario editar es
background.js
:
window.addEventListener('load', function() {
// Función simple que pone un prefijo cero cuando el valor es menor que 10
function formatTime(time) {
return (time < 10) ? '0' + time : time;
}
var output = document.querySelector('output');
var date, hours, mins, secs, tmp_hours, timeofday;
var messages = {
"morning": "Good morning!",
"afternoon": "Good afternoon!",
"evening": "Good evening!",
"night": "Shouldn't you be in bed?"
};
// Toma y muestra la hora actual cada 500 milisegundos
var timer = window.setInterval(function() {
date = new Date();
hours = date.getHours();
mins = date.getMinutes();
secs = date.getSeconds();
output.innerHTML = formatTime(hours) + ':' + formatTime(mins) + ':' +
formatTime(secs);
// Muestra un mensaje relacionado a la hora en el título del Acceso Rápido
if (hours !== tmp_hours) {
if (hours > 15) {
timeofday = 'evening';
} else if (hours > 11) {
timeofday = 'afternoon';
} else if (hours > 3) {
timeofday = 'morning';
} else {
timeofday = 'night';
}
if (opera.contexts.speeddial) {
opera.contexts.speeddial.title = messages[timeofday];
}
tmp_hours = hours;
}
}, 500); // Dos veces por segundo para permitir ligeros retrasos en la
ejecución de JavaScript
}, false);
Este es igual que el primer ejemplo, pero con un par de cosas agregadas, a saber:
- Un objeto
messages
conteniendo mensajes para distintos momentos del día. - Una verificación reiterada que ejecuta código cuando la hora ha cambiado.
- Una línea que muestra el mensaje correspondiente en el título del
Acceso Rápido desde el objeto
messages
.
Esta extensión puede ser descargada aquí: friendly_clock_SD_extension.oex Una vez instalada, debería poder ver algo así:
Figura 2: Una amigable extensión de reloj instalada en el Acceso Rápido de Opera.
Conclusión
Como puede ver, los desarrolladores de extensiones tienen ahora una posibilidad adicional para añadir a sus extensiones, mejorando así la conveniencia y facilidad de uso o simplemente por diversión. Los ejemplos aquí son básicos, pero muestran el potencial de las extensiones para acceso rápido cuando se combinan con ideas inteligentes y habilidades de desarrollo Web. Estamos esperando ver como las extensiones para el Acceso Rápido se convierten en algo más que solo vínculos a un sitio Web, así que esperamos ver formas creativas en que utilizan esta API en el catálogo de extensiones de Opera.
Referencias
API para Extensiones de Opera: Guía Rápida
This article is licensed under a Creative Commons Attribution 3.0 Unported license.
Comments
The forum archive of this article is still available on My Opera.