Share
Opera 11, următoarea versiune a browserului web apreciat de critici, oferă o caracteristică interesantă, mult dorită: extensiile. Extensiile permit utilizatorilor să facă propriul browser web prin adăugarea de funcții și funcționalități direct în browser-ul propriu-zis, și nu ca o aplicație Opera Widget standalone sau Opera Unite.
În acest tutorial, veți afla elementele de bază ale dezvoltării componentelor Opera, prin crearea unei extensii simple cu aceleași standarde web pe care le folosim deja pentru a construi site-uri web.
Extensiile Opera se bazează pe specificația widget-ului W3C.
Dezvoltatorii pot construi extensii Opera cu aceleași abilități pe care le dețin deja (HTML, JavaScript și CSS) pentru a construi site-uri Web și aplicații web. Cu doar câteva modificări la codul lor, dezvoltatorii care au creat deja o extensie similară pentru alte browsere vor putea să creeze cu ușurință o extensie Opera.
Opera a lansat, de asemenea, un API de sprijin pentru a ajuta dezvoltatorii să construiască extensii Opera mult mai ușor.
Iată un exemplu rapid al extensiei mini Wikipedia:
Puteți crea numeroase tipuri diferite de extensii Opera:
Accentsconagua
Butonul barei de instrumente Opera: O extensie de bază care adaugă un buton la bara de instrumente a lui Opera.Buton + Popup: Un buton din bara de instrumente a lui Opera, care, atunci când se face clic, afișează o fereastră pop-up cu o adresă URL a unei terțe părți. Vom crea această formă de extindere astăzi.Buton + Insigna: Este adesea folosit pentru a afișa un număr de elemente, cum ar fi mesaje necitite sau mesaje.Manipulați File și Windows: Opera oferă dezvoltatorilor posibilitatea de a manipula filele și ferestrele.O extensie de carte: Când se face clic, execută o funcție de marcaj din procesul de fundal și o execută pe fila curentă.Pentru tutorialul de astăzi, vom crea o extensie simplă care adaugă o Nettuts+ pentru bara de instrumente a lui Opera. O fereastră pop-up se va afișa când utilizatorul face clic pe acest buton. Utilizatorul poate căuta apoi articole din site-ul Nettuts + direct din această fereastră pop-up. În plus, există o listă de tutoriale Nettuts +.
Pentru a începe, tot ce ne trebuie este o copie a programului Opera 11 și un editor de text sau IDE la alegere. Puteți descărca Opera 11 aici.
Mai întâi, vom crea fișierul de configurare a extensiei, care conține datele meta care descriu extensia. Putem specifica aici informații cum ar fi numele extensiei, autorul și pictograma.
Creați un fișier XML numit config.xml, și apoi adăugați următorul cod la el:
Nettuts+ Nettuts + Căutare rapidă Fikri Rakala
config.xml fişier. Acesta conține patru elemente copil (nume, descriere, autor și pictogramă).
Nettuts+)href și e-mail În
Opera extensiile necesită un fișier de pornire, numit în mod obișnuit index.html. index.html fișierul este una din cele două părți obligatorii ale pachetului extensie (cealaltă este config.xml). Acest fișier este un șablon HTML pentru oase goale, cu un script care creează elementele UI. Corpul acestui document nu este utilizat.
Să creăm index.html fișier și apoi adăugați următorul script în capul documentului:
Scriptul va crea un buton al barei de instrumente cu un număr de proprietăți. Se creează o sugestie împreună cu o pictogramă de 18 × 18 pixeli. Un popup aparținând butonului este, de asemenea, creat cu o dimensiune specificată, împreună cu o referință la locul unde este definit interfața pop-up. Scriptul de mai sus va adăuga un buton la bara de instrumente a lui Opera atunci când se încarcă extensia.
În ToolbarUIItemProperties obiect, definim proprietățile butonului. Există cinci proprietăți pe care le putem trece la ToolbarUIItemProperties. Cele cinci proprietăți sunt după cum urmează:
invalid. Aceasta specifică dacă butonul este activat sau nu. Este adevărat (dezactivat) în mod implicit și acceptă o valoare booleană. titlu. Această defecțiune de proprietate a sfatului deget care este afișat atunci când utilizatorul se deplasează peste buton.icoană. Această proprietate definește pictograma utilizată pe buton. Dacă furnizați o dimensiune diferită de 18 × 18 pixeli, va scala imaginea pentru a se potrivi dimensiunii respective.onclick. Funcția de executat când un utilizator dă clic pe buton. Nu folosim această proprietate pentru această extensie.onremove. Funcția de executat atunci când butonul este eliminat din ToolbarContext. De asemenea, nu folosim această proprietate. După ce am definit proprietățile butonului din ToolbarUIItemProperties obiect, vom crea butonul real și vom aplica proprietățile utilizând createItem metodă:
theButton = opera.contexts.toolbar.createItem (ToolbarUIItemProperties);
În final, adăugăm butonul la bara de instrumente a lui Opera folosind adaugare element metodă:
opera.contexts.toolbar.addItem (theButton);
Aici este codul complet al index.html fişier:
În pasul doi, de mai sus, când am creat index.html fișier, am definit proprietățile (dimensiunea locației și a ferestrei) a obiectului pop-up în cadrul ToolbarUIItemProperties obiect. De data aceasta, trebuie doar să creăm conținutul ferestrei pop-up. Acesta este doar un document HTML, cu portul său de vizualizare setat la dimensiunea specificată. Putem folosi HTML, CSS, JavaScript sau orice altă tehnologie web pe care o folosim în mod normal pe o pagină Web.
Creați un fișier numit popup.html, și apoi adăugați următoarele elemente în corp:
Rețineți că folosim onclick atribuiți aici numai din motive de conveniență.
Pentru a controla stilul ferestrei pop-up, adăugăm următoarea foaie de stil în capul documentului:
Apoi, adăugăm o funcție JavaScript în capul documentului pentru a face față Button1 clic:
