Tworzenie rozszerzeń Szybkiego wybierania w Operze

By matti141

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.

Wprowadzenie

W 2007 roku wprowdziliśmy na świat Szybkie wybieranie. Nasz pomysł okazał się na tyle popularny, że podobne implementacje można znaleźć również w innych przeglądarkach. Nie bylibyśmy jednak dobrymi rodzicami, gdybyśmy nie pozwolili naszemu "dziecku" dorastać i rozwijać nowych umiejętności. W Operze 11.10 poprawiliśmy wizualne metody UX w Szybkim wybieraniu oraz dodaliśmy możliwość zmiany obrazu strony w okienku Szybkiego wybierania. W Operze 11.50 idziemy o krok dalej i oferujemy rozszerzenia Szybkiego wybierania.

Tak jak można zwiększyć funkcjonalność swojej przeglądarki dzięki wielu setkom rozszerzeń Opery, można też dostosować i rozszerzyć Szybkie wybieranie, by uczynić go jeszcze bardziej użytecznym. Żeby nie ograniczać się do strony internetowej, jej ikony, czy zrzutu ekranu, można spowodować, by w Szybkim wybieraniu pokazała się żywa zawartość, a ten artykuł pokaże, jak to zrobić.

Uwaga: Żeby widzieć jak to działa, trzeba posiadać Operę 11.50 lub późniejszą oraz przykładowe rozszerzenie Szybkiego wybierania: pobierz nasz zegar Szybkiego wybierania.

Podstawy

W celu upodobnienia do zwykłych rozszerzeń, rozszerzenia Szybkiego wybierania mają ten sam format i strukturę, ale z niewielkimi zmianami. Innymi słowy, trzeba do pliku config.xml dodać niektóre elementy, by zamienić zwykłe rozszerzenie na rozszerzenie Szybkiego wybierania:

• Element <feature> z atrybutem name powinien zawierać wartość opera:speeddial, który zmienia zwykłe rozszerzenie w rozszerzenie Szybkiego wybierania.
• Atrybut viewmodes zawierający znacznik <widget> o wartości minimized: ukazuje tło w okienku Szybkiego wybierania.

Należy pamiętać, że obecnie rozszerzenia nie mogą korzystać z funkcji Szybkiego wybierania, jak i z paska narzędzi przeglądarki. Innymi słowy rozszerzenie mające przycisk na pasku narzędziowym nie może być rozszerzeniem Szybkiego wybierania.

Specyfikacja rozszerzeń Szybkiego wybierania z config.xml

Przejdźmy z teorii do praktyki. Aby zobaczyć następujące fragmenty kodu w kontekście całości pobierz nasz zegar w Szybkim wybieraniu i zajrzyj do plików w nim ukrytych. Rysunek 1 pokazuje jak wygląda nasze rozszerzenie po zakończeniu.

Rysunek 1: Rozszerzenie z zegarem zainstalowane w Szybkim wybieraniu przeglądarki Opera.

Podczas gdy zwykłe okienka Szybkiego wybierania pokazują zrzut ekranu strony z sieci, to rozszerzenia Szybkiego wybierania wyświetlają stronę startową (lub stronę - tło) — standardowo jest to index.html. Aby to umożliwić musimy dodać atrybut viewmodes do naszego config.xml, a znacznik <widget> ustawić na wartości minimized:

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

To informuje przeglądarkę by wyświetlać stronę w zminimalizowanej formie — w 100% powiększeniu, okienko Szybkiego wybierania ma rozmiar 256 x 160 pikseli. Powinniśmy także dodać element feature z jego atrybutem required i elementem param:

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

Atrybut required elementu feature jest potrzebne do uruchamiania rozszerzenia. Na przykład, jeśli istnieją inne przeglądarki, czy aplikacje klienckie zgodne z rozszerzeniami Opery, ale bez Szybkiego wybierania. Jeśli chcesz, by w takim przypadku twoje rozszerzenie nadal działało wpisz wartość false, ale jeśli nie chcesz, by pracowało bez Szybkiego wybierania, wpisz true.

Element param jest wymagany, ponieważ zawiera link do strony, która powinna zostać wczytana po kliknięciu na rozszerzenie.

Oto kompletny config.xml dla naszego rozszerzenia:

<?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>

Dodawanie zawartości do rozszerzenia

W następnym kroku dodamy coś ciekawego do okienka w Szybkim wybieraniu. Jest to strona - tło rozszerzenia, więc musimy dodać plik index.html w tym samym folderze, co config.xml. W tym przykładzie stworzymy zegar oparty na JavaScript, który będzie wyświetlał godzinę z dokładnością do sekundy. W tym celu tworzymy prosty plik index.html z pustym elementem output:

<!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>

Następnie musimy stworzyć katalog scripts zawierający plik background.js fdo którego umieściliśmy już link. Ten plik JavaScript wygląda tak:

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);

Towarzyszący arkusz stylów (style.css) jest równie prosty, ale zawiera małą sztuczkę:

* {
  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;
  }
}

Jak widać, na dole tego pliku CSS3 media query sprawdza, czy jest spełniony warunek view-mode: minimized zgodnie z view-modespecyfikacją Media Feature. Innymi słowy, style z tej sekcji będą miały zastosowanie, jeśli strona zostanie wyświetlona w zminimalizowanym stanie takich jak okienka w Szybkim wybieraniu. Jest to wygodny sposób, aby zastąpić style dla pewnej sytuacji, bez konieczności utrzymywania wielu projektów.

Wykańczanie rozszerzenia

Jak zwykle musimy spakować pliki w folderze (ale nie sam folder) w plik ZIP, a następnie przemianujemy rozszerzenie tego pliku z .zip na .oex. Jeśli tego nie zrobiłeś pobierz nasz Zegar w SW.oex i spróbuj.

SpeedDialContext API

Po zainstalowaniu naszego rozszerzenia możemy dynamicznie sterować okienkiem Szybkiego wybierania, dzięki SpeedDialContext API. Jest to bardzo proste API z dwoma zapisywalnymi wartościami: title and url. Są one dostępne z poziomu JavaScript w pliku background.js i w obiekcie opera.contexts.speeddial co wygląda tak:

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

Możemy użyć tej funkcji, by zwiększyć funkcjonalność naszego rozszerzenia o jakiś przyjazny komunikat w zależności od pory dnia. Trzeb tylko wyedytować plik 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);

Ten plik jest taki sam, jak wcześniejszy, ale z kilkoma dodatkami:

• Obiekty messages zawierające wiadomości dla różnych pór dnia.
• Ponowna analiza, gdy godzina się zmienia.
• Linia, która pokazuje odpowiedni komunikat z obiektu messages w tytule rozszerzenia Szybkiego wybierania.

To rozszerzenie można pobrać tutaj: Przyjacielski zegar w SW.oex. Po zainstalowaniu będzie wyglądał tak:

Rysunek 2: Rozszerzenie z zegarem zainstalowane w Szybkim wybieraniu przeglądarki Opera.

Wnioski

Jak widać, twórcy mogą dodać nowe funkcje do swoich rozszerzeń. Przykład ukazany tutaj jest bardzo prosty, ale pokazuje potencjał rozszerzeń Szybkiego wybierania połączonego z sprytnym pomysłem i umiejętnościami twórcy stron WWW. Mamy nadzieję, że rozszerzenia Szybkiego wybierania staną się czymś więcej niż ładnym ukazaniem linku do strony. Tak więc czekamy na kreatywne sposoby zastosowania naszego API i zaprezentowania ich na naszej stronie z rozszerzeniami Opery!

Odniesienia

Opera Extensions API: Speed Dial guide

This article is licensed under a Creative Commons Attribution 3.0 Unported license.