My customizations External links Introduction Usage Contact

My customizations

userChrome.js

New tab - custom page
Load a custom link or local file, instead of the default new tab page (about:newtab).
Buttons - cookies
Left-click to accept first-party cookies or reject all.
Buttons - Restart button and menu entries
A toolbar button and menu entries that restart Firefox.
Buttons - hamburger menu keyboard shortcut
Alt+m toggles the hamburger button menu.
Buttons - youtube-dl
A toolbar button that sends the current link to youtube-dl.

userChrome.css

New Tab Context tweaks
For the New Tab Context add-on. Moves the menu entry to the top and hides its icon.
No full-screen video nagging
Gets rid of the notification when switching a video to full-screen.

userContent.css

Link colors
Your own colors for visited links and such.
Arrow cursor for normal text
Only display the text selection cursor in input fields.
Font substitution
Replace certain fonts specified by the page with your own.

Introduction

Firefox stores data in your profile folder. Inside that folder you can create a folder named chrome, and place the following files in it:
  • userContent.css - can change the appearance of web sites, and some internal pages like about:newtab.
  • userChrome.css - can change the appearance of the user interface and apply XML bindings to elements.
  • userChrome.xml - Allows *.uc.js files placed in the chrome folder to run in the browser chrome. This enables some functionality that's unavailable to add-ons, like opening a custom local page in each new tab.
  • There's no file that runs user scripts on web pages, but this can be done with an add-on like Violentmonkey, Greasemonkey, or Tampermonkey.

Usage

Initial setup

  1. Enter about:support into Firefox's location bar.
  2. Click the Open Folder button. This launches a file manager window with your Firefox profile folder.
  3. Open Firefox_chrome.zip. If you extract it into your Firefox profile folder, it will create the chrome folder, and inside it, userContent.css, userChrome.css, and userChrome.xml. If you already have your own CSS files set up, only extract userChrome.xml, then copy the code from the ZIP's userChrome.css into your own.
  4. A restart is required for the change to take effect, though the files won't affect anything until you add some styles or scripts.

Adding user scripts

Option 1

Simply save the *.uc.js files into the chrome folder.

Option 2

You could paste every script in a single file named userChrome.js in the chrome folder, but that's not very manageable.

Adding user styles

Option 1

Copy the code from the style, then paste it at the bottom of the respective file, either userChrome.css or userContent.css.

Option 2

  1. Save the style as a separate *.css file in the chrome folder.
  2. At the top of the respective file, either userChrome.css or userContent.css, add a rule like the following: @import url("separate_css_file.css");

Live preview of user style changes

If you're an advanced user familiar with CSS, you can use Firefox's developer tools to preview your changes. See the Browser Toolbox article for details.

For the user interface

  1. Either press F12, or click the ≡ Menu button, then Web Developer, then Toggle Tools.
  2. In the developer tools pane, click the cog wheel button near the top right.
  3. In the bottom right, check both Enable browser chrome and add-on debugging toolboxes and Enable remote debugging.
  4. Either press Ctrl+Alt+Shift+I or Cmd+Opt+Shift+I, or click the ≡ Menu button, then Web Developer, then Browser Toolbox. The first time, you'll need to confirm a security prompt.
  5. On the Style Editor tab, you can edit userChrome.css and see your changes immediately.

For web sites

You can use the above method to edit userContent.css, but changes won't be visible until the file is saved and a new window is opened. That offers no advantage over using an external editor. For this reason, it's more convenient to get a live preview by editing the site's stylesheet:
  1. Either press F12, or click the ≡ Menu button, then Web Developer, then Toggle Tools.
  2. Click the Style Editor button.
  3. Pick any stylesheet from the left, and make your changes on the right, at the bottom.
  4. Once finished, copy your changes to the clipboard, then paste them into userContent.css.