Créer un thème

Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

Introduction

Ce tutoriel va vous mener à travers les étapes requises pour construire un thème très basique qui va modifier la couleur de fond des barres d'outils dans Firefox.

Note Ce tutoriel concerne la création de thèmes pour Firefox 29 et suppérieur. D'autres tutoriels existent pour créer des thèmes destinés aux versions antérieurs de Firefox. Pour un ancien tutoriel, voir Créer un thème pour Firefox.

Mettre en place l'environement de développement

Les thèmes et extensions sont empaquetés et distribués dans des fichiers ZIP ou Paquets, avec l'extension de fichier XPI (prononcé “zippy”).

Un exemple du contenu d'un fichier XPI typique d'un thème:

example.xpi:
              /install.rdf
              /chrome.manifest
              /preview.png
              /icon.png
              /chrome/
                     browser/
                     communicator/
                     global/
                     mozapps/

Nous souhaitons créer une structure de fichier similaire à celle présentée ci-dessus pour notre tutoriel, donc commençons par créer un dossier pour votre thème quelque part sur votre disque dure (ex: C:\themes\mon_theme\ ou ~/themes/mon_theme/). Dans votre nouveau dossier de thème, créez deux nouveaux fichiers texte vides, l'un nommé chrome.manifest et l'autre appelé install.rdf. Le fichier preview.png est montré comme une prévisulaisation du thème dans le paneau des thèmes de la fenêtre des modules complémentaires. Le fichier icon.png est utilisé comme une icône dans le même paneau. Nous les laisserons de côté pour l'instant, sauf si vous disposez déjà d'éléments graphiques que vous souhaitez utiliser.

Les répertoires restants seront extraits depuis le thème par défaut. Pour commencer, vous devrez créer un répertoire quelque part. Copiez votre fichier omni.ja d'installation Firefox dans ce répertoire. La localisation diffère suivant le système d'exploitation :

Linux: /usr/lib/MozillaFirefox/chrome/classic.jar ou /usr/lib/firefox-*.*.*/omni.ja

Windows: \Program Files\Mozilla Firefox\omni.ja

Mac OS X: /Applications/Firefox.app/Contents/MacOS/omni.ja

Maintenant, ouvrez (ou extrayez) ce fichier dans le répertoire que vous avez créé. Il contient plusieurs dossiers, modules, jssubloader et autres. Les fichiers dont vous aurez besoin sont situés dans le dossier chrome\toolkit\skin\classic.

Créez un dossier nommé chrome dans le dossier de votre thème. Ensuite, le contenu des répertoires suivants dans leur dossiers respectifs de ce dossier.

  1. global dans chrome/global
  2. mozapps dans chrome/mozapps

À présent que vous avez copié les dossiers global et mozapps, une poignée d'autres dossiers de l'archive browser/omni.ja sont requis. Ils sont situés dans le dossier du navigateur l'emplacement mentionné ci-dessus. Les fichiers dont nous aurons besoins dans l'archive browser/omni.ja sont situés dans chrome/browser/skin/classic.

Copiez les contenu des répertoires suivants dans leurs dossiers respectifs. Ceci nous donnera une base de style avec laquelle nous allons commencer à travailler.

  1. browser dans chrome/browser/
  2. communicator dans chrome/communicator/

La structure de vos répertoires doit être comme suit :

<ext path>/
          /install.rdf
          /chrome.manifest
          /chrome/
                 browser/
                 communicator/
                 global/
                 mozapps/

Après ces étapes, nous vous recommandons de lire l'article Setting up extension development environment et les indications qui vous y seront données. En particulier, vous devrez installer le DOM Inspector, que nous utiliserons dans les étapes suivantes

Création du Manifeste d'Installation (Install Manifest) Create the Install Manifest

Ouvrez le fichier nommé install.rdf que vous avez créé au en tête de la hierarchie de votre répertoire d'extention et ajoutez y le contenu suivant :

<?xml version="1.0"?>

<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:em="http://www.mozilla.org/2004/em-rdf#">

  <Description about="urn:mozilla:install-manifest">
    <em:id>sample@example.net</em:id>
    <em:version>1.0</em:version>
    <em:type>4</em:type>
   
    <!-- Target Application this theme can install into, 
         with minimum and maximum supported versions. --> 
    <em:targetApplication>
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
        <em:minVersion>29.0</em:minVersion>
        <em:maxVersion>32.*</em:maxVersion>
      </Description>
    </em:targetApplication>
   
    <!-- Front End MetaData -->
    <em:name>My Theme</em:name>
    <em:internalName>sample</em:internalName>
    <em:description>A test extension</em:description>
    <em:creator>Your Name Here</em:creator>
    <em:homepageURL>http://www.example.com/</em:homepageURL>
  </Description>      
</RDF>
  • sample@example.net - c'est l'ID de l'extension. Il s'agit d'un nom de votre choix qui permet d'identifier votre extension sous la forme d'une e-mail (notez que ce n'est pas votre e-mail personnelle). Créez un nom unique. Vous pouvez vous aider d'un GUID. NOTE : ce paramètre DOIT être au format d'une e-mail, même si elle ne DOIT PAS être une e-mail authentique et valide. (exemple.exemple.exemple)
  • 4 - le type de l'add-on. '4' informe qu'il s'agit de l'installation d'un thème. Si vous souhaitiez installer une extension ce serait 2 (voir Install Manifests#type pour les autres types de codes).
  • {ec8030f7-c20a-464f-9b0e-13a3a9e97384} - ID d'application de Firefox.
  • 29.0 - Le numero de la version exacte à partir de laquelle votre extension fonctionne. N'utilisez jamais une asterisque * dans minVersion, cela ne fera pas ce à quoi vous vous attendez.
  • 32.* - La version la plus récente de Firefox avec laquelle votre extension va fonctionner. Ne pas définir à une version plus récente que celle actuellement disponible ! Dans ce cas, "32.*" indique que l'extension fonctionne avec Firefox 32 et toutes les sous-version 32.x. Les thèmes sont compatibles par défaut, tant que vous ne définissez pas un mode de compatiblité stricte pour votre thème.

Si vous obtenez un message qui vous informe que install.rdf est malformé, il est utile de le charger dans Firefox en utilisant la commande Fichier->Ouvrir un fichier et il vous rapportera les erreurs XML.

Voir Install Manifests pour une liste complète des propriétés requises et optionelles.

Sauvegardez le fichier.

Styliser l'interface du navigateur avec CSS

L'interface utilisateur de Firefox est écrite en XUL et JavaScript. XUL est une grammaire XML qui fournit des modules d'interface utilisateur comme les boutons, menus, barres d'outils, arbres, etc. Les actions utilisateur possèdent leurs fonctionnalités en utilisant du JavaScript. Ces éléments XUL sont stylisés en utilisant du CSS. Si vous ne connaissez pas le CSS, ce sera une pente abrupte de votre apprentissage, et vous devriez essayer des tutoriels basés sur le HTML pour commencer.

L'interface utilisateur du navigateur a absolument aucun style de base - si vous essayez de commencer avec un thème vide, Firefox deviendra inutilisable, car les boutons seront uniquement du texte. C'est pourquoi nous avons copié le style par défaut dans l'étape d'organisation.

Lors de l'écriture d'un thème, la manière la plus simple de déterminer quels selcteurs CSS vous avez besoin d'écrire est d'utiliser l'inspecteur DOM que vous devriez avoir installé à l'étape d'organisation. Vous pouvez utiliser cela pour inspecter n'importe quel élément dans une page web ou un document XUL, ce qui en fait quelque chose d'important pour les thèmes.

Modifier le style de la barre d'outils

Note Dans Firefox 4.0 et suppérieur, l'option de surlignement de l'inspecteur DOM ne fonctionne plus. Pour contourner ça, désactivez l'accélération matérielle dans les options de Firefox.

Ouvrez maintenant l'inspecteur DOM (Dans le menu "Outils") et allez dans "Fichier->Inspecter le document chrome". Ce devrait être un menu contenant tous les documents XUL actuellement ouverts dans Firefox.
Prenez le premier document avec un titre de page web, comme "Page de démarrage Firefox" et sélectionnez-le.

Pour ce tutoriel, nous allons modifier la couleur de font des barres d'outils. Sélectionnez l'outil de recherche de noeud (la case de la flèche pour en voir plus dans le coin en haut à gauche de l'inspecteur DOM) et cliquez dans n'importe quel espace non-utilisé d'une barr d'outils. Cela devrait sélectionner un noeud de type "xul:toolbar" dans l'inspecteur DOM.

À partir d'ici, vous pouvez vous amuser avec différents styles pour la barre d'outils et les éléments associés. Par défaut, le panneau de droite devrait montrer le noeud DOM, qui possède des informations importantes comme la classe CSS et le noeud id. L'élément lui-même est de l'id navigator-toolbox, avec aucune idée. Pour accorder son style avec notre thème, nous avons besoin d'écrire une règle de sélecteur pour sélectionner cette classe.

Ouvrez le fichier chrome/browser/browser.css de votre thème. Cherchez dans ce fichier le sélecteur #navigator-toolbox, et ajoutez-lui cette règle background: orange;

Sauvegardez le fichier.

Chrome URIs

Ensuite, nous devons dire à Firefox où trouver les fichiers de thème pour votre thème. CSS, XUL et autres fichiers font partie de "Chrome Packages" - de composants d'interface utilisateur qui sont chargés via chrome:// URIs. Plutôt que de charger le navigateur depuis le disque file:// URI (depuis l'emplacement de Firefox sur le système peut changer de plate-forme en plate-forme et de système en système), les développeurs de Mozilla est venu avec une solution pour la création d'URIs au contenu que l'installée add-on connaît.

La fenêtre du navigateur est: chrome://browser/content/browser.xul. Essayez de taper cette URL dans la barre d'adresse dans Firefox!

Les URI de Chrome se composent de plusieurs composants:

  • Tout d'abord, le schéma URI (chrome) qui indique à la bibliothèque de réseau de Firefox qu'il s'agit d'un URI de Chrome. Il indique que le contenu de l'URI doit être traité comme un (chrome). Comparez (chrome) à (http) qui indique à Firefox de traiter l'URI comme une page Web.
  • Deuxièmement, un nom de paquet (dans l'exemple ci-dessus, navigateur) qui identifie le paquet de composants d'interface utilisateur.
  • Troisièmement, le type de données demandées. Il existe trois types: le contenu (XUL, JavaScript, les liaisons XBL, etc., qui forment la structure et le comportement d'une interface utilisateur d'application), les paramètres régionaux (DTD, .properties, etc., qui contiennent des chaînes pour les UI localization), et la peau (CSS et images qui forment le theme de l'UI).
  • Enfin, le chemin d'accès d'un fichier à charger.

Alors, chrome://foo/skin/bar.png charge le fichier bar.png de la section skin du thème foo.

Lorsque vous chargez du contenu à l'aide d'un URI Chrome, Firefox utilise le Registre Chrome pour traduire ces URI dans les fichiers source réels sur le disque (ou dans les packages JAR).

Creer un Chrome Manifest

Le manifeste Chrome est le fichier qui mappe ces URI Chrome vers les fichiers de votre thème. Pour plus d'informations sur les Manifestes Google Chrome et les propriétés qu'ils prennent en charge, Chrome Manifest reference.

Ouvrez le fichier chrome.manifest que vous avez créé à côté du répertoire chrome à la racine de la hiérarchie des dossiers source de votre extension.

Ajouter dans ce code:

skin    browser         sample   chrome/browser/
skin    communicator    sample   chrome/communicator/
skin    global          sample   chrome/global/
skin    mozapps         sample   chrome/mozapps/

N'oubliez pas la barre oblique, "/"! Sans elle, le paquet ne sera pas enregistré. La troisième colonne doit correspondre à la valeur Nom interne de votre thème à partir du manifeste d'installation ci-dessus.

Cela répertorie les répertoires de la peau dans les emplacements de votre thème. Par exemple, le skin de l'explorateur de skin de ligne / navigateur / signifie "lorsque l'utilisateur a sélectionné l'exemple de thème sélectionné, utilisez le navigateur d'annuaire / pour rechercher des skins pour le package de navigateur". Plus concisément, cela signifie que l'URL chrome://browser/skin/some/path/file.css recherchera un navigateur de fichiers / some / path / file.css dans le répertoire racine de votre thème.

Enregistrer le fichier.

Test

Tout d'abord, nous devons informer Firefox de votre thème. Au cours de la phase de développement des versions Firefox 2.0 et supérieures, vous pouvez pointer Firefox vers le dossier où vous développez le thème et le charger à chaque redémarrage de Firefox.

  1. Localisez votre dossier de prifil et en dessous le profil avec lequel vous souhaitez travailler (e.g. Firefox/Profiles/<profile_id>.default/).
  2. Ouvrez l'extension / folder, en le créant, si nécessaire.
  3. Créez un nouveau fichier texte et placez le chemin d'accès complet à votre dossier de développement à l'intérieur (e.g. C:\themes\my_theme\ or ~/themes/my_theme/). Les utilisateurs de Windows doivent conserver la direction du slash du système d'exploitation, et tout le monde devrait se rappeler d'inclure une barre oblique de fermeture et de supprimer les espaces à la fin.
  4. Enregistrer le fichier avec l'ID de votre thème comme son nom (e.g. sample@example.net). Pas d'extension de fichier.

Maintenant, vous devriez être prêt à tester votre thème!

Démarrez Firefox. Firefox détecte le lien texte vers votre répertoire de thèmes et installe le thème. Votre thème ne sera pas actif la première fois que vous installez, et vous devrez cliquer sur "Activer" et redémarrer avant de pouvoir voir votre changement. Après avoir redémarré cette deuxième fois, vous devriez voir la couleur d'arrière-plan des barres d'outils s'affiche maintenant en orange.

Vous pouvez maintenant revenir en arrière et apporter des modifications supplémentaires à vos fichiers css, fermer et redémarrer Firefox, et voir les mises à jour.

Package

Maintenant que votre thème fonctionne, vous pouvez package pour le déploiement et l'installation.

Zip le contenu du dossier de votre thème (pas le dossier thème lui-même), et renommez le fichier zip pour avoir une extension .xpi. Dans Windows, vous pouvez le faire facilement en sélectionnant tous les fichiers et sous-dossiers dans votre dossier d'extension, faites un clic droit et choisissez "Envoyer vers -> Dossier compressé (zippé)". Un fichier .zip sera créé pour vous. Il suffit de renommer et vous avez terminé!

Sur Mac OS ou Linux, vous pouvez utiliser l'outil zip de ligne de commande:

zip -r my_theme.xpi install.rdf chrome.manifest browser communicator global mozapps

Ou, si vous avez 7-Zip installé, vous pouvez l'utiliser pour le zipper ceci:

7z a -tzip my_theme.xpi chrome chrome.manifest

Remarque: L'outil de ligne de commande met à jour un fichier zip existant et ne le remplace pas - donc si vous avez supprimé des fichiers de votre thème, supprimez le fichier .xpi avant de lancer la commande zip.

Maintenant, téléchargez le fichier .xpi sur votre serveur, en vous assurant qu'il est servi en tant qu'application / x-xpinstall. Vous pouvez y accéder et permettre aux utilisateurs de le télécharger et de l'installer. Afin de tester notre fichier .xpi, nous pouvons simplement le glisser dans le Gestionnaire de compléments via "Outils -> Gestionnaire de compléments", ou l'ouvrir en utilisant "Fichier -> Ouvrir fichier ...".

Installation à partir d'une page web

Il existe plusieurs façons d'installer des extensions à partir de pages Web, y compris le lien direct vers les fichiers XPI et l'utilisation de l'objet InstallTrigger. Les auteurs de vulgarisation et les auteurs Web sont encouragés à InstallTrigger method pour installer XPIs, car il fournit la meilleure expérience aux utilisateurs.

Utilisation d'addons.mozilla.org

Mozilla Add-ons est un site de distribution où vous pouvez héberger votre thème gratuitement. Votre thème sera hébergé sur le réseau miroir de Mozilla pour garantir votre téléchargement même s'il peut être très populaire. Le site de Mozilla fournit également aux utilisateurs une installation plus facile et met automatiquement à disposition vos versions les plus récentes pour les utilisateurs de vos versions existantes lorsque vous les téléchargez. En outre, Mozilla Add-ons permet aux utilisateurs de commenter et de fournir des commentaires sur votre thème. Il est fortement recommandé d'utiliser les modules complémentaires Mozilla pour distribuer vos thèmes!

Visitez https://addons.mozilla.org/developers/ et créer votre compte pour proposer votre thème.

Note: Votre thème sera transmis plus rapidement et téléchargé plus si vous avez une bonne description et quelques captures d'écran du thème en action.

______________________________

 

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : FanMozilla, Kenjiraw, luc.perillat
 Dernière mise à jour par : FanMozilla,