Le moment vient et vous en avez assez de l'habituel, vous voulez ajouter du piquant au navigateur le plus populaire et une telle « fonctionnalité unique » dans Chrome peut être un « thème », et non téléchargé depuis la boutique en ligne officielle, mais votre propre, contrairement à quiconque.

Comme vous l'avez peut-être déjà compris, nous aborderons aujourd'hui la question de la création de vos propres thèmes pour le navigateur Google Chrome.

Pour créer, nous avons besoin de :

1. L'éditeur graphique le plus simple (même Paint fera l'affaire) ;
2. Nos instructions détaillées ;
3. Un peu d'envie.

Et je n'essaie pas de vous tromper, les thèmes les plus sympas pour le navigateur Chrome sont créés en quelques minutes, mais passons des paroles à l'action.

Il existe deux manières de créer un thème pour Google Chrome :

1. Écrire à partir de zéro (en créant un document texte et plusieurs images) ;
2. Utilisez un service en ligne spécialisé.

Pendant que vous décidez quelle méthode utiliser, je commencerai par la plus « difficile ».

Créer un thème pour Google Chrome à partir de zéro

Les thèmes, ainsi que les extensions pour les navigateurs basés sur le moteur Chrome, sont basés sur le fichier manifeste.json.

Manifest.json est un document texte qui stocke les paramètres des thèmes et des extensions, ainsi qu'un titre, une description et d'autres informations sur le service.

Créons un nouveau dossier sur le bureau avec le nom de notre futur sujet, pour moi il s'appellera « Ne le faites pas ! », et à l'intérieur nous créerons un document texte - manifeste.json, où manifest est le nom du document et json son . De plus, créez un dossier vide appelé « images » qui contiendra tous les éléments graphiques de notre thème.

La prochaine étape dans la création d'un thème consistera à préparer les images.

Vous pouvez utiliser des images prêtes à l'emploi téléchargées sur Internet ou créer les vôtres ; je créerai des images complètement uniques pour le téléchargement ultérieur du thème sur la boutique en ligne Chrome.

Nous aurons besoin d'images des tailles suivantes :

1. 1920x1080px (format HD) – à utiliser comme arrière-plan principal dans le navigateur.

2. 30x256px – cette image sera utilisée comme décoration de fenêtre Chrome.

3. 1100x40px – cette image fera office d'écran de démarrage dans le coin supérieur gauche du navigateur (je ne sais pas pourquoi vous devriez utiliser une image supplémentaire à cet endroit séparément - vous pouvez l'utiliser pour une « personnalisation » supplémentaire du thème ).

4. 30x200px – il servira de remplissage pour les onglets ouverts inactifs du navigateur.

5. 30x256px – cette image sera utilisée pour remplir l’onglet ouvert actif et la barre de favoris Chrome.

Portez une attention particulière aux images, en particulier à leurs tailles ; si vous ne savez pas comment faire une image exactement de cette taille et de cette forme, étudiez l’une des nôtres.

Eh bien, si vous avez déjà tout prêt, allez-y et créez un fichier manifeste.json.

Vous pouvez télécharger le fichier complété que j'ai préparé comme exemple - ou le composer vous-même selon les instructions ci-dessous.

Le document dans lequel sera décrit le code de notre thème commence par une accolade « ( », vous devez ensuite remplir les champs :

( "name": "Ne le faites pas!", // champ indiquant le nom du thème; "version": "1", // numéro de version de votre thème (plus tard, lors de modifications des thèmes, vous aurez besoin pour mettre à jour la version); " description": "Peut-on encore y réfléchir à deux fois?", // brève description du sujet; "manifest_version": 2, // version du manifeste (il existe deux versions du "manifeste" - 1 et 2, version 1 - pour les navigateurs Chrome inférieurs à la version 18, 2 pour les navigateurs version 18 et supérieures, inclus).

"theme":( "images":( "theme_frame": "images/theme_frame.jpeg", // image utilisée dans la conception de la fenêtre du navigateur; "theme_toolbar": "images/theme_toolbar.jpeg", // image utilisée comme remplissage onglet ouvert actif ; "theme_tab_background": "images/theme_tab_background.jpeg", // remplissage des onglets ouverts inactifs; "theme_ntp_background": "images/theme_ntp_background.jpeg", // l'arrière-plan principal de notre thème; "theme_frame_overlay": "images /theme_frame_overlay .jpeg"), // remplit le coin supérieur gauche.

"thème" :( "images" : ( "theme_frame" : "images/theme_frame.jpeg" , // image utilisée dans la conception de la fenêtre du navigateur ; "theme_toolbar" : "images/theme_toolbar.jpeg" , // image utilisée comme remplissage pour l'onglet ouvert actif ; "theme_tab_background" : "images/theme_tab_background.jpeg", // remplit les onglets ouverts inactifs ; "theme_ntp_background" : "images/theme_ntp_background.jpeg", // le fond principal de notre thème ; "theme_frame_overlay" : "images/theme_frame_overlay.jpeg"} , // remplit le coin supérieur gauche.

Le code sur cette page utilise le symbole « // », il faut « commenter » le code. Directement dans le fichier manifeste.json– il peut être supprimé.

Après avoir spécifié les chemins d'accès aux images, vous devez spécifier les couleurs des polices et des éléments d'interface. DANS manifeste.json Les couleurs RVB sont utilisées - vous pouvez obtenir leurs codes dans n'importe quel convertisseur en ligne.

"colors":( "frame":, // Remplit l'espace vide de l'arrière-plan principal avec la couleur spécifiée ; "toolbar":, // Remplit la zone dans le coin inférieur gauche, où "l'url" du site est affichée ; "tab_text":, // Police de couleur de l'onglet ouvert actif; "tab_background_text":, // Couleur de police de l'onglet ouvert inactif; "bookmark_text":, // Couleur de police des signets sur le panneau du navigateur; "ntp_background": , // Couleur de remplissage du fond sous les icônes "application" du navigateur ; "ntp_text":, // Couleur de la police des noms d'applications; "button_background":), // Couleur des champs "Fermer", "Réduire", "Complet" Boutons "Écran" dans le coin supérieur droit.

"couleurs" :( "cadre" : [ 0 , 0 , 0 ] , // Remplit l'espace vide de l'arrière-plan principal avec la couleur spécifiée ; "barre d'outils" : [ 0 , 0 , 0 ] , // Remplit la zone dans le coin inférieur gauche, où « l'url » du site est affichée ; "tab_text" : [ 255 , 255 , 255 ] , // Couleur de police de l'onglet ouvert actif ; "tab_background_text" : [ 167 , 167 , 167 ] , // Couleur de police d'un onglet ouvert inactif ; "bookmark_text" : [ 167 , 167 , 167 ] , // Couleur de police des signets sur le panneau du navigateur ; "ntp_background" : [ 0 , 0 , 0 ] , // Couleur de remplissage d'arrière-plan sous les icônes « application » dans le navigateur ; "ntp_text" : [ 167 , 167 , 167 ] , // Couleur de police des noms d'applications ; "bouton_fond" : [ 255 , 255 , 255 ] ), // Couleur des boutons « Fermer », « Réduire », « Plein écran » dans le coin supérieur droit.

Il ne reste plus qu'à définir le positionnement de l'image d'arrière-plan principale et quelques paramètres supplémentaires.

"tints":( "buttons": // Préciser les nuances des couleurs utilisées (laisser les valeurs précisées ici);), "properties":( "ntp_background_alignment": "bottom", // Préciser par rapport à quel bord de la fenêtre sera située l'image principale (bas – bas, haut – haut) ; « ntp_background_repeat » : « no-repeat » // Nous indiquons s'il est nécessaire de « remplir » tout l'espace de la fenêtre du navigateur avec notre image , si sa taille est plus grande que notre image principale. ) )

Avez-vous parcouru toutes les étapes avec moi ? Génial, vous pouvez fermer le fichier manifeste, l'enregistrer et commencer à tester le thème résultant en chargeant d'abord les images précédemment créées dans le dossier « images ».

Tester le thème pour Chrome

Les tests semblent trop bruyants, en fait, nous devons vérifier si nous avons commis des erreurs dans notre travail.

Vous avez déjà un thème installé dans votre navigateur et avez besoin de le modifier un peu ? Aucun problème! Les fichiers des thèmes déjà installés dans Chrome sont stockés dans C:\Users\User_Name\AppData\Local\Google\Chrome\User Data\Profile 1\Extensions

Ouvrez votre navigateur et accédez à Paramètres, onglet Extensions et cliquez sur Charger l'extension décompressée. Assurez-vous de vérifier que « Mode développeur » est coché.

Dans la fenêtre qui apparaît, sélectionnez le dossier avec votre thème pour Chrome et cliquez sur « Ok » - dans mon cas, il s'agit du dossier « Ne le faites pas ! »

Toutes nos félicitations! Le thème du navigateur aurait dû changer pour le vôtre, sinon, revenez au code ci-dessus et recherchez les erreurs dans vos fichiers et les résolutions d'images, ou téléchargez l'archive avec mes fichiers à partir du lien - et comparez avec le vôtre.

Vous pouvez désormais profiter de votre propre thème pour Google Chrome, mais dans chaque baril de miel il y a une cuillerée de vous savez quoi.

Chaque fois que vous ouvrez votre navigateur, une fenêtre apparaîtra dans le coin supérieur droit vous informant que l'une des extensions ou thèmes installés n'a pas été téléchargé depuis la boutique officielle. Il n'y a qu'un seul moyen d'éviter cela : téléchargez votre thème sur la boutique en ligne officielle Chrome et installez-le dans le navigateur à partir de là.

Comment télécharger un thème sur le Chrome Store

Si vous décidez de vous séparer de votre argent durement gagné, procédez à une simple inscription dans la boutique en ligne à l'adresse https://chrome.google.com/webstore/category/extensions.

Après avoir créé un thème magnifique et unique, vous pouvez rendre l'installation payante pour les utilisateurs - de cette façon, vous recevrez un petit revenu passif.

Après avoir enregistré et payé un compte développeur, vous aurez la possibilité de télécharger vos propres extensions et thèmes dans la boutique avec des restrictions mineures - pas plus de 20 extensions par compte, le nombre de thèmes est illimité.

Tout d'abord, regroupez les fichiers de thème et téléchargez-les sur le Chrome Store, comme indiqué dans la capture d'écran.

Si aucune erreur ne s'est produite, les informations sur votre thème apparaîtront sur la page principale du panneau de développement avec un lien vers la page des paramètres, où vous pourrez modifier la description, ajouter une icône et publier le thème.

Je ne décrirai pas tous les champs disponibles à remplir - ils sont donc bien commentés - si vous rencontrez des problèmes, écrivez un commentaire sous le post et j'essaierai de vous aider.

Création d'un thème pour Chrome à l'aide d'un service en ligne

Dans la première partie de l'article, j'ai décrit une méthode « compliquée » de création de thèmes pour le navigateur Google Chrome, passons maintenant à une méthode plus simple qui ne nécessite pas de fouiller dans le code et de créer de nombreuses images supplémentaires. Tout ce dont vous avez besoin est d'aller sur le site Web - www.themebeta.com/chrome-theme-creator-online.html avec un grand arrière-plan pré-préparé.

Les navigateurs basés sur Chromium ne prennent pas en charge les thèmes animés, contrairement à Opera.

Une fois sur le service, qui n'a d'ailleurs aucun lien officiel avec la société Google, vous verrez une zone de travail où se trouvent à gauche des outils avec des commentaires (en anglais), une fenêtre visualisée du navigateur Chrome à droite. , dans lequel toutes les modifications apportées seront affichées, et En bas se trouvent des boutons pour positionner votre image par rapport à la fenêtre du navigateur.

Entrez un nom de thème et téléchargez une image d'arrière-plan. Immédiatement - effectuez les paramètres de positionnement ou laissez-les par défaut.

Sur l'onglet « couleurs », vous pouvez définir les couleurs des polices utilisées à différents endroits du navigateur. Passez votre curseur sur l'une des options proposées sur la gauche et l'emplacement du changement sera surligné en rouge dans la fenêtre visualisée. Il ne vous reste plus qu'à travailler avec la palette de couleurs pour choisir celles dont vous avez besoin.

Sans télécharger la plupart des images supplémentaires évoquées ci-dessus, la fenêtre de votre navigateur reflétera le jeu de couleurs par défaut de Windows, c'est-à-dire Pour une « personnalisation » complète du thème, vous devez télécharger toutes les images proposées dans l’onglet « images », selon les tailles indiquées dans la première partie de l’article.

En vous rendant dans l’onglet « Pack », vous aurez le choix entre trois actions :

1. Installez le thème obtenu dans le navigateur (rappelez-vous l'inconvénient de la fenêtre lors de l'ouverture du navigateur).
2. Emballer le thème dans un format de fichier crx et téléchargez-le sur votre ordinateur (ce fichier est le fichier d'installation des thèmes et extensions dans le navigateur Chrome).
3. Téléchargez le « code source » du thème dans une archive zip (vous pouvez immédiatement télécharger le thème terminé sur la boutique en ligne).

Je note que lors de l'utilisation de ce service, votre thème sera placé dans le répertoire et sera disponible pour téléchargement et installation par d'autres utilisateurs.

Si vous êtes intéressé, dans les articles suivants, je décrirai le processus de création de thèmes animés pour le navigateur Opera.

Pour ce faire, vous aurez besoin d'un créateur de thème Web spécial, d'un peu d'inspiration et de quelques minutes de temps libre. Mais si vous souffrez de perfectionnisme, vous pouvez y passer plusieurs heures. Nous vous avons prévenu. :)

Alors, ouvrez l’application Web. Vous verrez des onglets avec des outils pour créer des thèmes sur le côté gauche de la fenêtre et une zone d'aperçu sur la droite.

Ce constructeur permet de créer des thèmes en mode semi-automatique. Mais vous pouvez également tout personnaliser manuellement pour que le résultat soit parfaitement à votre goût.

1. Un moyen simple

Le fait est le suivant : vous téléchargez n'importe quelle image que vous aimez dans le constructeur, et ThemeBeta l'utilise comme arrière-plan principal pour le nouveau thème et y ajuste automatiquement toutes les couleurs de conception.

Pour ajouter votre propre image, sous l'onglet De base, cliquez sur Télécharger une image et sélectionnez l'image souhaitée sur votre ordinateur. Ensuite, pour que l'éditeur personnalise les couleurs du thème, cliquez sur Générer des couleurs.

Si vous êtes satisfait du résultat, cliquez sur Pack and Install et confirmez le téléchargement, puis ajoutez le thème à Chrome. Le navigateur active immédiatement le nouveau design.

Si, après la configuration automatique, vous souhaitez modifier les couleurs ou ajouter des arrière-plans distincts pour différents éléments de thème, vous aurez besoin d'outils sous d'autres onglets. Plus de détails à leur sujet se trouvent dans le paragraphe suivant de l'article.

2. Méthode avancée

Cette méthode consiste à définir manuellement les arrière-plans et les couleurs du texte pour un nouveau thème.

Pour sélectionner des images ou des couleurs comme arrière-plans pour divers éléments de conception, utilisez les outils sous l'onglet Images. Passez simplement votre curseur sur n'importe quel outil et dans la fenêtre de droite, le concepteur affichera quelle partie du thème il modifie. Par exemple, NTP Background est utilisé pour configurer l’arrière-plan principal. Et Tab Background vous permet de sélectionner l’arrière-plan de l’en-tête du site.

Une fois que vous avez déterminé les arrière-plans, vous pouvez personnaliser les couleurs du texte dans l'onglet Couleurs. Ici, tout fonctionne de la même manière. Il existe une liste d'outils, pointez sur l'un d'entre eux - et dans la fenêtre de droite, vous verrez de quoi il est responsable.

Lorsque vous avez terminé avec les arrière-plans et les couleurs du texte, ouvrez l'onglet Pack et cliquez sur Pack and Install pour télécharger et appliquer le thème de votre choix.

De plus, vous pouvez toujours choisir et installer l'un des nombreux thèmes prêts à l'emploi de la base de données ThemeBeta ou du catalogue officiel de Google. Si à l'avenir vous souhaitez revenir au design standard, allez dans les paramètres de Chrome et en face de l'élément « Thèmes », cliquez sur « Échelle par défaut ».

Les thèmes pour Google Chrome constituent une conception unique pour le navigateur. Il est peu probable que les utilisateurs qui ont un goût esthétique très développé soient satisfaits de la conception initiale ennuyeuse proposée par les développeurs de navigateurs. Changer la situation est très simple, et même un débutant peut faire face à cette tâche.

Où trouver des thèmes pour Chrome

Vous pouvez trouver des thèmes Chrome à la fois dans la boutique en ligne de Google et sur des ressources tierces. Le premier cas, bien entendu, est préférable, car l'extension sera vérifiée et ne contribuera certainement pas à introduire un virus dans l'ordinateur. Vous y trouverez non seulement le design proposé par le développeur, mais également ce qui a été créé par les utilisateurs ordinaires.

A quoi servent les thèmes Google Chrome ? Améliorez simplement votre humeur, ayez toujours votre photo préférée sous les yeux, à toute autre fin. De plus, cette extension est, pour la plupart, proposée gratuitement. Après avoir parcouru les sujets disponibles, chacun trouvera quelque chose à son goût. Le design utilise à la fois des couleurs et des formes strictes et des motifs fantaisistes, à la fois des fleurs gracieuses et des voitures puissantes. En d’autres termes, les développeurs ont présenté des thèmes pour Chrome adaptés à tous les goûts et à toutes les couleurs.

Comment installer des thèmes de navigateur

L'installation de thèmes pour Google Chrome est très simple. Alors, lancez le navigateur et accédez à la boutique d'applications. Pour la commodité des utilisateurs, les développeurs ont divisé toute la gamme proposée ici en catégories. Nous sommes intéressés par les sujets. Pour votre information, dans la section Extensions, vous pouvez trouver et installer divers plugins utiles, par exemple .

En cliquant sur le titre de la section, l'utilisateur peut remarquer que deux sous-catégories sont apparues. Le premier d’entre eux s’appelle From Google, le second – From Artists. Sélectionnez le thème que vous aimez et cliquez sur Gratuit. Nous attendons un certain temps, après quoi un message apparaîtra indiquant que le design a été ajouté au navigateur. De plus, le nouveau thème vous ravira immédiatement avec une image joyeuse.

Si avant l'installation vous souhaitez en savoir plus sur un sujet particulier, cliquez dessus. Une fenêtre supplémentaire apparaîtra dans laquelle, en plus du dessin lui-même, il y aura une description. De plus, il existe des sections Examen, Avis, Détails, Similaire. En plus du fait que vous pouvez immédiatement imaginer à quoi ressembleront les thèmes dans Google Chrome, vous pouvez les étudier plus attentivement. Les utilisateurs qui ont déjà téléchargé et installé le design partagent leurs impressions et l'évaluent. De plus, des statistiques sont conservées sur le nombre de téléchargements du module complémentaire.

Si, pour une raison quelconque, vous n'êtes pas satisfait du nouveau thème et que vous souhaitez revenir à celui qui était dans le navigateur par défaut, c'est absolument simple à faire. Cliquez sur le bouton Paramètres et contrôles et sélectionnez Paramètres dans le menu contextuel. Dans la fenêtre qui s'ouvre, vous devez trouver l'élément Apparence. À propos, vous pouvez ainsi sélectionner des thèmes pour Chrome. Afin de revenir au thème d'origine, cliquez simplement sur le bouton qui vous propose de revenir au thème par défaut. Si vous utilisez la fonction de synchronisation, vous pouvez utiliser le même thème dans le navigateur sur différents appareils.

Si vous utilisez le navigateur Google Chrome et que vous en avez assez de son apparence standard, vous pouvez vous sortir de la situation en téléchargeant et en installant un thème depuis le Chrome Web Store.

Comment installer un thème dans Google Chrome : Paramètres - Options - Contenu personnel - Obtenir le thème.

Vous pouvez utiliser des thèmes prêts à l'emploi pour Google Chrome ou créer vous-même un thème à l'aide du concepteur de thèmes en ligne - Chrome-theme Creator.
Le concepteur en ligne est situé à www.themebeta.com/chrome-theme-creator-online.html

Créer un thème pour Google Chrome - Créateur de thème Chrome

Je vais commencer par comment créer un thème à l'aide du concepteur en ligne - Chrome-theme Creator.

L'interface du concepteur se compose de deux parties.

UN). Sur le côté gauche se trouvent les paramètres du futur thème.

b). Sur le côté droit se trouve un aperçu du thème du navigateur Chrome lors de la conception.

Commençons par le premier onglet (« basic » - de l'anglais basic). Ici, vous devez remplir le champ avec le nom du thème que vous créez (facultatif). J'ai nommé mon thème « myStar »

Le deuxième onglet (« Images » - à partir d'images anglaises) est destiné au chargement des détails du thème.
Attention : lorsque vous créez des images dans un éditeur graphique ou modifiez des images prêtes à l'emploi pour un sujet futur, tenez compte de la résolution du moniteur.

En survolant les sections de l'onglet Images, une info-bulle apparaîtra surlignée en rouge, indiquant quelle partie du thème vous allez modifier.

Chargeons les images d'arrière-plan pour notre thème en cliquant sur le bouton « Choisir une image » et utilisons la palette pour changer la couleur. Voici ce que j'ai obtenu.

Dans le troisième onglet (« Couleurs » - des couleurs anglaises), nous sélectionnons les couleurs des cadres, du texte, etc. Le troisième onglet « Couleurs » contient également des astuces lorsque vous passez le curseur sur les sections. Voyons ce que j'ai trouvé.

L'onglet (« Pack » - de l'anglais à pack) est la dernière étape de la création d'un thème pour Google Chrome.

"Emballer et installer le thème" - emballez et installez le thème.

« Emballer et télécharger le thème » - emballer et télécharger un thème avec une extension. crx. Pour installer le thème, faites simplement glisser et déposez le fichier .crx dans la fenêtre du navigateur Chrome et c'est tout. N'est-il pas rapide d'installer un thème sur Google Chrome ?

"Compaquez et téléchargez le fichier zip"- emballez et téléchargez le thème créé sous forme d'archive zip. Une archive Zip du thème peut être publiée sur le Chrome Web Store pour un usage public.

C'est tout!!! Avec l'aide du concepteur en ligne - créateur du thème Chrome, nous l'avons compris.

Peut-être que quelqu'un aimera cet article. Ici, j'ai décidé de publier plusieurs thèmes magnifiques et agréables pour le navigateur Google Chrome.

Aujourd’hui, c’est l’un des navigateurs les plus populaires, mais vous et moi le savons déjà. Il possède de nombreuses fonctionnalités : plugins, extensions, et bien sûr des thèmes pour Google Chrome. De cette façon, vous pouvez personnaliser l'apparence de votre navigateur comme vous le souhaitez. Ci-dessous, je vais vous donner plusieurs options de sujets, peut-être que vous aimerez certains et d'autres non, à vous de choisir.

Thèmes pour Google Chrome

Cubes bleus et verts, un joli thème de design pour la peinture, assez minimaliste et sympa. Si vous aimez les thèmes comme celui-ci, dépêchez-vous et installez-le.

D'après le nom, il ressort clairement que le thème pour les fans de Batman, comme vous pouvez le voir, est également agréable à regarder.

• Carbone noir + métal argenté

Le thème est en métal argenté et carbone noir, très minimaliste avec un beau motif, le motif se situe près de la barre de recherche.

• Doink

Le thème est grand avec un motif floral en arrière-plan, de nombreuses fleurs en haut de la fenêtre du navigateur. Le design est convaincant à l'œil. Dans les pièces bien éclairées, les couleurs claires seront utiles. Si vous aimez le thème, installez-le.

• Polythème

Un thème très cool au look minimaliste, une grande variété de nuances violettes. Je poserais certainement un tel sujet.

Thème sous forme de rayures alternées noires et blanches. Celui qui l’a réalisé a définitivement un grand sens du design.

• Grues_agrumes

Le thème est dans une teinte orange avec une couleur origami vert citron et kaki en arrière-plan. Nous voyons de l'origami en papier en haut de la fenêtre du navigateur. Ça a l'air génial.

• Thème Google Now

Je pense assez. Dix thèmes, je pense que vous en aimerez quelques-uns et déciderez de les installer dans votre navigateur. Même si vous n’aimez aucun thème, vous pouvez en choisir un autre dans le Chrome Web Store.