Type Objet
Obligatoire Non
Exemple
"theme": {
  "images": {
    "headerURL": "images/sun.jpg"
  },
  "colors": {
    "accentcolor": "#CF723F",
    "textcolor": "#000"
  }
}

Utilisez la clé du thème pour définir un thème statique à appliquer à Firefox.

Si votre fichier manifest.json inclut la clé thème, l'extension est supposée être un thème et toute autre clé WebExtension est ignorée. Si vous souhaitez inclure un thème avec une extension, consultez l'API theme.

Formats des images

Les formats d'image suivants sont pris en charge dans toutes les propriétés de l'image du thème :

  • JPEG
  • PNG
  • APNG
  • SVG
  • GIF (Le GIF animé n'est pas supporté)

Syntaxe

La clé du thème est un objet qui prend les propriétés suivantes:

Nom Type Description
images Objet

Obligatoire.

Dispose des propriétés suivantes:

  • "headerURL": ou (éventuellement, pour la compatibilité de Chrome) "theme_frame": l'URL d'une image de premier plan à ajouter à la zone d'en-tête et ancrée dans le coin supérieur droit de la zone d'en-tête.
    Obligatoire.
  • "additional_backgrounds": un tableau d'URL pour les images d'arrière-plan supplémentaires à ajouter à la zone d'en-tête et affichées derrière l'image "headerURL". Ces images forment la première image dans le tableau en haut, la dernière image dans le tableau en bas.
    Par défaut, toutes les images sont ancrées dans le coin supérieur droit de la zone d'en-tête, mais leur comportement d'alignement et de répétition peut-être contrôlé par des propriétés de "properties":.
    Facultatif.

Toutes les URLs sont relatives au fichier manifest.json et ne peuvent pas faire référence à une URL externe.

Les images doivent avoir 200 pixels de hauteur pour s'assurer qu'elles remplissent toujours l'espace d'en-tête verticallement.

colors Objet

Obligatoire.

Dispose des propriétés suivantes :

  • "accentcolor": ou (éventuellement pour la compatibilité de Chrome) "frame": la couleur de l'arrière-plan de la zone d'en-tête, affichée dans l'en-tête quand il n'est pas couvert ou reste visible à travers les images spécifiées dans "headerURL": et  "additional_backgrounds":.
    Obligatoire.
  • "textcolor": ou (éventuellement pour la  compatibilité de Chrome) "tab_text": la couleur du texte affiché dans la zone d'en-tête.
    Obligatoire

"accentcolor": et "textcolor": peuvent être spécifiés avec n'importe quel code couleur CSS valide (nom, RVB, ou hex). "frame": et "tab_text": sont spécifiés à l'aide d'un tableau RVB, tel que "tab_text": [ 107 , 99 , 23 ].

properties Objet

Optionnel

Cet objet a deux propriétés qui affectent la façon dont les images contenues dans"additional_backgrounds": sont affichées : 

  • "additional_backgrounds_alignment": un tableau énumérant les valeurs définissant l'alignement des éléments correspondants du tableau  "additional_backgrounds":.
    Les options d'alignement comprennent  : "bottom" (bas), "center" (centre), "left" (gauche), "right" (droite), "top" (haut), "center bottom"(centre bas), "center center" (centre milieu), "center top" (centre haut), "left bottom" (gauche bas), "left center" (gauche milieu), "left top" (gauche haut), "right bottom" (droite bas), "right center" (droite milieu), et "right top" (droite haut). Si elle n'est pas spécifiée, par défaut, "left top".
    Optionnel
  • "additional_backgrounds_tiling": un tableau énumérant les valeurs de répétition des éléments correspondants du tableau "additional_backgrounds":, avec le support de "no-repeat" (pas de répétition), "repeat" (répétition), "repeat-x" et "repeat-y". Si elle n'est pas spécifiée, par défaut, "no-repeat".
    Optionnel

Exemples

Un thème de base doit définir une image à ajouter à l'en-tête, la couleur d'accent à utiliser dans l'en-tête et la couleur du texte utilisée dans l'en-tête:

 "theme": {
   "images": {
     "headerURL": "images/sun.jpg"
   },
   "colors": {
     "accentcolor": "#CF723F",
     "textcolor": "#000"
   }
 }

Plusieurs images peuvent être utilisées pour remplir l'en-tête, en utilisant une image d'en-tête vierge/transparente pour donner le contrôle de l'emplacement à chaque image visible:

 "theme": {
   "images": {
     "headerURL": "images/blank.png",
     "additional_backgrounds": [ "images/left.png" , "images/middle.png", "images/right.png"]
   },
   "properties": {
     "additional_backgrounds_alignment": [ "left top" , "top", "right top"]
   },
   "colors": {
     "accentcolor": "blue",
     "textcolor": "#ffffff"
   }
 }

Vous pouvez également remplir l'en-tête avec une image répétée, ou des images, dans ce cas, une seule image ancrée dans le milieu du haut de l'en-tête et répétée sur le reste de l'en-tête:

 "theme": {
   "images": {
     "headerURL": "images/blank.png",
     "additional_backgrounds": [ "images/logo.png"]
   },
   "properties": {
     "additional_backgrounds_alignment": [ "top" ],
     "additional_backgrounds_tiling": [ "repeat"  ]
   },
   "colors": {
     "accentcolor": "green",
     "textcolor": "#000"
   }
 }

Compatibilité du navigateur

ChromeEdgeFirefoxFirefox for AndroidOpera
Support simple (Oui) Non55 Non Non

Compatibilité de Chrome

Propriété Firefox Propriété Chrome Notes
images/headerURL images/frame_frame Dans Chrome, l'image est ancrée en haut à gauche de l'en-tête et carrelée si elle ne remplit pas la zone d'en-tête.
images/additional_backgrounds Non supporté  
colors/accentcolor colors/frame colors/frame ne supporte que la définition de couleur RVB.
colors/textcolor colors/tab_text colors/frame ne supporte que la définition de couleur RVB.
properties/additional_backgrounds_alignment Non supporté  
properties/additional_backgrounds_tiling Non supporté  

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : loella16, hellosct1
 Dernière mise à jour par : loella16,