LanguageExtensions connexes:
Créer vos propres thèmes Chrome
Les thèmes Google Chrome sont des extensions favorites pour ses utilisateurs et vous pouvez en trouver des milliers partout sur internet, la plus grande source étant le Chrome Web Store.
Mais de nombreux utilisateurs curieux aimeraient créer leurs propres thèmes personnels ou même les partager avec leurs amis et le monde extérieur.
Ce petit tutoriel vous montrera la structure interne des thèmes Google et comment vous pouvez créer le vôtre à partir de n'importe quelles images.
Structure des thèmes Chrome
Un thème Chrome n'est rien d'autre qu'une extension qui ne contient pas de code source ou de scripts étendus et consiste essentiellement en deux parties :
- les images utilisées pour le thème lui-même
- un seul fichier manifest.json qui contient les paramètres et réglages pour former le thème
Ces deux parties sont ensuite empaquetées dans un seul fichier avec l'extension de fichier CRX.
Comment préparer manuellement un thème Google
Vous aurez certainement besoin d'un fond d'écran approprié que vous souhaitez utiliser pour votre thème ainsi qu'une idée de base sur votre thème dans son ensemble. Mais vous aurez aussi besoin de plusieurs outils logiciels pour y parvenir :
- Un éditeur d'images. Utilisez n'importe quel programme que vous aimez, il existe de nombreux outils logiciels disponibles pour vous. Même Microsoft Paint basique fera l'affaire, mais bien sûr vous pouvez utiliser des outils professionnels, tels qu'Adobe Photoshop ou CorelDraw.
- Un éditeur de texte. Le Bloc-notes basique fera l'affaire, tout comme tout autre programme similaire.
Une fois que vous avez tout cela, suivez simplement les étapes ci-dessous pour créer votre propre thème Google Chrome.
Étape 1 : Créez un répertoire avec le nom du thème
L'une des premières choses que vous ferez est de créer un nouveau répertoire pour votre thème et de le nommer d'après votre thème. Disons "my_new_theme". À l'intérieur de ce dossier, créez un autre dossier nommé "images", qui contiendra toutes les images utilisées par votre nouveau thème.
Étape 2 : Créez les images pour votre thème
Pour créer un thème fonctionnel, vous aurez besoin de quatre éléments d'image de base, ou cinq, si vous souhaitez ajouter votre propre logo personnel au thème, mais cela est purement optionnel. Toutes les images utilisées dans les thèmes Google Chrome doivent être au format de fichier PNG.
Si vous avez vos images dans un autre format, vous devrez d'abord les convertir en PNG avec n'importe quel logiciel ou outil de conversion en ligne disponible.
Voici la liste de chaque élément d'image avec les exigences appropriées :
Cadre du thème (frame.png)
Cette image est utilisée pour le cadre de votre nouveau thème Google Chrome et comme image de fond des boutons "Fermer", "Réduire" et "Agrandir". Si vous ne souhaitez pas utiliser cette image, alors votre thème Chrome créé agira comme le thème Chrome par défaut et affichera la barre de titre native du système d'exploitation.
L'image cadre du thème nécessite une hauteur minimale de 30px sans limitation de largeur. Cet élément est généralement réalisé avec les couleurs les plus foncées.
Barre d'outils du thème (toolbar.png)
Cet élément de thème est affiché comme fond des boutons "Avancer", "Retour" et "Actualiser" ainsi que comme barre d'outils des extensions. Il représente à la fois l'onglet actuel et la barre d'outils.
Il nécessite une hauteur minimale de 120px sans limitation de largeur.
Arrière-plan de l'onglet du thème (tab.png)
Utilisé pour les onglets inactifs si plusieurs onglets sont ouverts en même temps. Il a une hauteur minimale requise de 65px et aucune limitation de largeur.
Arrière-plan de la nouvelle page d'onglet (background.png)
Cela représentera l'image principale affichée lorsqu'un nouvel onglet est ouvert. La taille d'image minimale recommandée est de 800x600, mais pour un meilleur rendu, utilisez des fonds d'écran correspondant à la résolution d'écran de l'affichage sur lequel le thème sera utilisé. Cette image doit utiliser les couleurs les plus claires pour une meilleure présentation visuelle.
Attribution du thème (theme_ntp_attribution.png)
Le logo du créateur, il est affiché en bas à droite du thème Google Chrome. Il est purement optionnel.
Une fois que vous avez tous les éléments d'image préparés, déplacez-les simplement dans le répertoire "images" que vous avez créé à l'étape 1, ainsi le dossier devrait contenir 4-5 images.
Étape 3 : Créez le fichier manifest
Toute extension Google Chrome pouvant être installée comme application web ou thème possède son propre fichier "manifest.json". Ce fichier fournit au navigateur des informations sur le thème.
Vous pouvez trouver plus d'informations sur le format de fichier JSON dans notre base de données.
Le manifest contient du code pour 4 choses différentes : nom, images, couleurs, teintes et propriétés. Un exemple du code dans le fichier manifest.json est montré ci-dessous.
|
{ "version": "1.0", "name": "my_new_theme", "theme": { "images" : { "theme_frame" : "images/frame.png", "theme_toolbar" : "images/toolbar.png", "theme_ntp_background" : "images/background.png", "theme_tab_background" : "images/tab.png", "theme_ntp_attribution" : "images/theme_ntp_attribution.png" }, "colors" : { "ntp_link": [255,255,255], "ntp_text": [255,255,255], "ntp_section_link": [255,255,255], "ntp_section_text": [10 , 17 , 27], "ntp_background": [10 , 17 , 27], "frame": [10 , 17 , 27], "toolbar": [10 , 17 , 27], "tab_text": [255,255,255], "tab_background_text": [10 , 17 , 27], "bookmark_text": [255,255,255] }, "tints" : { "buttons" : [0.33, 0.5, 0.47], "frame_inactive": [0.50, 0.50, 0.50], "frame_incognito_inactive": [0.50, 0.50, 0.50] }, "properties" : { "ntp_background_alignment" : "bottom", "ntp_background_repeat": "no-repeat" } } } |
Ouvrez simplement un nouveau fichier dans le Bloc-notes, copiez-collez le code et enregistrez-le sous le nom manifest. Ensuite, renommez l'extension du fichier de txt en json.
Maintenant que vous avez créé votre propre fichier manifest.json, examinons ce que chaque section signifie, fait et ce que vous pouvez modifier.
Nom
C'est le nom de votre nouveau thème Google Chrome. Le nom dans le fichier manifest.json doit correspondre au nom de votre thème écrit à l'Étape 1.
Images
Les images de l'Étape 2 de notre guide sont définies dans cette section du fichier manifest.json. Si vous souhaitez changer le nom de fichier ou le dossier de vos images, vous devez également effectuer un changement correspondant dans le fichier manifest.json.
Couleurs
Chaque élément de cette section définit les couleurs utilisées dans le thème. Il y a juste quelques points à retenir concernant les couleurs :
- La couleur du texte du bouton de la barre d'outils de téléchargement est la même que celle du texte des favoris.
- La couleur de fond de la barre d'état est la même que la couleur de la barre d'outils que vous choisissez.
- La couleur du texte de la barre d'état est la même que la couleur du texte de l'onglet que vous choisissez.
Teintes
L'élément teinte spécifie la teinte de couleur pour toutes les icônes à l'intérieur de tous les boutons de la barre d'outils (avancer, retour, actualiser, etc.). Chaque teinte a une valeur flottante de 0 à 1 ou -1. La valeur -1 signifie qu'aucun changement ne sera apporté à la couleur de cet élément. Les valeurs des teintes sont disposées comme [Teinte, Saturation, Luminosité] et vous pouvez utiliser des valeurs comme par exemple 0.256, 0.2, -0.4 pour définir la couleur. Vous pouvez ajuster les valeurs pour que les boutons se fondent ou ressortent.
Propriétés
La section propriétés dans le fichier manifest.json est utilisée pour définir les réglages de l'image de fond principale. L'image de fond peut être alignée en haut, en bas ou au centre du navigateur et vous pouvez choisir de la répéter soit sur l'axe x, soit sur l'axe y, ou pas du tout.
Étape 4 : Emballage et prévisualisation de votre thème
Maintenant vous devriez avoir vos images prêtes dans le répertoire "my_new_theme/images" et un fichier manifest.json dans le répertoire "my_new_theme".
Pour tester votre nouveau thème, ouvrez votre navigateur Google Chrome et tapez "chrome://extensions" dans la barre d'adresse puis appuyez sur la touche Entrée.
Une fois à l'intérieur, cliquez sur le "+" à côté du lien "Mode développeur" sur le côté droit. Vous devriez maintenant voir apparaître plusieurs options sur la page. Cliquez sur "Charger l'extension non empaquetée" et parcourez votre ordinateur jusqu'au répertoire "my_new_theme". Sélectionnez-le et appuyez sur OK. Si un fichier manifest.json correct est présent dans ce dossier, Chrome chargera votre nouveau thème. Vérifiez maintenant votre navigateur pour voir si tout est en ordre.
Vous pouvez répéter ce processus jusqu'à ce que vous perfectionniez votre propre thème Google. Une fois satisfait de votre thème Google Chrome personnalisé, appuyez simplement sur le bouton "Pack extension" et Chrome créera le thème et l'enregistrera dans le répertoire "my_new_theme" avec une extension de fichier CRX. Un fichier avec l'extension PEM sera également créé, qui est une clé privée pour votre thème Google, vous permettant de mettre à jour cette extension à l'avenir, si vous téléchargez votre thème dans la galerie des extensions Chrome.
Si tout se passe bien, Google Chrome vous indiquera que les fichiers .crx et .pem ont été créés et affichera également l'emplacement de ces nouveaux fichiers. Après avoir créé quelques thèmes Google Chrome, vous verrez que ce n'est vraiment pas si difficile.
Comment créer des thèmes Chrome plus facilement
Vous pouvez bien sûr faire les choses plus rapidement si vous utilisez certains des outils dédiés aux thèmes Chrome. L'un de ces outils était, désormais abandonné, le Theme Creator. Vous pouvez encore le télécharger depuis le web store et l'utiliser, mais il n'est plus supporté par Google et il peut y avoir des bugs. Néanmoins, c'est l'un des moyens les plus pratiques pour créer rapidement de nouveaux thèmes Chrome.