Så här skapar du en Opera Extension från början

Opera 11, nästa version av den kritikerrosade webbläsaren, packar en intressant, mycket eftersökt funktion: förlängningar. Extensions tillåter användare att göra webbläsaren sin egen genom att lägga till funktioner och funktionalitet direkt i webbläsaren själv och inte som en fristående Opera Widget eller Opera Unite-applikation.

I denna handledning lär du dig grunderna i att utveckla Opera-komponenter genom att skapa en enkel förlängning med samma webbstandarder som vi redan använder för att bygga webbplatser.

Introduktion

Opera-förlängningar baseras på W3C-widgetens specifikation.

Utvecklare kan bygga Opera-förlängningar med samma webbstackfärdigheter som de redan har (HTML, JavaScript och CSS) för att bygga webbplatser och webbapplikationer. Med bara några tweaks till deras kod kommer utvecklare som redan har skapat en liknande tillägg för andra webbläsare enkelt att skapa en Opera-förlängning.

Opera har också släppt ett stödjande API för att hjälpa utvecklare att bygga Opera-förlängningar mycket lättare.

Här är ett snabbt exempel på mini Wikipedia-förlängningen:

Du kan skapa flera olika typer av Opera-tillägg:

Operationsverktygsfält knappen: En grundläggande förlängning som lägger till en knapp i operans verktygsfält.
Knapp + Popup: En knapp i Operas verktygsfält, som, när den klickas, visar ett popup-fönster med en tredjepartsadress. Vi kommer att skapa denna form av förlängning idag.
Knapp + märke: Det används ofta för att visa ett antal poster, till exempel olästa mail eller meddelanden.
Manipulera flikar och Windows: Opera ger utvecklare möjlighet att manipulera flikar och fönster.
En bokmärkeförlängning: När du klickar, exekverar en bokmärkesfunktion från bakgrundsprocessen och utför den på den aktuella fliken.

Steg 0: Komma igång

För dagens handledning skapar vi en enkel anknytning som lägger till en Nettuts+ knappen till operans verktygsfält. Ett popup-fönster visas när användaren klickar på den här knappen. Användaren kan sedan söka efter artiklar från webbplatsen Nettuts + direkt från det här popup-fönstret. Dessutom finns en lista över Webuts + handledning.

För att komma igång är allt vi behöver en kopia av Opera 11, och en textredigerare eller IDE efter eget val. Du kan ladda ner Opera 11 här.

Steg 1: Skapa tilläggskonfigurationsfilen

Först kommer vi att skapa utvidgnings konfigurationsfilen, som innehåller metadata som beskriver förlängningen. Vi kan ange information som tilläggets namn, författare och ikon här.

Skapa en XML-fil med namnet config.xml, och lägg sedan till följande kod:

   Nettuts+ Nettötter + Snabbsökning Fikri Rakala

De elementet är grundelementet i config.xml fil. Den innehåller fyra barnelement (namn, beskrivning, författare och ikon).

De elementet innehåller namnet på förlängningen (Nettuts+)
De elementet innehåller beskrivningen av förlängningen
I element, vi anger namnet på förlängningens författare (ditt namn)
De elementet kan innehålla två attribut: href och e-post

I element, vi specificerar platsen för förlängningsikonen. Utvidgningshanteraren och operatörstilläggssidan kommer att använda den här ikonen. Opera rekommenderar att du använder en 64 × 64 pixelikon.

Steg 2: Skapa index.html-filen

Opera förlängningar kräver en startfil, vanligtvis kallad index.html. De index.html filen är en av de enda två obligatoriska delarna av utvidgningspaketet (den andra är config.xml). Den här filen är en HTML-mall med blankt ben med ett skript som skapar användargränssnittet. Kroppen i detta dokument används inte.

Låt oss skapa index.html fil och lägg till följande skript i huvudet på dokumentet:

Skriptet skapar en verktygsfältsknapp med ett antal egenskaper. Ett verktygstips skapas tillsammans med en 18 × 18 pixelikon. En popup som hör till knappen skapas också med en angiven storlek, tillsammans med en hänvisning till var popup-gränssnittet definieras. Skriptet ovan kommer att lägga till en knapp till Operas verktygsfält när tillägget laddas.

I ToolbarUIItemProperties objekt, definierar vi knappens egenskaper. Det finns fem egenskaper som vi kan överföra till ToolbarUIItemProperties. De fem egenskaperna är följande:

Inaktiverad. Detta anger om knappen är aktiverad eller inte. Det är sant (inaktiverat) som standard och accepterar ett booleskt värde.
titel. Den här egenskapen anger verktygetippen som visas när användaren svänger över knappen.
ikon. Den här egenskapen definierar ikonen som används på knappen. Om du tillhandahåller en storlek som inte är 18 × 18 pixlar, kommer den att skala bilden så att den passar den storleken.
onclick. Funktionen som ska utföras när en användare klickar på knappen. Vi använder inte den här egenskapen på den här förlängningen.
onremove. Funktionen som ska utföras när knappen tas bort från ToolbarContext. Vi använder inte den här egenskapen.

Efter att vi har definierat egenskaperna hos knappen i ToolbarUIItemProperties objekt, skapar vi själva knappen och tillämpar egenskaperna genom att använda createItem metod:

 theButton = opera.contexts.toolbar.createItem (ToolbarUIItemProperties);

Slutligen lägger vi till knappen till operans verktygsfält genom att använda Lägg till vara metod:

 opera.contexts.toolbar.addItem (theButton);

Här är den fullständiga koden för index.html fil:

Steg 3: Skapa popup-fönstret

I steg två ovan, när vi skapade index.html fil definierade vi egenskaperna (platsen och fönstret) i popup-objektet i ToolbarUIItemProperties objekt. Den här gången behöver vi bara skapa innehållet i popup-fönstret. Detta är bara ett HTML-dokument, med dess visningsport satt till den angivna storleken. Vi kan använda HTML, CSS, JavaScript eller annan webbteknologi som vi brukar använda på en webbsida.

Skapa en fil som heter popup.html, och lägg sedan till följande element i kroppen:

    Hem 
 ASP.NET
 CMS
 databaser 
 Design 
 HTML & CSS 
 JavaScript och AJAX 
 PHP
 Rubin
 Webbplatsen bygger
 Verktyg och tips 
 word~~POS=TRUNC
 Andra

Observera att vi använder onclick attribut här bara för bekvämlighetens skull.

För att styra popup-fönsterets stil lägger vi till följande stilark i huvudet på dokumentet:

Därefter lägger vi till en JavaScript-funktion i huvudet på dokumentet för att hantera button1 klicka händelse:

  funktion SearchonNettutsplus () // Hämta Text1 värde var search = escape (document.getElementById ("Text1"). värde); // Sök artiklar på Nettuts + och visa resultatet i nytt fönster window.open ("http://net.tutsplus.com/?s=" + sök);

Här är den färdiga koden för popup.html dokumentera:

    Nettuts+       

  Hem 
 ASP.NET
 CMS
 databaser 
 Design 
 HTML & CSS 
 JavaScript och AJAX 
 PHP
 Rubin
 Webbplatsen bygger
 Verktyg och tips 
 word~~POS=TRUNC
 Andra

Steg 4: Förpackning och installation av förlängning

Vår förlängning är nu klar! Allt som finns kvar är att välja alla filer och zip dem upp. När det är klart kan vi byta namn på zip-filen till Nettutsplus.oex (kom ihåg att ersätta .blixtlås förlängning med .oex) och vi är färdiga.

Vid denna tidpunkt kan vi ladda upp vår förlängning till http://addons.labs.opera.com/.

För att installera den som en vanlig användare, dra bara förlängningen (Nettutsplus.oex) till Opera, och det kommer att fråga dig om du vill installera det. Efter installationen hittar du Netuts + -knappen i Operas verktygsfält.

Här är Netuts + -tillägget som körs på Opera 11:

Slutsats

Opera förlängningar kan variera från enkla till extremt komplexa. Efter att ha arbetat med denna handledning hoppas jag att du nu har grundläggande kunskaper bakom processen för att skapa Opera-förlängningar. För mer information om att utveckla Opera-förlängningar, hänvisa till den guide och dokumentation som tillhandahålls av Opera.

Glad kodning!

Koda