Comment créer votre propre thème Google Chrome

click fraud protection

Avez-vous déjà voulu personnaliser l'apparence de votre navigateur Web? Les thèmes pour Google Chrome peuvent être utilisés pour faire exactement cela. Le Chrome Theme Store peut avoir une vaste gamme d'options, des thèmes spatiaux aux voitures et aux beaux paysages, mais que se passe-t-il si aucun des ces options sont tout à fait ce que vous voulez, ou si vous souhaitez personnaliser Chrome pour avoir l'une de vos propres photos comme arrière-plan à la place? Eh bien, heureusement, vous pouvez le faire.

Il existe deux méthodes pour créer votre propre thème. Chrome possède une fonction intégrée simple qui vous permet d'importer une image d'arrière-plan pour la nouvelle page à onglet et de personnaliser le schéma de couleurs de l'interface utilisateur à partir d'un certain nombre de préréglages. Si la fonctionnalité Chrome intégrée n'a pas le nombre d'options de personnalisation que vous souhaitez, un site Web appelé ThèmeBêta vous a couvert, avec un créateur de thème Chrome riche en fonctionnalités, mais facile à utiliser, (bien que le processus d'installation soit un peu plus complexe). Dans cet article, nous vous expliquerons le processus de création de votre propre thème Chrome avec les deux outils.

L'outil Chrome intégré simple

Pour utiliser l'éditeur de thème Chrome intégré, ouvrez un nouvel onglet. Dans le coin inférieur droit de la nouvelle page d'onglet se trouve une icône de crayon, cliquez dessus pour personnaliser l'apparence de votre Chrome.

Cliquez sur l'icône en forme de crayon pour ouvrir l'éditeur de thème.

Dans la fenêtre contextuelle qui apparaît une fois que vous avez cliqué sur l'icône en forme de crayon, votre première option consiste à configurer l'image d'arrière-plan. Ici, vous pouvez choisir entre un nombre très limité d'options prédéfinies, ou vous pouvez télécharger votre propre image. Cette image d'arrière-plan ne s'appliquera qu'à la nouvelle page à onglet, elle ne deviendra pas l'arrière-plan des sites Web réels.

Sélectionnez une image d'arrière-plan pour la nouvelle page à onglet.

Une fois que vous avez sélectionné une image d'arrière-plan, accédez à l'onglet "Couleur et thème". Ici, vous pouvez choisir parmi une sélection de combinaisons de couleurs. Ces options de couleur affectent les couleurs de l'onglet et des barres de recherche et de favoris qui forment l'interface utilisateur de Chrome. En d'autres termes, sur la plupart des sites que vous visitez, ces couleurs seront plus visibles que votre image d'arrière-plan simplement parce que la barre supérieure du navigateur sera toujours de cette couleur !

Sélectionnez un schéma de couleurs prédéfini.

Si aucun des schémas de couleurs prédéfinis ne correspond tout à fait à ce que vous souhaitez, l'option de couleur en haut à gauche vous permet de choisir votre propre schéma de couleurs, avec un éventail complet d'options de couleurs parmi lesquelles choisir. Pour sélectionner une couleur, cliquez d'abord sur le symbole en haut à gauche, puis utilisez la fenêtre contextuelle qui apparaît pour choisir votre couleur. Ajustez le réticule dans le spectre de couleurs pour obtenir votre teinte et la flèche noire à droite de la fenêtre pour choisir la luminosité du ton. Si vous ne savez pas comment cela fonctionne, plus vous déplacez la flèche noire vers le haut ou vers le bas, plus votre couleur devient claire ou foncée. Pour des nuances plus intenses, placez le réticule près du haut et la flèche au milieu. Pour des couleurs plus pâles, déplacez le réticule un peu plus bas et la flèche vers le haut.

Une fois que vous avez sélectionné la couleur souhaitée, cliquez sur « Ajouter aux couleurs personnalisées » en bas à droite. Ensuite, sélectionnez votre couleur personnalisée dans la liste « Couleurs personnalisées » en bas à gauche, puis cliquez sur « OK » pour appliquer. Si vous choisissez un schéma de couleurs personnalisé, vous ne pouvez choisir qu'une seule couleur, Chrome choisira une deuxième couleur similaire pour compléter le thème avec ce qu'il pense conviendra le mieux.

Astuce: Chrome suppose presque toujours que la couleur que vous avez choisie est la plus foncée des deux couleurs de thème et choisira une deuxième teinte plus claire. Choisissez en conséquence !

Sélectionnez un schéma de couleurs personnalisé.

Une fois que vous êtes satisfait de votre image d'arrière-plan et de votre jeu de couleurs, cliquez sur « Terminé » pour enregistrer votre thème personnalisé, et vous êtes prêt à partir !

Thèmes tiers simplifiés

Si vous voulez un thème simple, l'outil intégré de Chrome devrait suffire, mais si vous voulez plus d'individualité, ThèmeBêta offre plus de contrôle. Le site Web vous permet de modifier manuellement les couleurs des onglets de premier plan et d'arrière-plan, le texte des barres d'onglets, etc.

Tout d'abord, vous devez naviguer sur le site Web de ThemeBeta. Vous pouvez parcourir les thèmes soumis par les utilisateurs sur leur page d'accueil, ou vous pouvez aller directement à leur page de créateur de thème pour commencer avec le vôtre. La première étape une fois que vous êtes dans le créateur de thème est de choisir une image d'arrière-plan. Cliquez sur « 1. Télécharger une image », puis téléchargez une image à partir de votre disque dur. Cette image sera la base de votre thème et sera l'image de fond sur la page du nouvel onglet.

Astuce: toute image que vous téléchargez doit être au format de fichier PNG ou JPG, car ce sont les seuls formats pris en charge. Utilisez un convertisseur en ligne si votre image est différente.

Si l'image que vous avez téléchargée ne semble pas tout à fait correcte, il se peut qu'elle soit trop agrandie ou qu'elle ait des barres sur les côtés ou en haut - alors vous devriez essayer de changer les options "Image d'arrière-plan". Respectivement, ils configurent l'alignement horizontal, l'alignement vertical, si l'image se répète si elle est trop petit pour l'écran, la façon dont l'image est mise à l'échelle pour s'adapter à l'écran et un réglage manuel de la mise à l'échelle. Testez les options jusqu'à ce que vous trouviez quelque chose qui vous satisfasse !

Configurez le positionnement de votre image de fond.

Une fois votre image téléchargée, l'aperçu sur le côté droit de la page sera mis à jour pour représenter à quoi ressemblera votre thème. La deuxième étape consiste à cliquer sur « 2. Générer des couleurs", ce bouton utilisera les couleurs présentes dans l'image que vous avez téléchargée, pour créer une palette de couleurs similaires à utiliser sur le reste de l'interface utilisateur.

Si le schéma de couleurs généré automatiquement correspond au look que vous souhaitez, vous pouvez passer ici à la instructions d'installation. Mais si vous souhaitez configurer manuellement les couleurs d'éléments tels que les onglets de premier plan, les onglets d'arrière-plan et la barre d'outils, les détails sont traités dans la section de configuration avancée ci-dessous.

Configuration avancée

Il y a deux onglets d'options de configuration avancées disponibles en haut à gauche, le premier est « Images ». Ici, vous pouvez configurer une image de fond pour certains éléments. Lorsque vous passez la souris sur chacune des options, il mettra en évidence l'élément que ce paramètre modifierait dans l'aperçu en rouge.

Passez la souris sur les options pour voir quelle partie de l'interface utilisateur elles changent.

Astuce: NTP signifie « New Tab Page », les options commençant par cet acronyme ne sont présentes que sur la nouvelle page d'onglet, d'autres sont visibles sur d'autres pages.

  • "NTP Background" configure l'arrière-plan principal, si vous avez importé une image plus tôt, elle sera déjà "Chargée".
  • « Frame » configure l'interface utilisateur à l'exclusion de la liste des onglets, de la barre de recherche et de la barre de favoris.
  • « Barre d'outils » configure l'onglet actif, la barre de favoris et la zone entourant la barre de recherche.
  • « Arrière-plan des onglets » configure la couleur d'arrière-plan des onglets non actifs.
  • « Superposition de cadre » vous permet de configurer une deuxième image qui se superpose à l'image dans « Frame ».
  • « Attribution NTP » ajoute une image dans le coin inférieur gauche de la nouvelle page à onglet, généralement à des fins de filigrane.

Astuce: Si vous avez téléchargé une image et que vous n'aimez pas son apparence, vous pouvez la supprimer en cliquant sur le bouton « X » à côté du marqueur « Chargé » correspondant. Si le téléchargement d'une image a modifié la couleur d'arrière-plan de cet élément, vous pouvez soit la rétablir manuellement, soit cliquer à nouveau sur « Générer des couleurs » dans l'onglet « Basique » pour réinitialiser le schéma de couleurs.

Le deuxième onglet avancé s'intitule « Couleurs ». Ici, comme pour les options de la page précédente qui avaient une case à côté d'elles, vous pouvez utiliser la case pour ouvrir un sélecteur de couleurs et choisir une couleur unie pour les éléments respectifs. Encore une fois, si vous passez la souris sur l'option de configuration, l'élément affecté sera mis en évidence dans l'aperçu en rouge.

Cliquez sur la case pour ouvrir le sélecteur de couleurs pour les éléments respectifs.
  • « Barre d'outils » configure la couleur d'arrière-plan de l'étiquette d'attribution ThemeBeta en bas à gauche de la page du nouvel onglet.
  • « Tab Text » configure la couleur du texte dans l'onglet actuellement actif dans la liste des onglets. Il définit également la couleur du texte d'attribution ThemeBeta dans le coin inférieur gauche de la page du nouvel onglet.
  • « Texte de l'onglet d'arrière-plan » configure la couleur du texte dans les onglets inactifs de la liste des onglets.
  • « Texte des signets » configure la couleur du texte des éléments dans la barre des signets.
  • "NTP Text" configure la couleur du texte ou les liens de page recommandés/réguliers au centre de la page.
  • "NTP Link" n'a aucun effet.
  • Les « boutons de contrôle » configurent la couleur des boutons de réduction, d'agrandissement et de fermeture dans le coin supérieur droit.
  • Les « boutons » configurent la couleur des boutons avant, arrière, recharge et home.

Une fois que vous avez configuré toutes les options avancées comme vous le souhaitez, vous êtes prêt à procéder au processus d'installation.

Installation d'un thème tiers

Pour des raisons de sécurité, Google autorise désormais uniquement l'installation d'extensions et de thèmes via la boutique en ligne Chrome. Pour installer votre thème personnalisé, vous devrez activer une fonctionnalité de développeur. Malheureusement, ce changement signifie que le simple bouton « Pack and Install » sur l'onglet « Basic » et l'onglet « Pack » ne fonctionne plus. Si vous essayez la méthode "Pack and Install", vous obtiendrez un message d'erreur.

Les fichiers CRX tiers ne peuvent pas être installés dans Chrome.

Pour contourner ce problème, allez dans l'onglet "Pack" et cliquez sur "Pack and Download Zip file"

Cliquez sur le bouton "Pack et Télécharger le fichier Zip" dans l'onglet "Pack".

Une fois le fichier zip téléchargé, extrayez les fichiers et enregistrez-les sur votre disque dur. Double-cliquez sur le fichier que vous avez téléchargé et sélectionnez Extraire en haut de votre visionneuse de fichiers. Vous devrez sélectionner où extraire vos fichiers. Rappelez-vous où vous les enregistrez afin de pouvoir les télécharger à nouveau plus facilement.

Astuce: si vous renommez le dossier pour indiquer quel est le thème, il sera peut-être plus facile de le retrouver à l'avenir, si jamais vous souhaitez le réutiliser.

Extrayez les fichiers du fichier ZIP et enregistrez-les sur votre disque dur.

L'étape suivante est la page des extensions Chrome. Vous pouvez y accéder en cliquant sur les trois points dans le coin supérieur droit, sous « Plus d'outils », puis « Extensions », ou vous pouvez cliquer sur ici.

Cliquez sur les trois points puis sur Plus d'outils > Extensions.

Une fois que vous êtes dans le menu des extensions, dans le coin supérieur droit de la page, il y a un curseur marqué "Mode développeur". Activez-le. Une fois le mode développeur activé, trois boutons devraient apparaître dans le coin supérieur gauche. Celui dont vous avez besoin est "Charger déballé". Cliquez sur "Charger décompressé" et importez le dossier que vous avez extrait du fichier zip plus tôt.

Activez le mode développeur, puis cliquez sur « Charger décompressé ».

Astuce: vous souhaitez importer le dossier parent, et non le dossier « images » qu'il contient. Si vous ne l'avez pas renommé plus tôt, il sera nommé quelque chose comme "theme1234567890"

Une fois le thème importé, une alerte apparaîtra dans l'onglet en cours, confirmant que le thème a été installé et proposant un bouton d'annulation. Avant de fermer cette alerte, ouvrez un nouvel onglet et assurez-vous que tout ressemble à ce que vous vouliez.

Ne cachez pas l'alerte de confirmation tant que vous n'êtes pas sûr d'être satisfait du résultat !

Si votre thème ne s'est pas déroulé comme vous l'espériez, cliquez sur "Annuler" et essayez à nouveau de modifier votre modèle. Une fois que vous êtes satisfait des résultats, n'hésitez pas à fermer la page "Extensions" et continuez à naviguer avec votre nouveau thème Chrome personnalisé brillant.