Share
Opera 11, la prochaine version du navigateur Web acclamé par la critique, propose une fonctionnalité intéressante et recherchée: des extensions. Les extensions permettent aux utilisateurs de s'approprier leur navigateur Web en ajoutant des fonctionnalités directement dans le navigateur, et non en tant qu'application autonome Opera Widget ou Opera Unite..
Dans ce tutoriel, vous apprendrez les bases du développement de composants Opera en créant une simple extension avec les mêmes standards Web que ceux que nous utilisons déjà pour créer des sites Web..
Les extensions Opera sont basées sur la spécification du widget W3C.
Les développeurs peuvent créer des extensions Opera avec les mêmes compétences de pile Web que celles qu’ils possèdent déjà (HTML, JavaScript et CSS) pour créer des sites Web et des applications Web. Avec seulement quelques modifications à leur code, les développeurs qui ont déjà créé une extension similaire pour d'autres navigateurs pourront créer facilement une extension Opera.
Opera a également publié une API de support pour aider les développeurs à créer des extensions Opera beaucoup plus facilement..
Voici un exemple rapide de l'extension mini Wikipedia:
Vous pouvez créer de nombreux types d'extensions Opera:
Accentsconagua
Bouton de la barre d'outils Opera: Une extension de base qui ajoute un bouton à la barre d'outils d'Opera.Bouton + Popup: Un bouton dans la barre d'outils d'Opera, qui, lorsqu'il est cliqué, affiche une fenêtre contextuelle avec une URL tierce. Nous allons créer cette forme d'extension aujourd'hui.Bouton + Badge: Il est souvent utilisé pour afficher un nombre d'éléments, tels que des courriers ou des messages non lus.Manipuler des onglets et des fenêtres: Opera offre aux développeurs la possibilité de manipuler des onglets et des fenêtres.Une extension de bookmarklet: Lorsque l'utilisateur clique dessus, exécute une fonction bookmarklet à partir du processus d'arrière-plan et l'exécute dans l'onglet en cours.Pour le tutoriel d'aujourd'hui, nous allons créer une extension simple qui ajoute un Nettuts+ bouton de la barre d'outils d'Opera. Une fenêtre contextuelle s’affiche lorsque l’utilisateur clique sur ce bouton. L'utilisateur peut ensuite rechercher des articles sur le site Web Nettuts + directement à partir de cette fenêtre contextuelle. En outre, il existe une liste de Nettuts + tutoriels.
Pour commencer, tout ce dont nous avons besoin est d’une copie d’Opera 11, ainsi que d’un éditeur de texte ou d’un IDE de votre choix. Vous pouvez télécharger Opera 11 ici.
Tout d'abord, nous allons créer le fichier de configuration de l'extension, qui contient les métadonnées décrivant l'extension. Nous pouvons spécifier des informations telles que le nom de l'extension, l'auteur et l'icône ici.
Créez un fichier XML nommé config.xml, puis ajoutez le code suivant:
Nettuts+ Nettuts + Recherche rapide Fikri Rakala
le config.xml fichier. Il contient quatre éléments enfants (nom, description, auteur et icône)..
Nettuts+)href et email dans le
Les extensions Opera nécessitent un fichier de démarrage, communément appelé index.html. le index.html fichier est l’une des deux seules parties obligatoires du package d’extension (l’autre est config.xml). Ce fichier est un modèle HTML simple avec un script qui crée les éléments de l'interface utilisateur. Le corps de ce document n'est pas utilisé.
Créons le index.html fichier, puis ajoutez le script suivant dans l'en-tête du document:
Le script créera un bouton de barre d’outils avec un certain nombre de propriétés. Une info-bulle est créée avec une icône de 18 × 18 pixels. Une fenêtre contextuelle appartenant au bouton est également créée avec une taille spécifiée, avec une référence à l'emplacement où l'interface utilisateur contextuelle est définie. Le script ci-dessus ajoutera un bouton à la barre d’opéra lors du chargement de l’extension..
dans le ToolbarUIItemProperties objet, nous définissons les propriétés du bouton. Il y a cinq propriétés que nous pouvons passer au ToolbarUIItemProperties. Les cinq propriétés sont les suivantes:
désactivée. Ceci spécifie si le bouton est activé ou non. C'est vrai (désactivé) par défaut et accepte une valeur booléenne. Titre. Cette propriété définit l'info-bulle qui s'affiche lorsque l'utilisateur survole le bouton..icône. Cette propriété définit l'icône utilisée sur le bouton. Si vous fournissez une taille autre que 18 × 18 pixels, l'image sera redimensionnée à cette taille..sur clic. La fonction à exécuter lorsqu'un utilisateur clique sur le bouton. Nous n'utilisons pas cette propriété sur cette extension.on enlève. Fonction à exécuter lorsque le bouton est supprimé de ToolbarContext. Nous n'utilisons pas non plus cette propriété. Après avoir défini les propriétés du bouton dans le ToolbarUIItemProperties objet, nous créons le bouton et appliquons les propriétés en utilisant le createItem méthode:
theButton = opera.contexts.toolbar.createItem (ToolbarUIItemProperties);
Enfin, nous ajoutons le bouton à la barre d’outils d’Opera en utilisant le bouton ajouter un item méthode:
opera.contexts.toolbar.addItem (theButton);
Voici le code complet de la index.html fichier:
Dans la deuxième étape, ci-dessus, lorsque nous avons créé le index.html fichier, nous avons défini les propriétés (l’emplacement et la taille de la fenêtre) de l’objet popup dans la ToolbarUIItemProperties objet. Cette fois, il suffit de créer le contenu de la fenêtre contextuelle. Ceci est juste un document HTML, avec sa fenêtre définie à la taille spécifiée. Nous pouvons utiliser HTML, CSS, JavaScript ou toute autre technologie Web que nous utilisons normalement sur une page Web..
Créez un fichier appelé popup.html, puis ajoutez les éléments suivants dans le corps:
Veuillez noter que nous utilisons le sur clic attribuer ici uniquement pour des raisons de commodité.
Pour contrôler le style de la fenêtre contextuelle, nous ajoutons la feuille de style suivante dans l'en-tête du document:
Ensuite, nous ajoutons une fonction JavaScript dans la tête du document pour gérer les Button1 événement click:
