Installation

Constituez-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 structure

La structure de l'extension est la suivante:

• src

•  chrome.manifest

•  install.rdf

•  defaults/

•    preferences/

•      prefs.js

•   chrome/

•     fakeext/

•       content/

•         overlay.xul  
•         dialogs/   
•           about.xul    
•       locale/    
•        en-EN/      
•          locale.dtd    
•        fr-FR/      
•          locale.dtd

•       skin/    
•        global/     
•             logo/      
•            isicil.png

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:

1. content fakeext         chrome/fakeext/content/

2. skin     fakeext global     chrome/fakeext/skin/global/

3. locale     fakeext fr-FR     chrome/fakeext/locale/fr-FR/

4. 

5. overlay    chrome://browser/content/browser.xul    chrome://fakeext/content/overlay.xul

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 : chrome://fakeext/skin/global/logo/isicil.png. A la ligne 5 est déclaré le fichier d'overlay qui sera utilisé pour inséré des éléments dans le navigateur. Ce mécanisme est spécifique aux extensions, en comparaison avec les applications XULRunner vues la séance précédente. Observez la correspondances des adresses et de l'emplacement du fichier overlay.xul.

Regardez maintenant le fichier overlay.xul:

1. <?xml version="1.0" encoding="UTF-8"?>

2. <!DOCTYPE overlay SYSTEM "chrome://fakeext/locale/locale.dtd">

3. <?xml-stylesheet href="chrome://fakeext/skin/skin.css" type="text/css"?>

4. <overlay xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul">

5.     <menupopup id="menu_ToolsPopup">

6.         <menuitem id="fakeext-menuitem" label="&fakeext.title;"/>

7.     </menupopup>

8. </overlay>

 La ligne 1 donne l'adresse du fichier où sont déclarées les entités qui sont des variables accessibles avec la syntaxe "&mavariable;" comme par exemple &fakeext.title; utilisée à la ligne 5 pour donner une valeur au label du "menuitem". La ligne 10 montre comment  est inséré un élément dans le navigateur. En utilisant le DOM inspector, retrouvez dans le dom du navigateur l'élément à l'id "menu_ToolsPopup".

Exercice: Ajouter une interaction ouvrant la fenêtre de dialogue.