Module bar in Firefox 57: Everyone will have noticed that the module bar (at the bottom of the window of Firefox) no longer exists in Firefox for quite some time (well before Firefox 57) only two extensions allowed to find it.
Module bar in Firefox 57+ without extension
- Classic Theme Restorer
- The Addon bar restored
I love this bar because it allows to unload the extensions of the toolbar while having a visual of them, without having to click on the hamburger icon. Besides, I do not understand why Mozilla has removed this module bar, except to leave room for a larger reading window.
Unfortunately with the release of Firefox 57 these two Legacy extensions no longer work.
But we can find this bar without adding extensions.
Frankly, as I use Waterfox in main browser (see: Waterfox the alternative to Firefox ), much more responsive, I could have dropped the case since this browser Classic Theme Restorer works perfectly.
But I still have Firefox mainly at the end of test extensions or CSS code and sometimes I like to take my head a little on the small details are very practical, and then I also consider this as an exercise in style.
Since I just mentioned the CSS code, many users have circumvented the fact that some extensions are no longer available because the Legacy format is no longer accepted in favor of the WebExtension format , by injecting CSS into the CSS profile. to find some missing features.
For more information on the CSS code options for Firefox 57+, I invite you to read my article: Quantum Firefox customization tips (excluding extensions)
In the context of this article it is not the CSS code that is concerned, since to find this famous bar modules, we will have to inject JavaScript code (js)
Well it’s true we must put a little hands in the “engine” of Firefox, but nothing complicated, if we assume that I’m not a developer or even a programmer, I do not know anything in CSS and JavaScript.
I’ll make things clear, and give Caesar what is Caesar, the trick and the procedure I’m going to detail is not of my own creation, and it is thanks to the assistance of a member (krystian3w) on Github that I could get the result I was looking for, I want to thank him again.
Tests done on Firefox 65.0
Let’s get into the thick of it.
Necessary elements
Download (at the end of the article) the following files:
- userChrome.JS.zip
- Mozilla.Firefox.zip (for Method 2)
Note: Since the userChrome.JS.zip file I was providing was out of date, I removed the download link, take the most recent CustomJSforFx-master.zip archive directly via the following link: https: // github.com/Aris-t2/CustomJSforFx
Procedure
There are 3 possible methods.
– The first one makes it possible to be freed from the modification of the folder ” defaults ” and the file ” config.js ” in the directory of installation of Firefox, so in this case the Mozilla.Firefox.zip archive will not be of you no use.
– The second requires to modify the folders and files previously mentioned in the installation directory of Firefox.
– The third most recent combines the two other methods
Whatever the method used, in no case does it overwrite, modify or interfere with your userChrome.css file since what we inject is a userChrome folder and a userChrome.js file (JavaScript)
Method 1
Unzip the CustomJSforFx-master.zip archive and copy / paste the ” userChrome ” folder and the ” userChrome.js ” file into the ” chrome ” folder of your profile.
Access path :
C: \ Users \ [name] \ AppData \ Roaming \ Mozilla \ Firefox \ Profiles \ XXXXX.default \ Chrome
Reminder: to access your Firefox profile, you must display hidden folders and files.
So for this method normally there is nothing else to do, however, as I used the method 2, I have not tested this one, so feel free to post a comment on the result obtained .
Translation and adaptation below made from the file README.md contained in the archive of the original source: https://github.com/Aris-t2/CustomJSforFx
Method 2
Unzip the CustomJSforFx-master.zip archive and copy / paste the ” userChrome ” folder and the ” userChrome.js ” file into the ” chrome ” folder of your profile.
Unzip the Mozilla.Firefox.zip archive and copy / paste the ” defaults ” folder and the ” config.js ” file into the Firefox installation directory and accept the change.
Method 3
Unzip the CustomJSforFx-master.zip archiveand copy / paste the ” userChrome ” folder, the ” utils “folder,and the ” userChrome.uc.js ” file into the ” chrome “folderof your profile.
Copy / paste the default folder and the ” config.js “fileinto the main Firefox directory (where the Firefox executable is located).
Edit the file ” userChrome.uc.js ” to add custom scripts or delete the file ” userChrome.uc.js ” and add the scripts directly to the folder ”
If you want to have other JavaScript, download the CustomJSforFx file by following this link: https://github.com/Aris-t2/CustomJSforFx
If you add other scripts, put the corresponding files ( .uc.js ) in the userChrome folder, then modify the userChrome.js file by adding a line for each script in this form:
userChrome.import (“/ userChrome / my_other_script_name.uc.js”, “UChrm”);
A tip, before you start, if you feared to make a false manipulation, perform tests on a test profile.
Important!
The files (5) in ” startupCache ” should always be deleted after each modification or addition of script! otherwise your changes will not be taken into account.
The ” startupCache ” folder is located in the local directory (hidden folder).
Location on WINDOWS:
C: \ Users \ USER NAME \ AppData \ Local \ Mozilla \ Firefox \ Profiles \ PROFILE NAME \ startupCache
How to access it from Firefox.
Open Firefox, in the menu bar, click on ? and select ” Troubleshooting Information ” click on
: profiles > Local Directory > Open Folder, close Firefox, and delete all files from the startupCache folder.
WARNING ! This is not the same profile folder where custom scripts and styles are stored!
Below is a combination screenshot with other JS scripts:
- The vertical bar (left)
- The restart button
- The password manager button
- The save / restore buttons for bookmarks
Like what by combining CSS and JavaScript you can do a lot of things without necessarily needing multiple extensions.
In my example, I do not use my homemade CSS code