Skip to content

MatthewCash/firefox-mods

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

firefox-mods

Firefox customization for chrome and site styles

Customizations

  • 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

TODO

  • Use TypeScript for JavaScript Mods (are there any types for Firefox?)
  • Preprocess CSS with SCSS to get access to newer features

Usage

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

  1. Create a chrome directory in firefox user profile (found in about:profiles)
  2. If necessary, create a symbolic link to this repository
  3. Follow instructions to optionally enable Chrome Styling, Page Styling, and JavaScript Mods

Linking

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

Chrome Styling

  1. Create a file in your chrome directory named userChrome.css
  2. 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";
  1. Set toolkit.legacyUserProfileCustomizations.stylesheets to true in about:config

Page Styling

  1. Create a file in your chrome directory named userContent.css
  2. Import this repository's userContent.css file
@import "/wherever/someplace/firefox-mods/userContent.css";

JavaScript Mods

  1. Copy install_dir/config.js to your Firefox installation directory (NOT the chrome directory, the actual system install directory)
  2. Copy install_dir/config-prefs.js to the defaults/pref directory in your Firefox installation directory
  3. Create a file in your chrome directory named chrome.manifest with only the text content mods ./
  4. Create a file in your chrome directory named entrypoint.js and import this repository's main.js file
const EXPORTED_SYMBOLS = [];
Components.utils.import('chrome://mods/content/firefox-mods/js/main.js');