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.

Un objet JSON dont les propriétés représentent les images à afficher dans différentes parties du navigateur. Voir les images pour plus de détails sur les propriétés que cet objet peut contenir.

colors Objet

Obligatoire.

Un objet JSON dont les propriétés représentent les couleurs de différentes parties du navigateur. Voir colors pour plus de détails sur les propriétés que cet objet peut contenir.

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".
    Facultatif
  • "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".
    Facultatif

images

Toutes les URL sont relatives au fichier manifest.json et ne peuvent pas référencer une URL externe.

Les images doivent avoir une hauteur de 200 pixels pour garantir qu'elles remplissent toujours l'espace d'en-tête verticalement.

Name Type Description
headerURL String

Obligatoire.

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.

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": Optionel.
theme_frame String

Optionel.

Alias de headerURL, fourni pour la compatibilité Chrome.

additional_backgrounds Array de String

Optionel.

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 superposent la première image du tableau en haut, la dernière image du 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 alignement et leur comportement répété peuvent être contrôlés par les propriétés des "properties":.

couleurs

Toutes ces propriétés peuvent être spécifiées sous la forme d'une chaîne contenant un code de couleur CSS, ou un tableau RVB tel que "tab_text": [ 107 , 99 , 23 ], ou en héxadécimal, tel que "tab_text": #6b6317. Mais vérifiez la  table de compatibilié, car ce n'est pas le cas pour les navigateurs ou toutes les versions du navigateur.

 

Ils sont tous facultatifs sauf "accentcolor" et "textcolor".

Voir l'example de capture écran

ci-dessous pour comprendre les parties de l'interface utilisateur du navigateur qui sont affectées par ces propriétés.

 

Name Type Description
accentcolor String 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".
frame Array of Integer Un alias de "accentcolor" pour la compatibilité avec Chrome
textcolor String La couleur du texte affiché dans la zone d'en-tête.
tab_text Array of Integer

A partir de Firefox 59, la couleur du texte l'onglet sélectionné. De Firefox 55 à 58, un alias de "textcolor" pour la  compatibilité avec Chrome.

background_tab_text String La même chose que "textcolor", pour la compatibilité avec Chrome
toolbar String La couleur de l'arrière-plan de la barre de navigation, de la  barre de favoris et de l'onglet sélectionné
toolbar_text String La couleur du texte de la barre de navigation, de la  barre de favoris et de l'onglet sélectionné
bookmark_text String

alias de "toolbar_text", pour la compatibilité avec Chrome.

Si cette propriété est specifiée avec "toolbar_text", "toolbar_text" sera choisi.

toolbar_field String la couleur de l'arrière-plan des champs dans la barre d'outils (barre d'addresse ou barre de recherche)
toolbar_field_text String la couleur du texte des champs dans la barre d'outils (barre d'addresse ou barre de recherche)
toolbar_top_separator String la couleur de la ligne séparant la barre des onglets et la barre de navigation
toolbar_bottom_separator String la couleur de la ligne séparant la barre de navigation avec le contenu web
toolbar_vertical_separator String la couleur des séparateurs verticaux dans les barre d'outils

properties

Name Type Description
additional_backgrounds_alignment

Array of String

Opionel.

Un tableau de valeurs d'énumération définissant l'alignement de l'élément "additional_backgrounds": élément 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"
  • "right top".

Si non spécifié, par default "left top".

additional_backgrounds_tiling

Array of String

Optional.

Un tableau de valeurs d'énumérations définissant, comme l'élément de tableau  "additional_backgrounds": correspondant de répétition. Les options comprennent :

  • "no-repeat"
  • "repeat"
  • "repeat-x"
  • "repeat-y"

Si non spécifié, par default "no-repeat".

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"
   }
 }

Cet exemple utilise toutes les propriétés pour "theme.colors":

  "theme": {
    "images": {
      "headerURL": "weta.png"
    },
      
    "colors": {
       "accentcolor": "darkgreen",
       "textcolor": "white",
       "toolbar": "blue",
       "toolbar_text": "cyan",
       "toolbar_field": "orange",
       "toolbar_field_text": "green",
       "toolbar_top_separator": "red",
       "toolbar_bottom_separator": "white",
       "toolbar_vertical_separator": "white"
    }
  }

Cela donne la capture d'écran suivante:

Dans cette capture d'écran,, "toolbar_vertical_separator" est la ligne verticale blanche dans la barre d'URL divisant l'icône du mode Lecteur des autres icônes.

Compatibilité du navigateur

ChromeEdgeFirefoxFirefox for AndroidOpera
Support simple Oui Non55 Non Non

Compatibilité de Chrome

Propriété Firefox Propriété Chrome
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/textcolor

Incorrectement implementé sous le nom de colors/tab_text de Firefox 55 à 58. Corrigé sous le nom de colors/background_tab_text à partir de Firefox 59.

colors/toolbar_text colors/bookmark_text
properties/additional_backgrounds_alignment Non supporté
properties/additional_backgrounds_tiling Non supporté

Dans Chrome, toutes les couleurs doivent être spécifiées sous forme de liste de valeurs RGB, comme ceci:

"theme": {
  "colors": {
     "frame": [255, 0, 0],
     "background_tab_text": [0, 255, 0],
     "bookmark_text": [0, 0, 255]
  }
}

 A partir de Firefox 59, les formes de liste RGB et de couleurs CSS sont acceptées pour toutes les propriétés. Avant cela, colors/frame et colors/tab_text devaient être spécifiées sous forme de liste RGB, tandis que les autres propriétés devaient être spécifiées sous forme de couleurs CSS.

Étiquettes et contributeurs liés au document

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