Que sont les thèmes ?

Un thème est un type d'extension spécial qui modifie l'apparence du navigateur. Les thèmes sont empaquetés comme les extensions standards, mais ils ne contiennent pas de code JavaScript ni HTML.

Les thèmes sont importés sur le Chrome Web Store en suivant la même procédure que pour une extension. Lors de l'importation, vous êtes invité à sélectionner une catégorie. Vous trouverez une liste des catégories de thèmes dans la documentation du Chrome Web Store, sous "Bonnes pratiques".

Vous pouvez trouver et essayer de nombreux thèmes sur le Chrome Web Store.

thème de plantes vertes

J'aime le thème de fumée

thème jus d'orange

Fichier manifeste

Voici un exemple de fichier manifest.json pour un thème:

{
  "manifest_version": 3,
  "version": "2.6",
  "name": "camo theme",
  "theme": {
    "images" : {
      "theme_frame" : "images/theme_frame_camo.png",
      "theme_frame_overlay" : "images/theme_frame_stripe.png",
      "theme_toolbar" : "images/theme_toolbar_camo.png",
      "theme_ntp_background" : "images/theme_ntp_background_norepeat.png",
      "theme_ntp_attribution" : "images/attribution.png"
    },
    "colors" : {
      "frame" : [71, 105, 91],
      "toolbar" : [207, 221, 192],
      "ntp_text" : [20, 40, 0],
      "ntp_link" : [36, 70, 0],
      "ntp_section" : [207, 221, 192],
      "button_background" : [255, 255, 255]
    },
    "tints" : {
      "buttons" : [0.33, 0.5, 0.47]
    },
    "properties" : {
      "ntp_background_alignment" : "bottom"
    }
  }
}

colors

Les couleurs sont au format RVB. Pour trouver les chaînes que vous pouvez utiliser dans le champ "couleurs", consultez kOverwritableColorTable.

images

Les ressources d'image utilisent des chemins relatifs à la racine de l'extension. Vous pouvez remplacer n'importe quelle image spécifiée par les chaînes dans kPersistingImages. Toutes les images doivent être stockées au format PNG, sinon elles ne s'afficheront pas correctement.

du bucket

Ce champ vous permet de spécifier des propriétés telles que l'alignement de l'arrière-plan, la répétition de l'arrière-plan et un logo de remplacement. Pour afficher les propriétés et les valeurs qu'elles peuvent avoir, consultez kDisplayProperties.

teintes

Vous pouvez spécifier des teintes à appliquer à des parties de l'UI, telles que les boutons, le cadre et l'onglet d'arrière-plan. Google Chrome accepte les teintes, mais pas les images, car les images ne fonctionnent pas sur toutes les plates-formes et sont fragiles en cas d'ajout de nouveaux boutons. Pour trouver les chaînes que vous pouvez utiliser dans le champ "tints", consultez kTintTable.

Les teintes sont au format TSL (teinte, saturation, luminosité), à l'aide de nombres à virgule flottante compris entre 0 et 1,0:

  • La teinte est une valeur absolue, où 0 et 1 correspondent au rouge.
  • La saturation est relative à l'image actuellement fournie. 0, 5 correspond à aucune modification, 0 à une désaturation totale et 1 à une saturation complète.
  • La luminosité est également relative.La valeur 0,5 correspond à aucun changement, 0 à tous les pixels noirs et 1 à tous les pixels blancs.

Vous pouvez également utiliser -1.0 pour n'importe quelle valeur HSL afin de spécifier aucune modification.