Vous n'êtes pas connecté. Connexion
|
|
TP6: étude d'une extension FirefoxDe $1Table des matièresEtude de la structure de base d'une extensionInstallationConstituez-vous un environnement de développement en vous créant un profil firefox spécifique (cf TP 5). Télécharger et décompresser l'extension de test feakeext Pour tester cette extension, copier le fichier nommé "fakeext@isicil.inria.fr" dans le dossier "extensions" de votre profil firefox de développement. Le nom de ce fichier correspond à l'identifiant de l'extension déclaré dans le fichier install.rdf: <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:em="http://www.mozilla.org/2004/em-rdf#">
<RDF:Description about="urn:mozilla:install-manifest">
<em:aboutURL>chrome://fakeext/content/dialogs/about.xul</em:aboutURL>
<em:creator>INRIA Sophia</em:creator>
<em:description/>
<em:homepageURL>http://isicil.inria.fr</em:homepageURL>
<em:iconURL>chrome://fakeext/skin/logo/isicil.png</em:iconURL>
<em:id>fakeext@isicil.inria.fr</em:id>
<em:name>ISICIL Fake Extension</em:name>
<em:version>0.1.0</em:version>
<em:updateURL>https://isicil.inria.fr/updates</em:updateURL>
<em:type>2</em:type>
<em:targetApplication>
<RDF:Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:maxVersion>3.*.*</em:maxVersion>
<em:minVersion>3.0</em:minVersion>
</RDF:Description>
</em:targetApplication>
</RDF:Description>
</RDF>
Ouvrez ensuite ce fichier qui contient une seule ligne indiquant le chemin du dossier "src" de l'extension. Modifiez ce chemin pour pointer vers le bon dossier (par ex dans mon cas "D:\flimpens\web-pgm\workspace_cours\fakeext\src"). Redémarrez Firefox et allez au menu Outils/Modules complémentaires et vérifiez que l'extension ISICIL Fake Extension a bien été installée. Etude de la structureLa structure de l'extension est la suivante:
Obeservez tout d'abord le contenu du fichier install.rdf (cf ci-dessus) qui contient tous les détails liés à l'identification de l'extension. Regardez maintenant le fichier chrome.manifest:
C'est dans ce fichier que sont déclarées les correspondances entre les adresses chrome:// et les dossiers de l'arborescences. Par exemple le fichier image isicil.png sera accessible à l'adresse : Regardez maintenant le fichier overlay.xul:
La ligne 1 donne l'adresse du fichier où sont déclarées les entités qui sont des variables accessibles avec la syntaxe Exercice: Ajouter une interaction ouvrant la fenêtre de dialogue:
Exercice: Ajoutez un bouton à la fenêtre de dialogue qui ouvre lune page dans un nouvel onglet du navigateur.
Etude d'une extension complèteL'extension "boomtag" est un prototype d'extension un peu plus complète et faisant appel à des web services développés dans le cadre du premier cours sur les web services REST. Déploiement et test de l'extensionTéléchargez et décompressez l'archive boomtag. Cette extension consomme des webservices du server de bookmarks étudiés dans le séance 1. Récupérer l'archive correspondante ou utilisez votre version améliorée ! Le web service qui est appelé est le suivant: http://localhost:9998/bookmark/all. Assurez vous que ce webservice fonctionne avant d'installez l'extension. Pour l'installation et le test, procédez comme pour fakeext:
Cette extension se compose d'une sidebar qui est ouverte par défaut au lancement et qui liste les bookmarks donnés par l'appel au web service. Vérifiez que tous les bookmarks sont bien listés. Cette extension permet aussi d'enregistrer des bookmarks. Pour l'utiliser faites CTRL+SHIFT+D. Une fenetre apparait contenant 3 champs dont certains sont déjà complétés. Le web service pour l'enregistrement des bookmarks nécessite d'être identifié au préalable via le formulaire à l'adresse http://localhost:9998/. L'objectif maintenant est d'enrichir ce squelette d'extension avec des fonctionnalités de tagging, mais aussi (selon votre inspiration) avec des fonctions gérant l'identification, la recherche des bookmarks par tags, etc. Etude des spécificités de boomtagNous allons maintenant regarder plus en détail le code source de cette extension. overlay.xulRegardez l'entête de ce fichier:
Observez ligne 3 la déclaration du fichier d'overlay bmtree.xul où sera écrit le code XUL de la sidebar qui s'intègre directement dans le navigateur, par contraste avec les autre fenêtres de dialogue. Voyez aussi l'externalisation des scripts ligne 6. Autre nouveauté la possibilité d'ajouter des menus contextuels grace à l'élément popup:
L'id de l'élément dans lequel s'insère ce code XUL (contentAreaContextMenu) est un attribut du tabbrowser "content", un élément fils du browser. Utilisez le DOm inspector pour retrouver ces éléments du DOM du navigateur. Les commandset permettent de déclarer des commandes qui sont ensuite reliés à des appels de fonction javascript contenu dans le fichier inclus en entête. Regardez la commande "showPanel":
Ces commandes peuvent être ensuite appelés par d'autres éléments XUL comme les raccourcis claviers, les "keyset". Ici CTRL+SHIFT+F pour appeler la commande showPanel (ainsi que l'autre raccourci évoqué plus haut pour l'éditeur de bookmarks):
|
Powered by MindTouch Deki Open Source Edition v.8.08 |