Modification de l'image d'arrière-plan du NTP de Chrome

Existe-t-il un moyen de définir ou de modifier l'arrière-plan de la nouvelle page-onglets de Chrome sans installer de thème?

La page newtab n'est pas générée, c'est une ressource intégrée à Chrome qui est chargée et traitée au moment de l'exécution. Il serait évidemment plus facile de modifier la page New Tab avec une extension, mais vous pouvez la modifier pour que vos modifications soient permanentes (c'est-à-dire intégrées, même lorsqu'elles s'exécutent en mode minimum nu avec tous les plugins et extensions désactivés). Vous devriez le faire à nouveau après chaque mise à jour (même si cela peut être facilité de différentes façons). Si vous souhaitez passer cette route, vous pouvez trouver la page Nouvel onglet dans le fichier CHROME.DLL .

Tout d'abord, fermez toutes les instances de Chrome / Chromium (assurez-vous qu'aucune instance de chrome.exe n'est présente dans le Gestionnaire des tâches), puis créez une copie de sauvegarde de chrome.dll (ResHacker le fait automatiquement, mais vous voudrez une copie de rechange juste au cas où).

Maintenant, ouvrez chrome.dll dans un éditeur de ressources tel que ResHacker . La page se trouve dans la section binaire ( BINDATA ), sous la ressource 523: le nombre peut changer, mais recherchez la barre de bookmarkbarattached:bookmarkbarattached; chaîne bookmarkbarattached:bookmarkbarattached; . (Pour une raison quelconque, il n'y a pas d'élément <title>New Page</title> dans la page, il est ajouté à l'exécution même s'il s'agit d'une chaîne statique et n'a aucun contenu dynamique.)

À ce stade, vous pouvez apporter les modifications souhaitées. Vous pouvez ajouter des éléments, des scripts, des styles, etc.

Outre l'évidence (éditer les fichiers compilés, binaires et la nécessité de ré-éditer après les mises à jour), une mise en garde est que vous ne pouvez pas lier des fichiers locaux (ce qui est logique car le navigateur n'est pas un serveur Web). La page Nouvel onglet est "située" à l'URL chrome://newtab/ , donc les URI relatifs seront relatifs à cela). Vous pouvez bien sûr utiliser des URI absolus tels que http://foobar.org/images/blah.jpg ou chrome://theme/css/newtab.css .

Lorsque vous avez terminé, compilez le script (si l'éditeur de ressources possède un tel bouton) et enregistrez-le. Maintenant, exécutez Chrome et votre nouvelle page Tab devrait être brillante et nouvelle.

Ci-dessous, j'ai édité la page New Tab et j'ai jeté une image dans le coin inférieur droit qui bascule entre deux fichiers graphiques lorsque vous cliquez dessus (il s'agissait à l'origine d'un simple lien vers ma page d'accueil, mais je l'ai imaginé pour montrer Que vous pouvez apporter des modifications importantes à la page Nouvel onglet). J'ai également configuré le style de l'élément du body dans un fichier graphique sur mon site, donc je peux le changer facilement en changeant le fichier au lieu de ré-éditer le fichier DLL. Bien sûr, il serait encore plus facile d'ajouter simplement une feuille de style externe à la page afin que tout changement puisse être apporté à un fichier texte sans ré-édition du fichier DLL.

Nouvelle page d'onglet Edité Chromium

Pas directement, vous pouvez personnaliser en utilisant la numérotation abrégée

Si vous n'êtes pas satisfait de simplement modifier la couleur de la numérotation abrégée, vous pouvez définir une image d'arrière-plan pour modifier vraiment le look. Toute image fonctionne, mais elle doit actuellement être hébergée en ligne. Le développeur note qu'ils vont bientôt ajouter un support pour les images d'arrière-plan locales, alors gardez un œil sur les mises à jour futures.

LA SOURCE

J'allais remplacer mon ancienne réponse par cette nouvelle mise à jour qui est complètement différente, mais apparemment l'ancienne est toujours valable pour les versions plus récentes de Chrome, alors j'ai pensé que j'ajouterais ceci comme une réponse distincte.

Quelques versions, Chrome a été modifié de sorte que tout dans le navigateur soit une page Web. Une fois qu'ils ont implémenté une feuille de style utilisateur, il est devenu possible de changer à peu près tout dans le navigateur, y compris son propre chrome.

Vous pouvez en effet modifier votre arrière-plan de la nouvelle page d'onglet sans aucun thème, et aussi facilement. En fait, vous pouvez personnaliser la plupart des nouveaux onglets ainsi que d'autres parties de Chrome. La seule limitation est que vous devez utiliser CSS pour le faire (vous ne pouvez pas remplacer le contenu pour le moment).

La procédure générale pour personnaliser Chrome est simple:

  1. Ouvrez votre répertoire de données utilisateur
  2. Ouvrez le dossier User StyleSheets
  3. Ouvrez le fichier Custom.css dans un éditeur de texte
  4. Entrez votre CSS
  5. Enregistrer le fichier
  6. Observer les résultats

Si vous souhaitez modifier l'arrière-plan de la nouvelle page d'onglet, vous pouvez utiliser quelque chose comme ceci:

 /*Change NTP background*/ html[themegravity] {background:url(http://upload.wikimedia.org/wikipedia/commons/2/2c/IntP_Brick.png) !important;} 

C'est une ligne simple et simple, mais elle a quelques aspects importants:

  • Il commence par un commentaire (toujours bon à faire, surtout lorsque le fichier commence à croître avec toutes vos personnalisations).
  • Il crée une règle CSS pour l'élément html avec un attribut themegravity . J'ai choisi cela parce que dans la version que j'utilise, c'était la meilleure façon d'affiner la règle CSS à l'arrière-plan du NTP. Malheureusement, cela peut varier ou changer d'une version à l'autre, donc vous devrez expérimenter avec les outils dev ( F12 ) pour trouver un bon sélecteur CSS qui fonctionne.
  • La règle définit l'image d'arrière-plan dans une texture de carrelage dans le magasin WikiMedia.
  • Il utilise le modificateur !important pour s'assurer que la règle est utilisée et non remplacée par les feuilles de style internes de Chrome.

Vous pouvez utiliser n'importe quelle image valide pour l'arrière-plan (tout ce qui fonctionnerait dans une page Web régulière). Cela vous donne une grande souplesse car les options valides comprennent:

  • Images hébergées à l'extérieur
  • Images locales sur le disque dur du système
  • Ressources intégrées en Chrome
  • Les flux de données d'image codés Base64

De toute évidence, vous voudrez faire attention aux images hébergées de manière externe pour éviter les logiciels malveillants ainsi que pour des raisons de performance (vous devez le télécharger), mais une image externe a l'avantage de pouvoir assigner une image sur un hôte où l'image est modifiée dynamiquement . Par exemple, s'il y avait une URL telle que http://coolpics.com/dailypic.jpg qui change chaque jour, alors le réglage qui vous donnerait un nouveau fond tous les jours ! ʘ◡ʘ Et vous n'avez qu'à utiliser une seule ligne qui ne change jamais. Assez cool, hein?

Comme je l'ai déjà dit, l'arrière-plan n'est pas la seule chose que vous pouvez changer, vous pouvez changer presque tout. Tout ce que vous devez faire est de choisir les sélecteurs CSS appropriés de manière étroite pour cibler l'élément sans affecter d'autres pages Web. Cela peut être un peu délicat, mais certainement faisable, d'autant plus que Chrome prend en charge CSS3. Et la meilleure partie est que les changements sont effectués instantanément lorsque vous enregistrez la feuille de style, de sorte que vous ne devez pas faire de mal à installer quoi que ce soit , ce qui rend le contrôle de la brise. (N'oubliez pas d'utiliser le modificateur !important )

Par exemple, vous pouvez tourner ceci:

Capture d'écran du look par défaut de NTP

Dans cette monstruosité:

Capture d'écran de NTP personnalisé

Cet exemple peut ne pas être joli, mais il démontre ce qu'il peut faire avec un peu de CSS. Voici le CSS que j'ai utilisé pour faire cet échantillon laid; Il comprend une variété de hacks et de réglages qui montrent les différents types de sélecteurs et d'images que vous pouvez utiliser. Les sélecteurs auxquels j'ai choisi travailler pour la version de Chrome que j'utilise en ce moment sans affecter d'autres pages Web auxquelles je suis allé.

 /*Customize the Chrome New Tab Page*/ /*Change background to tiling texture*/ html[themegravity] {background:url(http://upload.wikimedia.org/wikipedia/commons/2/2c/IntP_Brick.png) !important;} /*Set the webstore icon to an emoji and change text to red*/ span#chrome-web-store-title {background:url(chrome://theme/IDR_PROFILE_AVATAR_14) no-repeat bottom right !important; color:#f00;} /*Change the Chrome logo to the built-in conflicts icon*/ div#logo-img {margin-left:-70px !important; padding-left:20px !important; width:20px; height:63px; background:url(data:image/png;base64,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) !important;} /*Hide normal Chrome logo*/ div#logo-img img {display: none !important;} /*Change bar at bottom to reddish fade*/ html[themegravity] div#footer {background-image:-webkit-linear-gradient( rgba(255, 192, 192, 1.0), rgba(200, 255, 200, 0.5)) !important;} /*Change color of most-visited items to yellow and make bold*/ a.most-visited span.title {color:#ff8 !important; font-weight:bold !important;} /*Give thumbnails a thick, dotted, green border*/ span.thumbnail-wrapper {border:dotted #0f0 5px !important;} 

Les possibilités sont illimitées (ok, pas littéralement, mais encore assez vaste).