Opera Speed Dial Extensions erstellen

By Nico

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.

Einleitung

Damals, im Jahr 2007, stellten wir die Schnellwahl der Welt vor. Das Konzept erwies sich als sehr beliebt und ähnliche Ansätze können mittlerweile auch in anderen Browsern gefunden werden. Aber so stolz wir auch sind, was wären wir für Eltern, wenn wir unserem Baby nicht dabei helfen würden, zu wachsen und neue Fähigkeiten zu erlenen? Mit Opera 11.10 haben wir das Aussehen und UX der Schnellwahl überarbeitet und bieten Möglichkeiten für Entwickler, das Aussehen ihrer Webseite zu beeinflussen, wenn sie innerhalb der Schnellwahl angezeigt wird. Mit Opera 11.50 gehen wir noch einen Schritt weiter und bieten Speed Dial Extensions an.

So, wie der Browser mit Hunderten von Opera Extensions erweitert werden kann, lässt sich jetzt ebenfalls die Schnellwahl personalisieren und erweitern, damit sie noch nützlicher wird. Statt nur auf eine Webseite, ein Icon oder einen Screenshot beschränkt zu sein, liefert die Schnellwahl nun Live-Inhalte, und dieser Artikel erklärt, wie das genau funktioniert.

Hinweis: Um dieses Beispiel lauffähig zu sehen, benötigt man Opera 11.50 und eine Speed Dial Extension: Download der Speed Dial Clock.

Die Grundlagen

Um die Erweiterbarkeit mit regulären Extensions für Opera beizubehalten, nutzen Speed Dial Extensions das selbe Format und die gleiche Struktur, allerdings mit Ergänzungen. In anderen Worten bedeutet das, dass die folgende, kleine Ergänzung in der Datei config.xml eine bereits vorhandene Extension in eine Speed Dial Extension umwandeln kann:

  • Ein <feature>-Element mit einem name-Attribut des Wertes opera:speeddial verwandelt die Extension in eine Speed Dial Extension.
  • Ein viewmodes-Attribut im beinhaltenden <widget>-Tag mit dem Wert minimized: Dies zeigt die Hintergrundseite in der Schnellwahl an.

Es ist zu beachten, dass eine Extension nicht das Schnellwahl-Feature und die Browser-Toolbar gleichzeitig verwenden kann. Eine Extension, die also einen Button in der Toolbar erzeugt, kann nicht auch in der Schnellwahl verwendet werden.

Bestimmung der Speed Dial Extension mit config.xml

Lasst uns von der Theorie in die Praxis wechseln, indem wir durch ein Beispiel gehen. Um die folgenden Codeauszüge im Zusammenhang zu sehen, laden wir unsere Speed Dial Clock Extension herunter und schauen uns die Quelldateien innerhalb des Pakets an. Abbildung 1 zeigt, wie die fertige Extension aussehen wird.

Die Uhr-Erweiterung ist in der Schnellwahl installiert.

Abbildung 1: Die Uhr-Erweiterung ist in der Schnellwahl installiert.

Wohingegen normale Zellen der Schnellwahl einen Screenshot einer Webseite anzeigen, zeigen Speed Dial Extensions die Startseite (oder Hintergrundseite) der Extension — das ist standardmäßig index.html. Um dies zu aktivieren, muss zuerst das viewmodes-Attribut zu der Datei config.xml mit dem Tag <widget> und dem Wert minimized hinzugefügt werden:

<widget xmlns="http://www.w3.org/ns/widgets" id="http://example.com/SimpleClockSD" viewmodes="minimized">

Dies sagt dem Browser, dass die Hintergrundseite der Extension in minimierter Form angezeigt werden soll — die Größe eines individuellen Fensters der Schnellwahl beträgt 256 x 160 Pixel bei 100% Zoom. Zusätzlich muss noch ein feature-Element für Operas Schnellwahl mit einem required-Attribut und einem param-Element versehen werden:

<feature name="opera:speeddial" required="false">
  <param name="url" value="http://en.wikipedia.org/wiki/Time"/>
</feature>

Das required-Attribut vom feature-Element gibt an, ob die Schnellwahl für die Ausführung der Extension benötigt wird. Beispielsweise könnte es andere Browser oder User-Agents geben, die mit Operas Erweiterungen kompatibel sind, aber keine Schnellwahl besitzen. Wenn die Erweiterung in solchen Fällen immer noch lauffähig sein sollte, dann sollte man den Wert false verwenden; wenn Ihre Erweiterung ohne die Schnellwahl nicht lauffähig ist, verwenden man true.

Das param-Element wird benötigt und gibt an, welche Seite beim Klick auf die Schnellwahl geöffnet werden soll.

Hier ist die komplette config.xml-Datei für diese Extension:

<?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>This is an example Speed Dial extension showing a simple clock.</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>

Inhalt zur Extension hinzufügen

Im nächsten Schritt wollen wir etwas Interessantes zum Schnellwahlfenster hinzufügen. Dies ist die Hintergrundseite der Extension, deshalb müssen wir eine Datei namens index.html im selben Ordner wie config.xml erstellen. In diesem Beispiel erstellen wir eine einfache Digitaluhr mit JavaScript, welche die aktuelle Zeit auf die Sekunde genau anzeigt. Zuerst erstellen wir eine einfache Datei index.html mit einem leeren output-Element:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>Clock Speed Dial Extension</title>
  </head>
  <body>
    <output></output>
    <script src="scripts/background.js"></script>
  </body>
</html>

Infolgedessen benötigen wir einen scripts-Ordner, der die verlinkte Datei background.js enthält. Diese JS-Datei sieht so aus:

window.addEventListener('load', function() {
  // Simple function to prefix a zero if the value passed is less than 10
  function formatTime(time) {
    return (time < 10) ? '0' + time : time;
  }

  var output = document.querySelector('output');
  var date, hours, mins, secs;

  // Get and display the current time every 500 milliseconds
  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); // Twice a second to allow for slight delays in JavaScript execution
}, false);

Das dazugehörige Stylesheet (style.css) ist ebenfalls simpel, enthält aber einen kleinen Trick:

* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}

/* Use display:table and display:table-cell
so that we can use 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;
}

/* Styles here are only applied in a "minimized" state */
@media screen and (view-mode: minimized) {
  output {
    font-size: 1.8em;
  }
}

Wie ihr seht, enthält die Datei am Ende eine CSS3 Media Query, die nach der view-mode: minimized-Bedingung Ausschau hält, im Einklang mit der view-mode Media Feature-Spezifikation. In anderen Worten bedeutet dies, dass der Stil in diesem Bereich nur dann angewendet wird, wenn die Seite in einem minimierten Zustand dargestellt wird, zum Beispiel innerhalb der Schnellwahl. Das ist praktisch, um bestimmte Stil-Eigenschaften in bestimmten Situationen zu überschreiben, ohne dass man mehrere Designs pflegen muss.

Abschließende Arbeiten an der Extension

Wie immer zippen wir alle Dateien innerhalb des Ordners (aber nicht den Ordner selbst), um eine Erweiterung zu erstellen, und benennen den Dateityp in .oex um. Wenn ihr es noch nicht gemacht habt, ladet euch clock_SD_extension.oex herunter und testet die Extensions.

Die SpeedDialContext-API

Einmal installiert, kann unsere Extension dynamisch den Inhalt der Schnellwahl-Zelle dank der SpeedDialContext-API kontrollieren. Dies ist eine sehr simple API, mit zwei beschreibbaren Eigenschaften: title und url. Diese werden im Hintergrund von JavaScript durch das Objekt opera.contexts.speeddial verfügbar gemacht, so wie hier:

if (opera.contexts.speeddial) {
  var sd = opera.contexts.speeddial;
  sd.title = "My title";
  sd.url = "mypage.html";
}

Wir können dieses Feature verwenden, um unsere Uhr zu erweitern, indem wir eine freundliche Nachricht je nach Tageszeit anzeigen. Die einzige Datei, die bearbeitet werden muss, ist die JavaScript-Datei background.js:

window.addEventListener('load', function() {
  // Simple function to prefix a zero if the value passed is less than 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?"
  };

  // Get and display the current time every 500 milliseconds
  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);

    // Make the Speed Dial title display time-related message
    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); // Twice a second to allow for slight delays in JavaScript execution
}, false);

Das ist das Gleiche wie beim ersten Beispiel auch, nur mit ein paar kleinen Ergänzungen, namentlich:

  • Ein messages-Objekt, das verschiedene Nachrichten für verschiedene Tageszeiten enthält.
  • Eine wiederholte Überprüfung, die Code ausführt, wenn sich die Stunde verändert hat.
  • Eine Zeile, die die relevante Nachricht des messages-Objekts im Titel der Schnellwahl anzeigt.

Die Erweiterung kann hier heruntergeladen werden: friendly_clock_SD_extension.oex. Nach der Installtion sieht die Erweiterung so aus:

Die freundliche Uhr-Extension, nachdem sie in der Schnellwahl von Opera installiert wurde.

Abbildung 2: Die freundliche Uhr-Extension, nachdem sie in der Schnellwahl von Opera installiert wurde.

Abschluss

Wie wir gerade gelernt haben, können Entwickler nun noch mehr Funktionalität zu ihren Extensions hinzufügen. Das hier vorgestellte Beispiel ist sehr einfach, aber es zeigt das Potenzial der Speed Dial Extensions, in Verbindung mit einer cleveren Idee und den Fähigkeiten der Webentwickler. Wir hoffen, dass Speed Dial Extensions mehr als nur hübsche Links zu einer Webseite werden, deshalb freuen wir uns darauf, eure kreativen Ideen im Opera Extensions Repository zu sehen!

Referenzen

Opera Extensions API: Speed Dial Guide

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.