Creando Extensiones para el Acceso Rápido de Opera

By Sandro Lenart, zbzm

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 atributo name, el cual al tomar el valor opera:speeddial, volverá a la extensión una Extensión para Acceso Rápido.
  • Un atributo viewmodes dentro de la etiqueta <widget> que tomará el valor minimized, 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.

Clock extension installed in the Opera browser's Speed Dial.

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í:

Friendly clock extension installed in the Opera browser's Speed Dial.

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.

No new comments accepted.