Prohlížeč Opera ve verzi 11, jehož alfaverze byla včera uvedena, přináší framework pro spouštění rozšíření (extensions), které přidávají k prohlížeči nové funkce. Framework pro tato rozšíření je postaven na existujících standardech, jako je standard W3C Widgets a použití JavaScriptu. Což znamená, že pokud dokážete napsat webovou stránku nebo widget, máte dostatečné znalosti k napsání rozšíření. Můžete rovněž použít technologie z rodiny HTML5, jako je cross-document messaging.

Vývojáři Opery připravili pro tvůrce rozšíření seznam referenční dokumentace a tutoriálů. Upozorňují, že jde stále o počáteční verzi, která se může později změnit, takže nic není jisté a nic není stabilní. Během dalších týdnů a měsíců se mohou věci podstatně změnit, od úprav API po nové funkce. Pokud máte nějaké dotazy, nebojte se je položit ve fóru vývojářů rozšíření pro Operu.

Rychlý úvod

Pokud chcete získat povšechnou představu o fungování rozšíření v Opeře, přečtěte si článek  Come and play with Opera extensions na webu Choose Opera. Chcete-li získat hlubší informace a pohrát si s ukázkami, ve zbytku článku se naučíte, co takové rozšíření obsahuje a jak jej vytvořit.

API

Ačkoli je API pro rozšíření Opery postavené na standardních technologiích, existuje řada specifických oblastí, které ve standardech nejsou a které návrh API rozšiřují. Tato API umožňují např. pracovat s prohlížečem samotným a řídit jeho funkce, jako jsou panely či okna. Vývojáři Opery se snažili vytvořit jednoduché a přímočaré API, aby je bylo snadné používat.

API pro rozšíření jsou v Opeře ve jmenném prostoru opera.extensions. Prostor opera.extensions je globální objekt, v němž je většina API modulů. Například pokud chcete inicializovat objekt tabs, odvoláte se na něj pomocí  opera.extensions.tabs.

Na úvod je dobré prostudovat API Documentation overview page, popřípadě vizuálního průvodce k dokumentaci.

Vývojáři připravili i několik tutoriálů, které vám usnadní začátky s rozšířeními pro Operu. Dozvíte se v nich důležité informace o uživatelském rozhraní, panelech, oknech a zasílání zpráv.

• Opera extensions: buttons, badges and popups. V tomto článku jsou představeny objekty ToolbarContext, ToolbarUIItem, ToolbarUIItemProperties, Popup a Badge. Získáte rovněž informace o UI pro toolbary, včetně vytváření tooltipů, ikon atd.
• Opera extensions: tabs. Tento článek představuje objekt tabs a vysvětluje, jak pracovat s panely.
• Opera extensions: windows. Tento článek představuje objekt windows a vysvětluje, jak pracovat s okny.

Tutoriály

Pokud jste se seznámili se základní strukturou rozšíření a s některými API, je načase podívat se na některé praktičtější tutoríály. Postupem času budou přibývat, zatím jsou k dispozici tyto dva:

• Hands-on tutorial: building an Opera extension: tento tutoriál ukazuje, jak přidat novou funkci ke stránkám pomocí JavaScriptu.
• Converting UserJS to Opera extensions: tento článek vám poradí s převodem existujících Opera UserJS na rozšíření pro Operu.

Známé problémy

• Rozšíření nefungují na stránkách, kde není tag <script> ani na stránkách přenesených protokolem HTTPS (pokud to uživatel výslovně nepovolí na stránce opera:config).
• Pro ladění použijte opera.postError(). Výpis se objeví v konzoli, kterou naleznete ve  View > Developer Tools > Error Console. Používejte tuto techniku namísto Dragonfly.

Co obsahuje rozšíření?

V této části se podíváme na to, co takové rozšíření musí obsahovat, a ukážeme si ve stručnosti některá API. Podrobnější informace naleznete v referenční dokumentaci API.

Soubory

Systém rozšíření v Opeře je založen na specifikaci W3C Widgets. Rozšíření může obsahovat  následující soubory:

• /config.xml
• /index.html
• /background.js
• /popup.html
• /icons/example.png
• /locales/cs-cz/index.html
• /locales/cs-cz/background.js
• /locales/cs-cz/popup.html

Pojďme se na ně podívat po jednom a ukázat si, co který obsahuje.

config.xml

Konfigurační soubor, který poskytuje potřebná metadata k rozšíření — toto je jedna ze dvou povinných částí, které musí obsahovat každé rozšíření (druhá je soubor index.html), ačkoli sama o sobě moc práce neudělá. Protože je systém rozšíření v Opeře založen na W3C Widgets, obsahuje soubor config.xml totéž co předepisuje tato specifikace — viz W3C Widgets spec configuration document. V tomto souboru může být spousta různých informací, a je doporučeno uvést alespoň tyto:

• Jméno rozšíření
• Jméno autora
• Popis
• Ikona: ta je použita ve správci rozšíření a na dalších místech.  Více v dalším textu.

Zde je ukázka takového souboru config.xml:

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets">
  <name>My test extension</name>
  <description>API experiments and testing.</description>
  <author href="http://foo-bar.example.org/"
          email="foo-bar@example.org">Foo Bar Corp</author>
  <icon src="icons/example.png"/>
</widget> 

index.html

V terminologii rozšíření je to „úvodní soubor“. Úvodní soubor je nutnou součástí a stará se o procesy, které v rozšíření běží na pozadí (pokud chcete tento soubor pojmenovat jinak, uveďte to v elementu <content> v config.xml).

Tento soubor může obsahovat JavaScript k vytvoření prvků v uživatelském rozhraní prohlížeče, jako jsou např. tlačítka. Příklad:

<!doctype html>
<html>
  <head>
    <script>
      window.addEventListener("load", function(){
        var theButton;
        var UIItemProperties = {
          disabled: false,
          title: "101 - createItem w popup big",
          icon: "icon.png",
          popup: {
            href: "popup.html",
            width: 250,
            height: 500
          }
        }
        theButton = opera.contexts.toolbar.createItem( UIItemProperties );
        opera.contexts.toolbar.addItem( theButton );
      }, false);
    </script>
  </head>
  <body>
  </body>
</html> 

background.js

Do tohoto souboru ukládejte takzvané „background skripty“, které řídí celé pozadí funkce rozšíření. Můžete jich mít kolik chcete a nemusíte je pojmenovávat zrovna  background.js.

popup.html

Tento soubor (nebo soubory – opět jich může být víc v jednom rozšíření) obsahuje dokument, který se zobrazí ve vyskakovacím okně (oknech), vyvolaných nějakou akcí na pozadí. Vyskakovací okno ale může zobrazit i externí stránku, pokud zadáme patřičné URL.

icons/example.png

V rozšíření by měly být zahrnuty ikony (viz další text).

includes (vložené skripty)

Libovolné soubory s příponou JS, uvedené v tomto adresáři, budou vloženy do stránek, které navštěvujete. Tyto skripty mohou být cílené na konkrétní web, třeba youtube.com. Více o vkládání skriptů naleznete na UserJS documentation pages.

locales

Obsahem adresáře locales jsou soubory s lokalizací, pokud chcete své rozšíření nabídnout v různých jazykových verzích. V adresáři  locales vytvořte podadresáře pro každou jazykovou mutaci, pojmenované podle konvence pro jazyky a dialekty. Ve výše uvedeném příkladu máme adresář  cs-cz pro český překlad, ale můžeme nabídnout např. en-gb, pt-br, ru, no, jp a další. (Všimněte si malých písmen – pojmenovávejte mutace malými písmeny, jak to vyžaduje specifikace W3C Widgets Packaging, kvůli předcházení možným systémovým konfliktům). V každém adresáři můžete nabídnout alternativy pro index.html, vkládané skripty atd.

Uživatelské rozhraní rozšíření pro Operu je vytvořeno z UI elementů, které se vkládají do stránky pomocí vložených skriptů, z tlačítek v toolbaru, která jsou vytvořena pomocí UIItems API v background skriptu, a z vyskakovacích oken, které jsou popsány dál a které zobrazují přiložený HTML dokument, nebo vzdálený web.

Podrobnější pohled na architekturu a API

Architektura rozšíření pro Operu je založena na interakci následujících čtyř částí:

Vložené skripty <-> Procesy na pozadí <-> Tlačítka/nápisy <-> Popup

Tyto části komunikují pomocí cross-document messaging a zajišťují následující funkce:

Vložené skripty

Zde jsou skripty, co jsou vloženy do cílových stránek.

Procesy na pozadí

Procesy na pozadí drží celé rozšíření pohromadě. Jsou centrálním místem, přes které probíhá veškerá komunikace a kde se odehrává většina interakcí s API rozšíření. Procesy na pozadí vytváří a mění prvky uživatelského rozhraní pomocí následujících me­tod:

• opera.contexts.toolbar.createItem( { ...properties... } )
• opera.contexts.toolbar.addItem( uiItem )
• opera.contexts.toolbar.removeItem( uiItem )

Pozn.: Zatím lze použít pouze toolbar, ale v budoucnu mohou přibýt další kontejnery.

Tlačítka a nápisy

Tato část obsahuje elementy uživatelského rozhraní, jako jsou tlačítka, informační nápisy nebo v budoucnu např. položky menu.

Tlačítka

Tlačítko můžete vytvořit voláním funkce opera.contexts.toolbar.createItem() a přidat ho do lišty nástrojů pomocí opera.contexts.toolbar.addItem(). Ukažme si příklad souboru index.html, v němž je vytvořeno tlačítko v toolbaru, které při stisknutí otevře okno:

<!doctype html>
<html>
  <head>
    <script>
      window.addEventListener("load", function(){
        var theButton; // the button variable
        var toolbar = opera.contexts.toolbar; //the Opera toolbar
        var props = { // options for the button
          disabled: false,
          title: "My first extension!",
          icon: "opera.ico",
          popup: {
            href: "http://www.google.com",
            width: 300,
            height: 200
          }
        }
        theButton = toolbar.createItem( props ); // create the button
        toolbar.addItem( theButton ); // add button to UI
      }, false);
    </script>
  </head>
  <body>
  </body>
</html> 

Tlačítko odstraníte funkcí opera.contexts.toolbar.removeItem(theButton);. Můžete rovněž obsloužit událost onclick přidáním onclick: function(){ /* ... */ } k tlačítku.

Ikony

Pokud vytváříte tlačítko, měli byste přiložit obrázek, který bude tlačítko představovat. Tlačítko je vykresleno s rozměry 22×22 pixelů, a pokud bude obrázek větší, bude změněn. Pokud chcete předejít nehezkým deformacím, používejte obrázky přesně těchto rozměrů.

Pokud budete své rozšíření nahrávat do galerie, budete požádáni navíc o ikonu 64×64. Tato ikona bude použita v online katalogu Opery a ve správci rozšíření. Titulek, popis a cesta k ikoně jsou uloženy v souboru  config.xml.

Vyskakovací okna

Vyskakovací okna mohou být definována prostě – pomocí přidání vlastnosti popup při vytváření tlačítka:

var props = { // options for the button
  disabled: false,
  title: "My first extension!",
  icon: "opera.ico",
  popup: {
    href: "http://www.google.com",
    width: 300,
    height: 200
  }
} 

Výše uvedený příklad vytvoří vyskakovací okno, v němž bude zobrazena úvodní stránka Google. Můžete rovněž definovat vlastní HTML stránku jako součást rozšíření, a ta bude ve vyskakovacím okně zobrazena:

popup: {
  href: "popup.html",
  width: 300,
  height: 300
} 

Nápisy

Nápisy (badges) jsou informace, které jsou zobrazeny přes existující tlačítko. Takový nápis přidáte jednoduše pomocí příslušné vlastnosti k tlačítku:

var props = { // options for the button
  disabled: false,
  title: "My first extension!",
  icon: "opera.ico",
  popup: {
    href: "popup.html",
    width: 300,
    height: 200
  },
  badge: {
    textContent: '123'
  }
} 

Můžete upravit barvu nápisu pomocí jednoduchých stylů:

backgroundColor: '#ffeedd',
color: '#404040', 

Konečně vlastní text nápisu můžete upravit nastavením vlastnosti  textContent:

theButton.badge.textContent = "45" 

Různé typy rozšíření

Existuje mnoho typů rozšíření, které můžete vytvořit, i když podpora pro některé zatím nemusí být k dispozici. V podstatě lze říct, že každé rozšíření se skládá z těchto částí:

Vložené skripty <-> Procesy na pozadí <-> Tlačítka/nápisy <-> Popup

Různé typy rozšíření pak vzniknou coby permutace těchto částí:

1. Vložené skripty + index.html : To je prostý vložený skript, prázdný index.html a patřičný config.xml, zabalený jako rozšíření. Bude to fungovat, ale nevyužijete výhod API pro rozšíření
2. Tlačítko + Popup: Můžete vytvořit rozšíření, které zobrazí tlačítko v nástrojové liště prohlížeče, a při kliknutí na toto tlačítko zobrazí stránku ze zadaného URL.
3. Rozšíření jako bookmarklet: Můžete napsat rozšíření, které při kliknutí vyvolá bookmarklet pro aktivní panel, stejně jako by byl skript zapsaný pomocí javascript: URL v záložce.
4. Analýza obsahu: Rozšíření může vložit do navštívené stránky skript, který zpracuje DOM a pošle výsledná data zpět procesu na pozadí, který s těmito výsledky naloží dle potřeby (např. zobrazí informaci coby nápis přes tlačítko apod.)
5. Akce s obsahem: Můžete vytvořit rozšíření, které zobrazí tlačítko, jež při aktivaci pošle zprávu vloženému skriptu, který provede požadované operace a pošle zpět data. Například: vybereme adresu v textu stránky, klikneme na tlačítko a v popup okně se daná adresa ukáže na Google mapách.
6. Automatické akce: Proces na pozadí může periodicky vykonávat nějakou činnost a aktualizovat informace – např. kontrolovat mail a zobrazovat počet nepřečtených zpráv.

Hello, world!

V této části si ukážeme základní kroky při vytváření rozšíření pro prohlížeč Opera. Vytvoříme si tlačítko do toolbaru, které po stisknutí otevře vyskakovací dialog se známým nápisem „Hello world!“ K vytvoření nebudeme potřebovat nic jiného než Operu 11 a textový editor dle vlastního výběru.

Konfigurace rozšíření

Nejprve vytvoříme konfigurační soubor, v němž budou uložena metadata s popisem rozšíření. Zde jsou informace jako jméno rozšíření, autor nebo použitá ikona. Opera používá standardní formát pro widgety, definovaný konsorciem W3C, který vám bude povědomý, pokud jste někdy vytvářeli pro Operu widgety.

Pojďme si tedy vytvořit kostru takového souboru:

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets">
    <name>Hello extensions!</name>
    <description>A simple hello world example</description>
    <author href="yourURL" email="yourEMail">Enter your name here</author>
    <icon src="hello.png"/>
</widget> 

Uložte tento soubor s názvem config.xml do pracovního adresáře.

Vytváření ikony pro rozšíření

Povšimněte si elementu icon v konfiguračním souboru. Specifikuje ikonu o doporučených rozměrech 64×64 pixelů, která bude představovat toto rozšíření ve Správci rozšíření a na stránce Opera extensions.

Můžete si vytvořit vlastní, nebo použijte připravený obrázek hello.png – stáhněte jej a nahrajte do pracovního adresáře.

Přidání tlačítka do nástrojové lišty

Když máme rozšíření nakonfigurované, můžeme začít vytvářet kód. Vytvoříme si tlačítko, které bude vloženo do nástrojové lišty, a to pomocí tohoto kódu:

<!doctype html>
<html lang="en">
  <head>
    <script>
       window.addEventListener("load", function(){
        var theButton;
        var ToolbarUIItemProperties = {
          title: "Hello World",
          icon: "hello-button.png",
          popup: {
            href: "popup.html",
            width: 110,
            height: 30
          }
        }
        theButton = opera.contexts.toolbar.createItem(ToolbarUIItemProperties);
        opera.contexts.toolbar.addItem(theButton);
      }, false);
    </script>
  </head>
  <body>
  </body>
</html> 

Uložte si kód do souboru, který pojmenujete index.html.

Všechna rozšíření pro Operu musí obsahovat soubor index.html. Ten obsahuje pouze holé HTML se skriptem, který vytváří elementy uživatelského rozhraní. Vlastní tělo HTML dokumentu je ignorováno.

Výše uvedený skript vytvoří položku v nástrojové liště a nastaví některé vlastnosti. Bude použita uvedená ikona (18×18px) a k ní přiřazeno vyskakovací okno s danými rozměry a uvedeným obsahem.

Opět si můžete stáhnout ikonu hello-button.png a uložit do pracovního adresáře.

Vyskakovací dialog

Vytvořili jsme tlačítko, udali rozměry vyskakovacího okna, a nyní potřebujeme nějaký obsah. Obsahem bude prostý HTML dokument, který se zobrazí v okně. Můžeme v něm použít HTML, CSS, JavaScript nebo jakoukoli jinou technologii, kterou normálně používáte na webových stránkách. Toto je příklad „hello world“, takže stránka bude velmi jednoduchá:

<!doctype html>
<html lang="en">
  <head>
    <title>Hello World!</title>
    <style>
        h1 {
            font: 14px helvetica, arial, sans-serif;
            text-align: center;
         }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html> 

Uložte ji jako popup.html k ostatním souborům.

Zabalení a instalace

Naše rozšíření je téměř hotové. Zbývá už jen soubory vzít a sbalit – použijte svůj oblíbený archivátor, který dokáže vytvořit soubor typu ZIP. Nezapomeňte změnit příponu na .oex  – a je hotovo.

Výsledné rozšíření si můžete stáhnout: HelloExtension.

Nyní stačí přetáhnout rozšíření na okno prohlížeče, a objeví se dotaz, zda jej chceme nainstalovat. Uvidíte i ikonu, kterou jsme si připravili. Přepněte panel a zkuste kliknout na novou ikonku v toolbaru.

Experimentujte s nastavením tlačítka, s obsahem dialogu a s dalšími parametry.