Skip to content

How to use Firefox 'userChrome' scripts

Fabián Pérez edited this page Jun 4, 2021 · 3 revisions

As the userChrome.css and userContent.css files to modify the Firefox UI and page contents with CSS: there is a way to run .js scripts to modify the Firefox interface too.

In order to make Firefox load those custom scripts, it's needed to set up a some files that help to make it happen: the method I use is the one from alice0775.

Folders needed

You'll need to know the location of two directories: the Firefox installation folder, and your Firefox profile folder. If you already know where are them, just skip to 'Installation steps'.

To check out where are them, in your address bar type about:support and press enter.
In Application Basics section you'll see:

  • Profile Directory → actual path to your Firefox profile. Click that Open Directory button to open it.
  • Application Binary → the path of your Firefox executable, such binary is located in the Firefox installation folder. The listed is the full path to the binary file to open the browser itself. Remove the final \firefox.exe or /firefox (depends on your operating system) and that's the path to the Firefox Installation folder.

Installation steps

  1. Download the .zip with the files or get them from the alice0775's repo
  2. There's a userChrome.js, copy that file inside your profile's chrome folder.*
  3. Copy them: Inside firefox-folder are the files that goes inside your Firefox installation folder:
    • config.js in the root of it
    • config-prefs.js inside defaultspref folder

* The chrome folder should be inside your Firefox profile directory. If it doesn't exists, just create it.
That folder is where all the custom css/js are going to be placed.

You can see an example of the files final paths below on this page.

With that done, you are ready to use custom scripts

From now on, when Firefox is executed, it will load any .uc.js file that is inside your profile's chrome folder.
For example, now you can use the FloatingScrollbar.uc.js, which does what its name suggests.


Paths examples

As an example of where and which files we need to add, here is a list of the full paths to the loader files already pasted in the proper place.

Linux case

Assuming that our Binary Application path is /usr/lib/firefox/firefox and profile path /home/pante/.mozilla/firefox/ew4dkvt2.default, we should have those files in place:

  • /usr/lib/firefox/config.js
  • /usr/lib/firefox/defaults/pref/config-prefs.js
  • /home/pante/.mozilla/firefox/ew4dkvt2.default/chrome/userChrome.js

Windows case

Assuming that our Binary Application path is C:\Program Files\Mozilla Firefox\firefox.exe and profile path C:\Users\pante\AppData\Roaming\Mozilla\Firefox\Profiles\ew4dkvt2.default, we should have those files in place:

  • C:\Program Files\Mozilla Firefox\config.js
  • C:\Program Files\Mozilla Firefox\defaults\pref\config-prefs.js
  • C:\Users\pante\AppData\Roaming\Mozilla\Firefox\Profiles\ew4dkvt2.default\chrome\userChrome.js