MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Type Object
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 Object

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êteet 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é 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és 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":.
    Optional.

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 Object

Obligatoire.

Disponible pour les 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 non couvert ou 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 de texte affiché dans la zone d'en-tête.
    Obligatoire

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

properties Object

Optionnel

Cet objet a deux propriétés qui affectent comment utiliés les "additional_backgrounds": les images sont affichées : 

  • "additional_backgrounds_alignment": un tableau de valeurs d'énumération définissant l'alignement de correspondance  "additional_backgrounds": éléments de tableau.
    Les options d'alignement comprennent  : "bottom", "center", "left", "right", "top", "center bottom", "center center", "center top", "left bottom", "left center", "left top", "right bottom", "right center", and "right top". Si elle n'est pas spécifiée, par défaut "left top".
    Optionnel
  • "additional_backgrounds_tiling": un tableau de valeurs d'énumération la correspondance "additional_backgrounds": l'élément de tableau se répète, avec le support de "no-repeat", "repeat", "repeat-x", et "repeat-y". S'il n'est pas spécifié, 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é 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 prendre le contrôle de l'emplacement de 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
Basic supportYesNo55NoNo

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 : hellosct1
 Dernière mise à jour par : hellosct1,