Barre des modules dans Firefox 57+ sans extension

Publié le par Wullfk

Barre des modules dans Firefox 57+ sans extension
Barre des modules dans Firefox 57+ sans extension

Bonjour,

Tout le monde aura constaté que la barre des modules (en bas de la fenêtre de Firefox) n'existe plus d'origine dans Firefox depuis pas mal de temps (bien avant Firefox 57) seules deux extensions permettaient de la retrouver.

  • Classic Theme Restorer
  • The Addon bar restored

Moi j'adore cette barre pour son coté pratique. Elle permet de décharger de la barre d'outils les icônes des modules d'extensions, tout en ayant un visuel de ceux-ci, sans avoir à cliquer sur l’icône hamburger. D'ailleurs je ne comprends pas pourquoi Mozilla a supprimé cette barre des modules, si ce n'est pour laisser place à une plus grande fenêtre de lecture.

Malheureusement avec la sortie de Firefox 57 ces deux extensions Legacy ne fonctionnent plus.

Mais on peut retrouver cette barre sans ajouter d'extensions.

En toute franchise, comme j'utilise Waterfox en navigateur principal (cf: Waterfox l'alternative à Firefox), bien plus réactif, j'aurais pu laisser tomber l'affaire puisque sur ce navigateur Classic Theme Restorer fonctionne parfaitement.

Ceci dit je dispose toujours de Firefox principalement à des fin de test d'extensions ou de code CSS et parfois j'aime bien me prendre un peu la tête sur des petits détails au demeurant fort pratiques, et puis je considère aussi cela comme un exercice de style.

Puisque je viens d'évoquer le code CSS, de nombreux utilisateurs on contourné le problème de certaines extensions qui ne sont plus disponibles du fait que le format Legacy n'est plus accepté au profit du format WebExtension, en injectant dans le profil Firefox du code CSS pour retrouver certaines fonctionnalités disparues.

Pour plus d'infos sur les possibilités du codes CSS pour Firefox 57+, je vous invite à lire mon article : Astuces de personnalisation de Firefox Quantum (hors extensions)

Dans le cadre de cet article ce n'est pas le code CSS qui est concerné, puisque pour retrouver cette fameuse barre des modules, il va falloir injecter du code JavaScript (js)

Bon c'est vrai il faut mettre un peu les mains dans le "moteur" de Firefox, mais rien de bien compliqué si vous suivez bien la procédure que je vais vous fournir.

Pour info je ne suis ni développeur, ni programmeur, et je n'y connais rien en langage CSS et JavaScript.

Au final je dispose même d'un barre verticale à gauche, c'est pas cool ça !!! wink

Je vais rendre à César ce qui est à César, l'astuce et la procédure que je vais vous détailler n'est pas de ma propre création. C'est grâce à l'assistance d'un membre (krystian3w) sur Github que j'ai pu obtenir le résultat que je recherchais, je tiens encore une fois à le remercier.

Tests effectués sur Windows avec Firefox 70.0 et sur Linux Mint

Entrons dans le vif du sujet.

Éléments nécessaires

Télécharger (en fin d'article) les fichiers suivants :

  • userChrome.JS.zip
  • Mozilla.Firefox.zip (pour Méthode 2) Cette archive n'est plus nécessaire car les fichiers quelle contient sont intégré dans l'archive CustomJSforFx-master.zip, je l'ai tout de même laissé à disposition, si vous souhaitez seulement les fichiers quelle contient.

Note : Le fichier userChrome.JS.zip que je fournissais n'étant plus à jour, j'ai supprimer le lien de téléchargement, prenez l'archive CustomJSforFx-master.zip la plus récente directement via le lien suivant : https://github.com/Aris-t2/CustomJSforFx

Procédure

Il y a 3 méthodes possibles.

  1. La première permet de s'affranchir de la modification du dossier "defaults" et du fichier "config.js" dans le répertoire d'installation de Firefox.
  2. La deuxième impose d'effectuer la modification des dossiers et fichiers précédemment cités dans le répertoire d'installation de Firefox.
  3. La troisième plus récente combine les deux autres méthodes.

Quelle que soit la méthode employée, en aucun cas ça ne vient écraser, modifier ou interférer avec votre fichier userChrome.css puisque ce que l'on injecte c'est un dossier userChrome et un fichier userChrome.js (JavaScript)

Article connexe : Utilisation de Custom JS scripts pour Firefox 57+

Méthode 1

Décompressez l'archive CustomJSforFx-master.zip et copier/coller le dossier "userChrome" et le fichier "userChrome.js" dans le dossier "chrome" de votre profil.

Chemin d'accès sur Windows :

C:\Utilisateurs\[NOM]\AppData\Roaming\Mozilla\Firefox\Profiles\XXXXX.default\chrome

Chemin d'accès sur Linux :

/home/.mozilla/firefox/le_profile

Rappel: Que ce soit sur Windows ou Linux, pour accéder à votre profil Firefox, il faut afficher les dossiers et fichiers cachés.

Voilà pour cette méthode normalement il n'y a rien d'autre à faire, cette méthode ne fonctionne pas chez moi, du coup j'ai utilisé la méthode 2.

Traduction et adaptation ci-dessous réalisé à partir du fichier README.md contenu dans l'archive de la source original : https://github.com/Aris-t2/CustomJSforFx

Méthode 2

Décompressez l'archive CustomJSforFx-master.zip et copier/coller le dossier "userChrome" et le fichier "userChrome.js" dans le dossier "chrome" de votre profil.

Dans le dossier "firefox" copier/coller le dossier "defaults" et le fichier "config.js" dans le répertoire d'installation de Firefox et accepter la modification.

Méthode 3

Décompressez l'archive CustomJSforFx-master.zip et copier/coller le dossier "userChrome", le dossier "utils" et le fichier "userChrome.uc.js" dans le dossier "chrome" de votre profil.

Dans le dossier "firefox" copier/coller le dossier "defaults" et le fichier "config.js" dans le répertoire d'installation de Firefox et accepter la modification.

Modifiez le fichier "userChrome.uc.js" pour ajouter des scripts personnalisés ou supprimez le fichier "userChrome.uc.js" et ajoutez les scripts directement dans le dossier "chrome" de votre profil.

Ne l'ayant pas essayé je ne sais pas ce qu'apporte de plus ou de moins cette 3ème méthode, peut être une structure différente dans l'intégration des scripts ?

Pour obtenir le résultat ci-dessous il suffit de mettre dans le dossier userChrome les deux fichiers script suivants :

  • addonbar.uc.js
  • addonbar_vertical.uc.js

Et d'ajouter les lignes suivantes dans le fichier userChrome.js :

userChrome.import("/userChrome/addonbar.uc.js", "UChrm");
userChrome.import("/userChrome/addonbar_vertical.uc.js", "UChrm");

Firefox 70 avec Barre module et Barre verticale
Barre module et Barre verticale dans Firefox 70.0

Si vous voulez disposer d'autres script JavaScript, télécharger le fichier CustomJSforFx en suivant ce lien : https://github.com/Aris-t2/CustomJSforFx

Si vous ajoutez d'autres scripts, il faut mettre les fichiers correspondants (.uc.js) dans le dossier userChrome ensuite il faut modifier le fichier userChrome.js en y ajoutant une ligne pour chaque scripts sous cette forme :

userChrome.import("/userChrome/my_other_script_name.uc.js", "UChrm");

Un conseil, avant de vous lancez, si vous craigniez de faire une fausse manip, effectuez des essais sur un profil de test.

Important !

Les fichiers (5) dans "startupCache" doivent être systématiquement effacé après chaque modification ou ajout de script ! sinon vos modifications ne seront pas prises en compte.

Sur Windows, le dossier "startupCache" se trouve dans le répertoire local (dossier caché)

Sur Linux le dossier "startupCache" se trouve dans votre /home (dossier caché)

Emplacement sur WINDOWS :

C:\Users\NOM UTILISATEUR\AppData\Local\Mozilla\Firefox\Profils\NOM DU PROFIL\startupCache

Manière d'y accéder sur Windows à partir de Firefox.

Ouvrir Firefox, dans la barre de menu, cliquer sur ? et sélectionner "Informations de dépannage" cliquer sur
about:profiles > Répertoire local > Ouvrir le dossier, fermer Firefox et supprimer tous les fichiers du dossier startupCache ou supprimer simplement le dossier startupCache il se reconstituera automatiquement à la prochaine ouverture de Firefox.

Emplacement sur Linux : (c'est plus simple pour y accéder, sans avoir à ouvrir Firefox)

Préalablement afficher les dossiers cachés dans votre /home puis suivez le chemin suivant :

.cache/mozilla/firefox/le_profil/startupCache

ATTENTION ! Ce n'est pas le même dossier de profil dans lequel sont stockés les scripts et styles personnalisés !

Ci-dessous une capture d'écran de combinaison avec d'autres scripts JS :

  • La barre verticale (à gauche)
  • Le bouton restart (redémarrage)
  • Le bouton du gestionnaire de mot de passe
  • Les boutons sauvegarde/restauration pour les marques pages

Comme quoi en combinant du code CSS et JavaScript on peut faire pas mal de chose sans nécessairement avoir besoin de multiples extensions.

Dans mon exemple, je n'utilise pas mon code CSS fait maison

PS : Firefox est actuellement en version 69.0.1 et je n'ai aucuns problème ou interférence avec le code JS injecté.

Note: version PDF disponible ci-dessous. (le PDF n'est pas à jour)

 

Fichiers pour répertoire installation Firefox

Publié dans Navigateur

Commenter cet article

Externaliser support informatique 06/09/2019 10:29

Merci pour le tuto même si personnellement ça ne me fait rien que cette barre ait disparu... Mais pas mal de personnes veulent la faire revenir.

Slonink 06/05/2019 12:52

Personnellement pour moi ça ne fonctionne pas je voudrais savoir si c'est du à la version 66 où parce que j'utilise la version portable. Je ne sais pas comment .

Wullfk 06/05/2019 18:40

Bonjour,

l'astuce avec la version 66.0.4 ne pose aucun problème chez moi et pour l’utilisation sur la version portable, bien que je ne l'utilise pas je ne vois aucune raison pour que ça ne fonctionne pas.

Vous avez très certainement mal suivi la procédure, surtout pour ce qui concerne le vidage des fichiers dans "startupCache"

Cordialement