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": 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": alias de "accentcolor" pour la compatibilité avec Chrome
  • "textcolor": la couleur du texte affiché dans la zone d'en-tête.
  • "tab_text": 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": alias de "textcolor", pour la compatibilité avec Chrome
  • "toolbar": 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": la couleur du texte de la barre de navigation, de la  barre de favoris et de l'onglet sélectionné
  • "bookmark_text": 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": la couleur de l'arrière-plan des champs dans la barre d'outils (barre d'addresse ou barre de recherche)
  • "toolbar_field_text": la couleur du texte des champs dans la barre d'outils (barre d'addresse ou barre de recherche)
  • "toolbar_top_separator": la couleur de la ligne séparant la barre des onglets et la barre de navigation
  • "toolbar_bottom_separator": la couleur de la ligne séparant la barre de navigation avec le contenu web
  • "toolbar_vertical_separator": la couleur des séparateurs verticaux dans les barre d'outils

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

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:

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