Comment créer votre propre thème Google Chrome

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 aucune de ces options n'est tout à fait ce que vous voulez, ou si vous souhaitez personnaliser Chrome pour avoir l'une de vos propres photos en tant que 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 la quantité d'options de personnalisation que vous souhaitez, un site Web appelé ThemeBeta 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 à 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 d'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 n'est tout à fait ce que vous voulez, 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 une palette de couleurs personnalisée, vous ne pouvez choisir qu'une seule couleur, Chrome choisira une deuxième couleur similaire pour compléter le thème avec ce qui lui semble le mieux convenir.

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é, ThemeBeta 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 accéder 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 de fond. 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 petite 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 à l'apparence que vous souhaitez, vous pouvez passer ici aux 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

There are two tabs of advanced configuration options available in the top left, the first is “Images”. Here you can configure a background image for certain elements. When you mouse-over each of the options, it will highlight the element that that setting would modify in the preview in red.

Mouse-over the options to see what portion of the user interface they change.

Tip: NTP stands for “New Tab Page”, options starting with this acronym are only present on the new tab page, others are visible on other pages.

• “NTP Background” configures the main background, if you imported an image earlier this will already be “Loaded”.
• “Frame” configures the user interface excluding the tab list, search bar and bookmarks bar.
• “Toolbar” configures the active tab, the bookmarks bar and the area surrounding the search bar.
• “Tab Background” configures the background colour for non-active tabs.
• “Frame overlay” allows you to configure a second image that overlays the image in “Frame”.
• “NTP Attribution” adds an image to the bottom left corner of the new tab page, generally for watermark purposes.

Tip: If you’ve uploaded an image and don’t like how it looks, you can remove it by clicking the “X” button next to the relevant “Loaded” marker. If uploading an image changed the background colour for that element you can either set it back manually or click “Generate Colors” in the “Basic” tab again to reset the colour scheme.

The second advanced tab is titled “Colors”. Here – as with the options on the previous page that had a box next to them – you can use the box to open a colour picker and pick a solid colour for the respective elements. Once again, if you mouse over the configuration option, it will highlight the affected element in the preview in red.

Click the box to open the colour picker for the respective elements.

• “Toolbar” configures the background colour of the ThemeBeta attribution label in the bottom left of the new tab page.
• “Tab Text” configures the colour of the text in the currently active tab in the tab list. It also sets the colour of the ThemeBeta attribution text in the bottom left corner of the new tab page.
• “Background Tab Text” configures the colour of the text in the inactive tabs in the tab list.
• “Bookmark Text” configures the colour of the text of items in the bookmarks bar.
• “NTP Text” configures the colour of the text or the recommended/regular page links in the centre of the page.
• “NTP Link” doesn’t have any effect.
• “Control Buttons” configures the colour of the minimise, maximise and close buttons in the top right corner.
• “Buttons” configures the colour of the forwards, backwards, reload and home buttons.

Once you’ve configured all of the advanced options the way you want them, you’re ready to proceed to the installation process.

Installation of a third-party theme

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 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, pas 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.