Firefox customization for chrome and site styles
- My layout for Firefox which heavily changes and removes part of the chrome
- Site specific changes, mostly changing the site's accent color and removing unused elements
- Recoloring of Firefox elements in chrome and in the browser's pages
- Use TypeScript for JavaScript Mods (are there any types for Firefox?)
- Preprocess CSS with SCSS to get access to newer features
Installation is not user-friendly, you are expected to be familiar with CSS, JS, and Firefox userChrome!
I regularly use and test this repository on Firefox Dev Edition (Beta) and Thunderbird Stable
- Create a
chrome
directory in firefox user profile (found inabout:profiles
) - If necessary, create a symbolic link to this repository
- Follow instructions to optionally enable Chrome Styling, Page Styling, and JavaScript Mods
Creating a symbolic link allows JavaScript to be loaded and for non-privileged processes to access files in the home directory on Windows
Create a link in your profile's chrome directory pointing to this repository
# Linux
ln -s chrome/firefox-mods ./wherever/someplace/firefox-mods
# Windows Powershell
New-Item -ItemType SymbolicLink -Path .\chrome\firefox-mods -Target ..\wherever\someplace\firefox-mods
:: Windows cmd
mklink /D chrome\firefox-mods ..\wherever\someplace\firefox-mods
- Create a file in your chrome directory named
userChrome.css
- Import this repository's chrome files
@import "/wherever/someplace/firefox-mods/css/chrome/colors.css";
/* optional if you want the modified layout */
@import "/wherever/someplace/firefox-mods/css/chrome/layout.css";
/* optional if you want a draggable sidebar */
@import "/wherever/someplace/firefox-mods/css/chrome/sidebar.css";
- Set
toolkit.legacyUserProfileCustomizations.stylesheets
totrue
inabout:config
- Create a file in your chrome directory named
userContent.css
- Import this repository's
userContent.css
file
@import "/wherever/someplace/firefox-mods/userContent.css";
- Copy
install_dir/config.js
to your Firefox installation directory (NOT the chrome directory, the actual system install directory) - Copy
install_dir/config-prefs.js
to thedefaults/pref
directory in your Firefox installation directory - Create a file in your chrome directory named
chrome.manifest
with only the textcontent mods ./
- Create a file in your chrome directory named
entrypoint.js
and import this repository'smain.js
file
const EXPORTED_SYMBOLS = [];
Components.utils.import('chrome://mods/content/firefox-mods/js/main.js');