Slik oppretter du en Opera Extension fra scratch

Opera 11, den neste versjonen av den kritikerroste nettleseren, pakker en interessant, mye etterspurt funksjon: utvidelser. Utvidelser tillater brukere å gjøre nettleseren sin egen ved å legge til funksjoner og funksjonalitet direkte i nettleseren selv, og ikke som en frittstående Opera Widget eller Opera Unite-applikasjon.

I denne opplæringen lærer du grunnleggende om å utvikle Opera-komponenter ved å lage en enkel utvidelse med de samme nettstandardene vi allerede bruker til å bygge nettsteder.

Introduksjon

Opera-utvidelser er basert på W3C-widgetens spesifikasjon.

Utviklere kan bygge Opera-utvidelser med de samme nettstabler som de allerede har (HTML, JavaScript og CSS) for å bygge nettsteder og webapplikasjoner. Med bare noen få tweaks til koden deres, kan utviklere som allerede har skrevet en lignende utvidelse for andre nettlesere, enkelt kunne lage en Opera-utvidelse.

Opera har også gitt ut en støttende API for å hjelpe utviklere å bygge Opera-utvidelser mye lettere.

Her er et raskt eksempel på mini Wikipedia-utvidelsen:

Du kan opprette mange forskjellige typer Opera-utvidelser:

Opera verktøylinjeknapp: En grunnleggende utvidelse som legger til en knapp i Operas verktøylinje.
Knapp + Popup: En knapp i Operas verktøylinje, som, når den klikkes, viser et popup-vindu med en tredjeparts URL. Vi vil lage denne utvidelsen i dag.
Knapp + merketegn: Det brukes ofte til å vise en rekke ting, for eksempel uleste post eller meldinger.
Manipuler faner og Windows: Opera gir utviklere muligheten til å manipulere faner og vinduer.
En bokmerkeutvidelse: Når du klikker, utfører en bookmarklet-funksjon fra bakgrunnsprosessen og utfører den på den nåværende kategorien.

Trinn 0: Komme i gang

For dagens veiledning, lager vi en enkel utvidelse som legger til en Nettuts+ knappen til Operas verktøylinje. Et popup-vindu vil vises når brukeren klikker på denne knappen. Brukeren kan da søke etter artikler fra Nettuts + nettsiden direkte fra dette popup-vinduet. I tillegg er det en liste over Nettuts + tutorials.

For å komme i gang, er alt vi trenger en kopi av Opera 11, og en tekstredigerer eller IDE etter eget valg. Du kan laste ned Opera 11 her.

Trinn 1: Opprette utvidelseskonfigurasjonsfilen

Først vil vi opprette utvidelses konfigurasjonsfilen, som inneholder metadataene som beskriver utvidelsen. Vi kan spesifisere informasjon som utvidelsens navn, forfatter og ikon her.

Opprett en XML-fil kalt config.xml, og legg deretter til følgende kode for det:

   Nettuts+ Nettnøtter + Hurtigsøk Fikri Rakala

De element er roten element av config.xml fil. Den inneholder fire barns elementer (navn, beskrivelse, forfatter og ikon).

De elementet inneholder navnet på utvidelsen (Nettuts+)
De elementet inneholder beskrivelsen av utvidelsen
I element, skriver vi inn navnet på forfatterens forfatter (navnet ditt)
De elementet kan inneholde to attributter: href og e-post

I element, spesifiserer vi plasseringen av utvidelsesikonet. Extensions-administratoren og Opera-utvidelsesstedet bruker dette ikonet. Opera anbefaler at du bruker et 64 × 64 piksler ikon.

Trinn 2: Opprette index.html-filen

Opera-utvidelser krever en startfil, vanligvis kalt index.html. De index.html filen er en av de eneste to obligatoriske delene av utvidelsespakken (den andre er config.xml). Denne filen er en HTML-mal med bare bones med et skript som lager brukergrensesnittelementene. Kroppen til dette dokumentet er ikke brukt.

La oss lage index.html fil og legg til følgende skript i dokumentets hode:

Skriptet vil opprette en verktøylinjeknapp med en rekke egenskaper. Et verktøytips er opprettet sammen med et 18 × 18 piksler ikon. En popup som tilhører knappen, opprettes også med en spesifisert størrelse, sammen med en henvisning til hvor popup-brukergrensesnittet er definert. Skriptet ovenfor vil legge til en knapp i Opera 's verktøylinje når utvidelsen laster.

I ToolbarUIItemProperties objekt, definerer vi egenskapene til knappen. Det er fem egenskaper som vi kan overføre til ToolbarUIItemProperties. De fem egenskapene er som følger:

funksjonshemmet. Dette angir om knappen er aktivert eller ikke. Det er sant (deaktivert) som standard og aksepterer en boolesk verdi.
tittel. Denne egenskapen angir verktøytipset som vises når brukeren svinger over knappen.
ikon. Denne egenskapen definerer ikonet som brukes på knappen. Hvis du leverer en størrelse på andre enn 18 × 18 piksler, vil den skalere bildet slik at det passer til den størrelsen.
ved trykk. Funksjonen som skal utføres når en bruker klikker på knappen. Vi bruker ikke denne egenskapen på denne utvidelsen.
onremove. Funksjonen som skal utføres når knappen er fjernet fra ToolbarContext. Vi bruker heller ikke denne eiendommen.

Etter at vi har definert egenskapene til knappen i ToolbarUIItemProperties objekt, lager vi den faktiske knappen og bruker egenskapene ved å bruke createItem metode:

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

Til slutt legger vi til knappen til Operas verktøylinje ved å bruke addItem metode:

 opera.contexts.toolbar.addItem (theButton);

Her er den komplette koden til index.html fil:

Trinn 3: Opprette popup-vinduet

I trinn to, over, da vi opprettet index.html fil, definerte vi egenskapene (plasseringen og vinduets størrelse) av popup-objektet i ToolbarUIItemProperties gjenstand. Denne gangen trenger vi bare å opprette innholdet i popup-vinduet. Dette er bare et HTML-dokument, med visningsport satt til den angitte størrelsen. Vi kan bruke HTML, CSS, JavaScript eller annen webteknologi som vi vanligvis bruker på en nettside.

Opprett en fil som heter popup.html, og legg deretter til følgende elementer i kroppen:

    Hjem 
 ASP.NET
 CMSs
 databaser 
 Design 
 HTML og CSS 
 JavaScript og AJAX 
 PHP
 Rubin
 Nettstedet bygger
 Verktøy og tips 
 Wordpress
 Annen

Vær oppmerksom på at vi bruker ved trykk Tilskrive her bare for enkelhets skyld.

For å kontrollere stilen til popup-vinduet legger vi til følgende stilark i hodet på dokumentet:

Deretter legger vi til en JavaScript-funksjon i hodet på dokumentet for å håndtere Button1 klikk hendelsen:

  funksjon SearchonNettutsplus () // Få Tekst1 verdi var søk = escape (document.getElementById ("Text1"). verdi); // Søk artikler på Nettuts + og vis resultatet i nytt vindu window.open ("http://net.tutsplus.com/?s=" + søk);

Her er den fullførte koden for popup.html dokument:

    Nettuts+       

  Hjem 
 ASP.NET
 CMSs
 databaser 
 Design 
 HTML og CSS 
 JavaScript og AJAX 
 PHP
 Rubin
 Nettstedet bygger
 Verktøy og tips 
 Wordpress
 Annen

Trinn 4: Emballasje og installering av forlengelsen

Vår forlengelse er nå ferdig! Alt som er igjen å gjøre er å velge alle filene og zip dem opp. Når det er gjort, kan vi omdøpe zip-filen til Nettutsplus.oex (husk å erstatte .glidelås forlengelse med .Oex) og vi er ferdige.

På dette tidspunktet kan vi laste opp utvidelsen vår til http://addons.labs.opera.com/.

For å installere den som en vanlig bruker, bare dra forlengelsen (Nettutsplus.oex) til Opera, og det vil spørre deg om du vil installere det. Etter installasjonen finner du Nettuts + -knappen i Operas verktøylinje.

Her er Nettuts + -utvidelsen som kjører på Opera 11:

Konklusjon

Opera-utvidelser kan variere fra enkle til ekstremt komplekse. Etter å ha jobbet sammen med denne opplæringen håper jeg at du nå har den grunnleggende kunnskapen bak prosessen med å opprette Opera-utvidelser. For mer informasjon om å utvikle Opera-utvidelser, vennligst se veiledningen og dokumentasjonen som leveres av Opera.

Glad koding!

Kode