Share
Opera 11, die nächste Version des von der Kritik hochgelobten Webbrowsers, enthält ein interessantes, sehr gesuchtes Feature: Erweiterungen. Durch Erweiterungen können Benutzer den Webbrowser zu ihrem eigenen machen, indem sie Funktionen und Funktionen direkt im Browser selbst hinzufügen und nicht als eigenständige Opera Widget- oder Opera Unite-Anwendung.
In diesem Tutorial lernen Sie die Grundlagen der Entwicklung von Opera-Komponenten kennen, indem Sie eine einfache Erweiterung mit denselben Webstandards erstellen, die wir bereits für die Erstellung von Websites verwenden.
Opera-Erweiterungen basieren auf der W3C-Widget-Spezifikation.
Entwickler können Opera-Erweiterungen mit denselben Web-Stack-Fähigkeiten (HTML, JavaScript und CSS) erstellen, um Websites und Webanwendungen zu erstellen. Mit nur wenigen Änderungen am Code können Entwickler, die bereits eine ähnliche Erweiterung für andere Browser entwickelt haben, problemlos eine Opera-Erweiterung erstellen.
Opera hat auch eine unterstützende API veröffentlicht, mit der Entwickler Opera-Erweiterungen viel einfacher erstellen können.
Hier ist ein kurzes Beispiel für die Mini-Wikipedia-Erweiterung:
Sie können zahlreiche verschiedene Arten von Opera-Erweiterungen erstellen:
Accentsconagua
Opera-Symbolleisten-Schaltfläche: Eine grundlegende Erweiterung, die der Symbolleiste von Opera eine Schaltfläche hinzufügt.Schaltfläche + Popup: Eine Schaltfläche in der Symbolleiste von Opera, die beim Anklicken ein Popup-Fenster mit einer Drittanbieter-URL anzeigt. Wir werden diese Form der Erweiterung heute erstellen.Button + Abzeichen: Es wird häufig verwendet, um die Anzahl der Elemente anzuzeigen, beispielsweise ungelesene E-Mails oder Nachrichten.Tabs und Windows manipulieren: Opera bietet Entwicklern die Möglichkeit, Registerkarten und Fenster zu bearbeiten.Eine Bookmarklet-Erweiterung: Wenn Sie darauf klicken, wird eine Bookmarklet-Funktion vom Hintergrundprozess aus ausgeführt und auf der aktuellen Registerkarte ausgeführt.Für das heutige Tutorial erstellen wir eine einfache Erweiterung, die a hinzufügt Nettuts+ Schaltfläche zur Symbolleiste von Opera. Ein Popup-Fenster wird angezeigt, wenn der Benutzer auf diese Schaltfläche klickt. Der Benutzer kann dann direkt über dieses Popup-Fenster nach Artikeln auf der Nettuts + Website suchen. Außerdem gibt es eine Liste mit Nettuts + Tutorials.
Für den Einstieg benötigen wir lediglich eine Kopie von Opera 11 und einen Texteditor oder eine IDE Ihrer Wahl. Sie können Opera 11 hier herunterladen.
Zuerst erstellen wir die Erweiterungskonfigurationsdatei, die die Metadaten enthält, die die Erweiterung beschreiben. Hier können Sie Informationen wie Name, Autor und Symbol der Erweiterung angeben.
Erstellen Sie eine XML-Datei mit dem Namen config.xml, und fügen Sie dann den folgenden Code hinzu:
Nettuts+ Nettuts + Schnelle Suche Fikri Rakala
Das config.xml Datei. Es enthält vier untergeordnete Elemente (Name, Beschreibung, Autor und Symbol)..
Nettuts+)href und Email In dem
Für Opera-Erweiterungen ist eine Startdatei erforderlich, die im Allgemeinen aufgerufen wird index.html. Das index.html file ist einer der beiden einzigen obligatorischen Teile des Erweiterungspakets (der andere ist config.xml). Diese Datei ist eine reine HTML-Vorlage mit einem Skript, das die Elemente der Benutzeroberfläche erstellt. Der Hauptteil dieses Dokuments wird nicht verwendet.
Lass uns die erstellen index.html Datei und fügen Sie das folgende Skript im Kopf des Dokuments hinzu:
Das Skript erstellt eine Symbolleistenschaltfläche mit einer Reihe von Eigenschaften. Eine QuickInfo wird zusammen mit einem 18 × 18-Pixel-Symbol erstellt. Ein Popup, das zu der Schaltfläche gehört, wird ebenfalls mit einer angegebenen Größe erstellt, zusammen mit einem Verweis darauf, wo die Popup-Benutzeroberfläche definiert ist. Das obige Skript fügt der Opera-Symbolleiste eine Schaltfläche hinzu, wenn die Erweiterung geladen wird.
In dem ToolbarUIItemProperties Objekt definieren wir die Eigenschaften der Schaltfläche. Es gibt fünf Eigenschaften, die wir an die übergeben können ToolbarUIItemProperties. Die fünf Eigenschaften lauten wie folgt:
deaktiviert. Dies gibt an, ob die Schaltfläche aktiviert ist oder nicht. Sie ist standardmäßig deaktiviert (true) und akzeptiert einen booleschen Wert. Titel. Diese Eigenschaft ist der Tooltip, der angezeigt wird, wenn der Benutzer über die Schaltfläche fährt.Symbol. Diese Eigenschaft definiert das für die Schaltfläche verwendete Symbol. Wenn Sie eine andere Größe als 18 × 18 Pixel angeben, wird das Bild auf diese Größe skaliert.onclick. Die Funktion, die ausgeführt wird, wenn ein Benutzer auf die Schaltfläche klickt. Wir verwenden diese Eigenschaft nicht für diese Erweiterung.entfernen. Die Funktion, die ausgeführt wird, wenn die Schaltfläche aus dem ToolbarContext entfernt wird. Wir nutzen diese Eigenschaft auch nicht. Nachdem wir die Eigenschaften der Schaltfläche in festgelegt haben ToolbarUIItemProperties Objekt erstellen wir die eigentliche Schaltfläche und übernehmen die Eigenschaften mit der createItem Methode:
theButton = opera.contexts.toolbar.createItem (ToolbarUIItemProperties);
Zum Schluss fügen wir die Schaltfläche zur Symbolleiste von Opera hinzu, indem Sie die Artikel hinzufügen Methode:
opera.contexts.toolbar.addItem (theButton);
Hier ist der vollständige Code der index.html Datei:
In Schritt zwei oben, als wir das erstellt haben index.html In dieser Datei haben wir die Eigenschaften (den Ort und die Fenstergröße) des Popup-Objekts innerhalb des Fensters definiert ToolbarUIItemProperties Objekt. Diesmal müssen wir nur den Inhalt des Popup-Fensters erstellen. Dies ist nur ein HTML-Dokument, dessen Ansichtsfenster auf die angegebene Größe festgelegt ist. Wir können HTML, CSS, JavaScript oder jede andere Web-Technologie verwenden, die wir normalerweise auf einer Webseite verwenden.
Erstellen Sie eine Datei mit dem Namen popup.html, und fügen Sie dann die folgenden Elemente in den Körper ein:
Bitte beachten Sie, dass wir das verwenden onclick Attribut hier nur der Bequemlichkeit halber.
Um den Stil des Popup-Fensters zu steuern, fügen wir dem Kopf des Dokuments das folgende Stylesheet hinzu:
Als Nächstes fügen wir eine JavaScript-Funktion in den Kopf des Dokuments ein, um die Taste 1 click event:
