Category: Firefox

Introduction

Following is a collection of tweaks and fixes for the Mozilla Firefox web browser.

For the non-techies, here are brief descriptions of some of the Firefox configuration files which are in play in this article:

• prefs.js: This is the primary Firefox configuration file that controls much of how the browser works. This file exists in the root of your Firefox profile directory. The contents of this file can be viewed and edited by entering about:config in the address bar, however you should typically not edit this file unless it's only to test something. All of your custom preferences should be placed in a user.js file (or a user-overrides.js file if you're using the 'arkenfox' user.js).
• user.js: This file does not exist until you create it in the root of your Firefox profile directory. Any preferences that you wish to change in prefs.js or about:config that are not available in the Firefox options interface, and which you want to preserve across Firefox updates or resets, should be entered in this file.
• userChrome.css: This file does not exist until the you create it in the chrome folder of your Firefox profile. This file is used to modify the appearance of virtually any element of the Firefox user interface (UI).
• userContent.css: This file does not exist until the you create it in the chrome folder of your Firefox profile. This file can be used to modify the appearance and behavior of web pages, however i would recommend using the Stylus add-on instead because it makes working with CSS much easier.

Note that the userChrome.css and userContent.css files are ignored by default since Firefox version 69, thus you have to set the option...
toolkit.legacyUserProfileCustomizations.stylesheets
...to true in your user.js (or user-overrides.js if you're using the 'arkenfox' user.js) or about:config if you want to use either file.

If you need help with Cascading Style Sheets (CSS), CSS selectors and what parameters they can take, see the CSS Introduction and CSS Reference documents at w3schools.com.

Change how Firefox looks

CustomCSSforFx

Since Mozilla removed support for the older XUL/XPCOM add-ons in favor of WebExtensions, the much loved Classic Theme Restorer add-on won't work with Firefox version 57 or newer. The developer of CTR is still very active in maintaining the CSS code that was used in the add-on however and you can find it in the CustomCSSforFx GitHub repository. Using the new code, we can continue to tweak how Firefox looks, though it requires a bit more elbow grease. I've removed several of the CSS tweaks i had here in favor of the CustomCSSforFx code because it covers so much ground and saves a lot of time without adding too much overhead. You can also hide Firefox context menu items with CustomCSSforFx or you could roll your own styles and dump them in userChrome.css.

Instructions for implementing the CustomCSSforFx code is on the page i linked to, though i might recommend implementing it a little differently if you already have code in your userChrome.css or userContent.css that you want to keep. The method i use keeps my custom code separate from the CustomCSSforFx code which makes updating the CustomCSSforFx stuff easier. It also allows to quickly troubleshoot problems that might arise because you can just comment out a single @import line to easily eliminate large chunks of code. Here's what my userChrome.css contains:

/* 3rd party */
/* Aris-t2/CustomCSSforFx (https://github.com/Aris-t2/CustomCSSforFx) */
@import "./custom/aris-customcssforfx/userChrome.css"; /**/

/* my stuff */
@import "./custom/status-panel.css"; /**/
@import "./custom/ff-chrome-fixes.css"; /**/
@import "./custom/context-menu.css"; /**/

Notice that the @namespace line is missing. You need to do the same, else some of the tweaks in the CustomCSSforFx code might not work. To understand why you don't need the @namespace line, even though you may have read that you do, and why it can cause styles to break, read Adding Style Recipes to userChrome.css.

As you saw above, the userChrome.css in my /chrome folder is a rather bare-bones affair in which i use @import to link to the CustomCSSforFx files and all my other CSS files that reside in sub-folders of /chrome. Here's what the directory hierarchy looks like if you're confused:

/chrome
    userChrome.css
    userContent.css
/chrome/custom/aris-customcssforfx
    /config
    /css
    /image
    userChrome.css
    userContent.css
/chrome/custom
    context-menu.css
    ff-chrome-fixes.css
    status-panel.css

And here's what my userContent.css file looks like, which just points to the userContent.css file contained with the CustomCSSforFx package:

@import "./custom/aris-customcssforfx/userContent.css"; /**/
@import "./custom/addon/format-link.css"; /**/
@import "./custom/addon/mark-it.css"; /**/

Once you've got the files in place, it's just a matter of editing the userChrome.css and userContent.css files to suit your needs. The instructions are contained in the files. It will take a while to go through it all, but i suggest doing so because some tweaks are OS and Firefox version specific. Aris updates the CustomCSSforFx code quite often, so you might want to watch the repository for changes.

When it's time to update the styles, things get a little tricky if you want to avoid having to sift through the userChrome.css and userContent.css files all over again. One solution by 'petsam' called 'Pretty Firefox' attempts to automate the process as much as possible. I haven't used his script so i can't comment on it, suffice to say that any effort to automate the updating of CustomCSSforFx is appreciated i'm sure.

Dark Fox

Firefox ships with a few default themes and one of them is the 'Dark' theme. To activate it, right-click on an empty part of the tab bar or the navigation tool bar, or click the 'Customize' menu item in the Hamburger menu. At the bottom of the 'Customize Firefox' tab you'll see a 'Themes' button. Click it and select the 'Dark' option.

Adjust vertical space between the bookmark items

This will change the vertical space between your bookmarks in the sidebar. You can use CustomCSSforFx for this, or copy the following code to your userChrome.css or other custom CSS file. Change the -2 to whatever suits you.

/* bookmark panel item spacing */
.sidebar-placesTree treechildren::-moz-tree-row {
    margin: -2px;
}

Styling the link target/network status tooltip

The hyperlink/network status tooltip is the text that appears in the lower left or right of the browser viewport when you hover over a hyperlink or when there is certain network activity. Some people (me!) find the link tooltip to be really annoying because it can cover part of a webpage and get in your way. This style will have the following effects:

• move the hyperlink tooltip to the top of the browser, overlaying the navigation tool bar (adjustable)
• make the hyperlink tooltip the full width of the browser
• make the hyperlink tooltip background transparent black and the text white
• center the hyperlink tooltip text
• leave the network status tooltip on the bottom of the viewport, but make the background transparent white and the text black

/* hyperlink hover */
#statuspanel[type="overLink"] {
    position: fixed;
    top: -80px; /* adjust as necessary */
    z-index: 999;
    left: 0 !important;
    right: 100% !important;
    text-align: center;
}

/* hyperlink label */
#statuspanel[type="overLink"] #statuspanel-label {
    color: #fff !important;
    background: rgba(0, 0, 0, .50) !important;
    padding: 8px 0 !important;
    width: 1920px !important; /* set to display width */
}

/* network label */
#statuspanel[type="status"] #statuspanel-label {
    color: #fff !important;
    background: rgba(0, 0, 0, .50) !important;
}

/* make sure the network tooltip is hidden when it's inactive */
#statuspanel[inactive] #statuspanel-label {
    display: none !important
}

Change how Firefox acts

In addition to the smooth scrolling tweak below, see the articles, Firefox Configuration Guide for Privacy Freaks and Performance Buffs and The Firefox Privacy Guide For Dummies!.

Smooth scrolling

Smooth scrolling is now enabled by default in Firefox, but i don't care for the way it works. If you want to try my settings, they're in my user-overrides.js file. Here's the direct link to the raw text. Scroll down until you find the general.smoothScroll preferences and copy the settings to your own user.js.

Enlarging the Developers Toolbox font size

If you use Firefox's developer tools you can enlarge the text using the devtools.toolbox.zoomValue preference.

Cleaning up context menu clutter

You can use a userChrome.css file in the 'chrome' folder of your profile directory to hide items in any of Firefox's context menus, including those added by extensions. Each menu item has a CSS selector and you need to know what they are for the menu items you wish to hide.

There's more than one way to skin a cat so let's go with the easy way first which is to get a list of all the CSS selectors for all of the context menu items by searching the Firefox source code. The other way is a bit of a convoluted process, but it's also easy to do:

1. Open the web developer toolbox from Firefox's hamburger menu, or by pressing F12, etc..
2. From the 3-dot icon in the Developer Tools window, click the 'Settings' menu item and in the 'Advanced Settings' section, enable the two options, 'Enable browser chrome and add-on debugging toolboxes' and 'Enable remote debugging' after which you can close the toolbox.
3. Again from the hamburger menu, click the 'Web Developer' menu item, then 'Browser Toolbox'. This will open the remote Developer Tools window along with a prompt asking whether to you want to allow the connection between Firefox and the remote debugger, which you will.
4. In the new Developer Tools window, click the 3-dot icon, then the 'Disable Popup Auto-Hide' menu item.

Now in Firefox you can open whatever context menu you want to change and it will stay open (press Esc. to close it). Next, click the element picker icon on the Developer Tools window (it should be the left-most icon on the top row), or click Ctrl+Shift+C, and then click the Firefox context menu item you wish to hide. This will highlight the menu item in the Developer Tools window and if you double click the <menuitem id="context-some-menu-item" part, you can then copy the CSS selector.

In this example we'll hide a single context menu item, the "Back" item in the main context menu for web pages:

menuitem#context-back { display: none !important; }

Here's another way to write the same code:

menuitem#context-back {
    display: none !important;
}

In the next example we'll hide multiple context menu items, this time the "Back" and "Forward" items, but not the "Reload" item. There's also a couple of dummy-proof things happening here. Normally when you want to comment out a line you would prepend it with a forward slash followed by an asterisk, and append it with an asterisk followed by a forward slash, /* like this */, but by adding the trailing /**/ to every line we only need to prepend the line with a /* to have Firefox ignore it. The other feature is the #DUMMY line. We could write this code all on one line but it's more readable if we break it up. The problem is that we need to remember to remove the comma in the last line and we might forget, or we might delete the last line, or comment it out, or we might add another line and forget to re-add the missing comma. The #DUMMY line is simply a CSS selector that doesn't exist and is therefor ignored by the browser.  By adding it, without a comma after it, we need not worry about keeping track of the rest of our commas.

menuitem#context-back, /**/
menuitem#context-forward, /**/
/*menuitem#context-reload, /**/

#DUMMY

{ display: none !important; }

Save the file and restart Firefox to see the changes.

Changing how websites look or work

The styles below can be used in a userChrome.css file, but i would recommend using the Stylus add-on mentioned earlier. If you dump them in userChrome.css you'll need to make some changes so that they affect only the websites you want to change.

If you're using an extension to modify how a website looks or works and you want it to work on Mozilla domains, you will need to set the preference...
extensions.webextensions.restrictedDomains
...to an empty value. You can access this preference by entering about:config in the address bar.

Making the interwebs dark

Many of us who have been staring at computer monitors too damn long cannot tolerate bright displays. White web pages with dark text feels like looking at the sun, which is one reason why i use a dark theme for this website. A lot of people seem to have this problem and there are many solutions. In the case of Firefox, there are quite a few add-ons that can darken the web and they use various methods to do so. The simplest ones invert the colors which is a dumb way to go for a couple reasons, one of them being that this can make dark pages look bright. To see my preferred extension for darkening the web, see Firefox Extensions – My Picks.

Allow text selection/copying

In a silly effort to prevent copying text, some websites will try to prevent you from selecting it, or at least make it appear that you can't select the text by changing the selection color to the same color as the background. This tweak will often solve the problem.

Note that i've gotten reports of this CSS causing problems where one is unable to drag tabs to reorganize them and YouTube video full-screen not working with the 'F' key shortcut. I've experienced none of these problems personally.

Name: [global] allow text selection
Applies to: Everything

/* override CSS preventing text selection */
* {
    -moz-user-select: text !important;
    user-select: text !important
}

Copying/pasting text without formatting

Sometimes you may want to copy text from a website and paste it without the HTML markup. While i'm not aware of any way to accomplish this without an extension, you can to do the next best thing by using Ctrl+Shift+V to paste instead of Ctrl+V. This works for me on Windows and Linux, however i've had some feedback that indicates it does not work in all cases. If you have a problem, look for a global or application specific Ctrl+Shift+V hotkey setting for the program you're pasting to and consider deleting or changing it.

Copying text from hyperlinks

Copying the text of a hyperlink can be a hassle, that is until you press the Alt key. Press and hold your Alt key while dragging the cursor over the hyperlink to highlight the text you want to copy. You can even copy text from the middle of a hyperlink this way. No extension needed.

Display website content hidden by JavaScript

I'm noticing more and more website developers using JavaScript and DIV layers to hide page content until the page is fully loaded. While these CSS tweaks will not overcome this shear stupidity in every case, they will work in many. Note also that these styles may occasionally break how a website is displayed, though this seems to be fairly rare.

Name: [global] anti-JS - display html
Applies to: Everything

/*
 * display html hidden by JS
 * note that some styles may break some websites
 */
body {
    opacity: 1 !important;
    visibility: visible !important;
}
body :is(.site, .body-fade-in, .use-preload #page) {
    opacity: 1 !important;
    visibility: visible;
}
body :is(.loading, #preloder, #evt-preloader, .ta-preloader, .lj-preloader, #blocker, .page-loader, .page-preloader-cover, .twp-preloader, #mask, .content-loader, .loader-wrapper, #loader-wrapper, #preloader, .preloader-bg, #load, #loading, .loading-overlay, #ht-loader, #qLoverlay, .preLoader, .preloader, #loftloader-wrapper, #wrapper > #loader-container, #before_preloader, .loading-screen, #loadingDiv, #af-preloader, .body-fade-in, #loadingImg, #fullpage-overlay, #astroid-preloader, .pix-page-loading-bg, .pix-loading-circ-path, .overlayloader, .load-screen, .page-preloader, .page-loader-wrapper, .page-loader-overlay, #zoom-preloader) {
    display: none !important;
}
body:not(.ready) {
    overflow: visible;
}
body #contents {
    visibility: visible !important;
}
body::after {
    content: unset;
}
#content #primary,
.thb-page-transition-on,
.wpb_animate_when_almost_visible {
    opacity: 1;
}
.NoJs .bbCodeSpoilerContainer > .bbCodeSpoilerText,
#container {
    visibility: visible;
}
.preLoader, 
.hide-if-no-js,
#ajax-loading-screen,
#loader-container,
.loader,
#loader,
.loader-container,
.transition--fade-in,
.modal-simple--site-overlay,
.aerious-page-loader,
.video-fullpage-wrapper,
.so-loader,
.open_shop_overlayloader {
    display: none !important;
}
.loading {
    filter: none;
}
html {
    display: unset;
}
html > .page {
    visibility: visible;
}

The following will display images which are hidden by JavaScript in some cases:

Name: [global] anti-JS - display images
Applies to: Everything

img {
    opacity: 1 !important;
    filter: none;
}
/* ex: https://www.zdnet.com/article/this-is-what-googles-pixel-4-looks-like/ */
.loading-circle {
    display: none !important;
}

Many websites will not display embedded YouTube videos unless you enable JavaScript. This will make the video display without having to enable it in some instances, however JS must still be enabled for youtube.com (see Firefox Extensions - My Picks if you want to bypass YouTube altogether whilst still being able to watch YouTube videos).

Name: [global] anti-JS - display YouTube player
Applies to: Everything

/* ex: https://healthnutnews.com/airbnb-wants-to-pay-you-to-move-to-italy-for-3-months-really/ */
div.player-unavailable {
    display: none !important;
}

Normalizing fonts

For better readability i like font types and sizes to be uniform across all websites, plus there are privacy issues for websites that use 3rd party fonts, such as the "free" fonts that Google provides. Just be aware that forcing your own fonts can make fingerprinting the browser easier on websites where JavaScript is enabled. There are various ways to normalize fonts, but here's the method i use:

1. in Firefox preferences, find the 'Fonts & Colors' options and click the 'Advanced' button
2. if you read English, select 'Latin' in the combination control, else select your preferred language
3. set the 'Proportional', 'Monospace' and 'Minimum' font styles and sizes and remember your choices. I set the 'Proportional' option to 'Serif' and leave the others at their default values
4. in the combination control, select 'Other Writing Systems' and set the preferences to the same values as in the last step
5. disable the option, 'Allow pages to choose their own fonts'
6. optionally install a font toggle add-on like Enforce Browser Fonts or Toggle Fonts

Fonts should now look much more uniform across all websites and if you don't like the way a particular website looks, you can quickly toggle the 'Allow pages to choose their own fonts' setting with your add-on.

Lastly, if you use uBlock, read the 'My filters' section of the uBlock Origin Suggested Settings page which offers a way to allow all first-party fonts globally while disallowing all 3rd party fonts by default.

Fixing stuff that's busted

Firefox doesn't remember its window size after restart

If you maximize the Firefox window and then restart Firefox, it may not open in a maximized state as you might expect. This annoyance can be caused when the preference privacy.resistFingerprinting is set to true (as it should be). This preference does a number of things to make it harder for websites to fingerprint your browser and one of them is to set a generic window size. If this bothers you, try the Maximize All Windows (Minimalist Version) add-on by 'ericchase'. Note that forcing Firefox to start in a maximized window will make it easier to fingerprint the browser if JavaScript is enabled since the windows size is often quite unique.

Webpages don't fill the entire viewport (inner window)

When privacy.resistFingerprinting is set to true (as it should be), web content may not fill the entire viewport, also called the 'inner window'. The viewport is the part of the browser that displays webpages, not to be confused with the window described in the previous tweak which contains the entire browser. This behavior is controlled by a hidden preference, privacy.resistFingerprinting.letterboxing, that does not exist by default and which can be set to true or false. While not utilizing the entire viewport may be an annoyance, understand that disabling this setting is likely to make the browser easier to fingerprint. If you still want to disable this protection, you can create the preference in about:config (boolean) or add it to your user.js or user-overrides.js and set it to false.

Troubleshooting problems with add-ons

If you notice a problem that you think may be related to an add-on, there are some simple steps you can take to troubleshoot the issue before contacting the developer. In my experience problems with add-ons are usually a result of a conflict with 1) a setting in prefs.js, 2) a setting in user.js, 3) another add-on, or 4) something in userchrome.css or usercontent.css. Whatever the case, the following information should help you to troubleshoot the issue.

If you suspect an add-on is giving you trouble...

1. Backup your Firefox profile! Load about:profiles if you don't know where it's located, then exit Firefox and find your profile folder in your file manager and press Ctrl+C and Ctrl+V to make a copy. When you are prompted for a new name, just add -bak to the existing name.
2. If you have any custom configuration files, such as a user.js, userChrome.css or userContent.css, rename them (add .bak to the existing name), then start Firefox and verify whether the problem still exists.
   1. If the problem no longer exists, go to the Troubleshooting preferences section below.
   2. If the problem still exists, continue with the next step.
3. Start Firefox and load about:support by entering that in the address bar, then click 'Restart with Add-ons Disabled'.
4. Open the about:addons page and, one by one, enable each add-on until the problem reappears, at which point you will know which add-on is causing the problem.
5. Go to addons.mozilla.org and install a fresh copy of the problematic add-on and verify that the problem is still exists.
   1. If the problem no longer exists, your finished.
   2. If the problem still exists, submit a bug report to the add-on developer (see below).

How to submit a bug report like a pro

If you have a problem with an add-on, or with Firefox itself, you need to be able provide the developer with enough pertinent information so they are able to reproduce it, else they may simply ignore you. Comments like "it don't work" are useless to a developer and you shouldn't be surprised if they ridicule you for submitting such non-descriptive tripe. When describing the problem, be as brief as possible while still including every necessary detail. Here's a template which you can use for bug reports:

Operating system [name]
Firefox [version]
Add-on (if relevant) [name] [version] [link]
Affected webpage (if relevant) [URL]

Brief but accurate description of the problem...

What, if anything, you tried in order to solve the problem...

Precise steps to reproduce the problem...

With that information in hand, you need to find where the developer wants you to submit bug reports. If it's a buggy add-on, load up about:addons and see if there's a support link in the information for it by clicking the 'More' button. If there isn't, go to the add-on page at addons.mozilla.org and see if the developer provides a link to a support website (preferred!) or at least an email address. If they provide neither, then you're left with no other choice than to post your issue in the add-on comments, but do this only when no other option is available and don't down-vote the add-on. Lastly, make sure the title of your submission is descriptive of the problem. Titles like "bro its so borked LOL" are meaningless to a developer who is now more likely to disregard your issue since you just exposed yourself as a 12 year old slab-fondler.

Associating settings preferences with preference name

On occasion you may have a need to know what preference in the prefs.js file is being changed when you change a setting in the Firefox settings UI (about:preferences). One easy way to do this is to make a copy of the prefs.js file, then change the setting(s), then "diff" the files using file comparison software that can highlight the difference between the two files.

Troubleshooting problems with prefs.js / user.js

First of all you should never edit the prefs.js file. Custom preferences should always be placed in a user.js file (or a user-overrides.js file if you're using the 'arkenfox' user.js). That said, problems resulting from settings in prefs.js, user.js, etc., can manifest in different ways from breaking desired Firefox or extension functionality to causing web pages to not work properly or failing to load at all. Following is one method of troubleshooting preference issues for those who are not comfortable using the Firefox console, or where the console fails provide useful information. Though tedious, this method always works if the problem is a result of a preference. You should have a decent code editor with syntax highlighting for editing js files.

1. Start Firefox and enter about:profiles in the address bar.
2. Create a new profile for testing, naming it something like '__TEST__' so it cannot be easily confused with your default profile. The new profile will become the default and we don't want that, so click the button below your original profile to make it the default.
3. In the 'Root Directory' row, click the 'Open Directory' button for both your original and your testing profiles to open the folders in your file manager.
4. Start Firefox using your testing profile. It may ask which profile to load since you now have more than one, but if it doesn't then load about:profiles again and select the option to open your testing profile in a new window.
5. Now verify that the problem still exists, then exit Firefox. If the problem no longer exists, continue with the next step. If it does, troubleshooting the problem is beyond the scope of this troubleshooter, suffice to say that it may due to an add-on or custom CSS in your Firefox /chrome folder if you have one, etc..
6. With Firefox closed, copy (Ctrl+C) the prefs.js file in your original profile folder and paste it (Ctrl+V) in your testing profile folder, overwriting the existing one.
7. Repeat step 5. If the problem reappears you have verified it is due to a preference in the prefs.js file. If it does not, and you're using a custom user.js file, such as the 'arkenfox' user.js, repeat step 6 with your user.js. If it the problem now reappears, you know the trouble lies in in user.js, not prefs.js. If the problem is not reproduced then it is beyond the scope of this troubleshooter.
8. With Firefox closed, open the prefs.js file (or user.js if that's where the problem lies) from your testing profile in your code editor and select roughly half of the contents of the file, making sure your selection starts at the beginning of a line and ends at the end of a line in order to avoid further problems. Next, cut (Ctrl+X) the selection (don't just delete it) and save the file. If your editor complains it is important that you ignore the warning and force the save. If it automatically reloads the file, you will need to disable that behavior in its settings.
9. Keep repeating steps 5 and 8 until the issue disappears, at which point you know the preference causing the problem is stored in your clipboard (the last section you cut from prefs.js or user.js). Move on to the next step.
10. Select all of the contents in prefs.js (or user.js) (Ctrl+A) and delete (not cut) the selection, then paste (Ctrl+V) the contents of your clipboard and save the file, again being sure to force the save if your code editor complains.
11. Again, continue repeating steps 5 and 8 until you have narrowed down the problem to the single preference responsible.
12. Once the problematic preference is isolated you can copy it to your user.js file (or user-overrides.js file if you have one) in your default profile and change it's value there after which you can verify the problem was solved by running Firefox with your default profile.

Once you have solved the problem in your default profile, you can delete your testing profile from about:profiles or from the profile loading prompt when Firefox starts.

More Firefox stuff

Other articles i've written about Firefox and its derivatives can be found on the Everything Firefox page.

For more CSS tweaks, see:

• Aris-t2/CustomCSSforFx
• search GitHub for the 'userchrome' tag

General Firefox stuff:

• About:config entries - MozillaZine Knowledge Base
• Firefox - ArchWiki

Recent changes

2023-01-23

• edited 'Display website content hidden by JavaScript' section to correct an issue

Mozilla Firefox is a popular, extensible, open source (mostly) web browser that is highly configurable and easy to use. Somewhat bare out of the box however, its functionality is easily extended with free add-ons, or 'extensions', of which there are many thousands in the Mozilla add-on repository at addons.mozilla.org (AMO).

Beware

With so many "free" add-ons you might be tempted to install lots of them, however i would strongly suggest installing only those you need since the potential to break things and compromise browser security and your privacy increases with every add-on you install.

The Dangers of Browser Extensions

Another problem is unethical developers who include unwanted and unnecessary functionality which is not relevant to the primary purpose of the add-on. Often this results in data collection, tracking your web activities, injecting unwanted content in pages, such as ads, or worse, all of which i categorize as malware.

The problem of malware at AMO has grown exponentially as a result of a very flawed automated review process for add-ons and the company's move to the WebExtension API which made it easy for unethical developers who have infected the Google Chrome Store with their garbage to port their add-ons to Firefox. Indeed, probably at least half of the add-ons at AMO are sketchy and the majority of the remainder are essentially useless. Although the Web Extensions API is greatly limited as opposed to the older XUL/XPCOM extension API, tracking, data collection and advertising are permitted and, on occasion, far more dangerous add-ons escape detection, some of which are used by millions of people.

Add-on selection guidelines

You've been warned! Many extensions are accompanied by a warning on their AMO pages which indicates that the extension is not monitored by Mozilla and therefore is more risky to install. While monitored extensions -- those with a 'recommended' label -- are scrutinized more carefully and may be more trustworthy in general, many others are perfectly fine as long as you trust the developer and/or review the code yourself.

Tool-bar or FOOL-bar? Be very wary of tool-bar add-ons since many of these contain 3rd party spyware/malware components for monetization purposes.

Who the hell are you??? Always check to see what other add-ons the developer has created and how those are rated. Be wary when the developer is named as a company and not an individual, or when their name is generic, such as "Firefox user" followed by a random number. See what kind of content is on the developers website if they link to one and look for marketing hype or unethical activity. Also be wary of developers that make it difficult or impossible to contact them or submit bug reports.

The 0-day 'bonus'. Never install newly released add-ons from a developer whom you're not familiar with, especially if it's their only add-on. Mozilla uses a deeply flawed automated system to evaluate add-ons, so wait at least a few days until others have had a chance to review it or flag it for removal. If the add-on quickly disappears or gets poor reviews, be thankful you didn't take the bait.

When "free" isn't. Always check the software license and be wary of developers who use a restrictive license. Most ethical developers will use a liberal, free software license, such as the General Public License (GPL) or the Mozilla Public License (MPL).

'We care about your privacy' ... LOL. If an add-on has a privacy policy, read it and see what data the add-on may collect, where it's sent, and how it's used. In general, if the document is a wall of legalese, it's probably a rotten privacy policy. One of the best privacy policies i've run across is that written by the developer for the Stylus add-on:

Unlike other similar extensions, we don't find you to be all that interesting. Your questionable browsing history should remain between you and the NSA. Stylus collects nothing. Period.

Yes it can/no it can't. The Mozilla add-on website lists the permissions that add-ons require, though there seems to be some problems at this time in that all permissions used by an add-on may not be listed, or permissions which the add-on does not use may be listed, so don't trust this completely. That said, look for permissions that seem unnecessary given the expected functionality of the add-on.

What's under the hood? In general it's best to avoid developers that attempt to hide their source code. Most ethical developers will publish their work on platforms like GitLab, GitHub or Codeberg where people can submit proper bug reports and feature requests. In such cases there is usually a homepage and/or support link on the add-on page, or a link somewhere in the add-on settings, menus, etc., that leads to the code repository. If the source code is not published, you can still view it by decompressing the add-on or by using the excellent Extension source viewer (CRX Viewer) add-on.

You should always check is the extensions manifest.json file and you don't have to be a geek to do so. Open the address about:debugging#/runtime/this-firefox in Firefox (or just remember the address about:about from where you will find the debugging page) and click on the 'Manifest URL' link for the extension you want to inspect. What you want to look for are any network links for unexpected addresses. For example, an add-on like Maximize All Windows (Minimalist Version) only modifies the behavior of Firefox, therefore there shouldn't be any remote addresses in the manifest. On the other hand, an add-on like uBlock Origin needs to intercept traffic for every website you open, as well as be able to download fresh filter lists and so on, and so its manifest contains http://*/*, https://*/*. and <all_urls>. Other add-ons may be dedicated to a single website, such as BitChute, and so bitchute.com should be the only remote address in the manifest. Also see the Extension source viewer add-on below which can be used to view the source code.

He said, she said. Always read the user reviews to see how well an add-on is liked and be wary if it is rated 3 stars or less, or not rated at all, or was rated highly by only a few people. Sometimes a developer will be the first to "review" their add-on, giving it 5 stars. Regardless of the rating however, always check the comments of the people that gave it the lowest rating to see if their gripes seem legitimate (many aren't) and whether they were addressed. That said, there are many add-ons that have been rated very highly by hundreds or thousands of people that contain malware, so don't give too much weight to user ratings alone.

But everybody's using it! Many developers of hugely popular add-ons have been contacted by malware distributing 3rd parties wanting to buy their work or influence its development. Adblock Plus by Eyeo GmbH (Wladimir Palant) is used by millions of people, yet it is a glaring example of an unethical developer who created an "ad blocking" extension which allows ads by default. For larger entities, Eyeo GmbH charges advertisers 30% of the revenue from Adblock Plus users who click the ads, so not only does Adblock allow ads, it's also spying on its users and making a ton of money for the company. Giorgio Maone, the developer of the hugely popular NoScript add-on, engaged in similar chicanery a while back.

Should i or shouldn't i? If you're not sure whether you'll like an add-on, test it by downloading the .xpi file, then opening about:debugging#/runtime/this-firefox in Firefox and clicking the 'Load Temporary Add-on' button.

Automatic update MALWARE install. Automatic checking for add-on updates is fine, but always disable automatic installation of updated add-ons. Before updating an add-on, read the release notes to see what has changed and make sure the privacy policy, if there is one, remains strong. The problem with automatic add-on updates is that a developer may decide to monetize their work at any time and without warning, or sell their extension to an unethical party such as the developer of Stylish apparently did. Ingo Wennemaring, the much-liked developer of the once popular All-in-One Sidebar add-on, warned about this in a blog post:

It was always very important for me to be honest and fair to the users. I had very good offers to sell the extension, but I didn't want to see that AiOS turn into adware or spyware.

Have I got a DEAL FOR YOU! I would strongly suggest avoiding any add-on that asks for or requires personal information or other data which could be used to identify, track, or profile you, or which is designed around monetization. Such extensions include, but are not limited to, those which promote coupons, discounts and free services, certain automatic form fillers, any add-on which stores data remotely such as many password, bookmark and synchronization add-ons, cryptocurrency add-ons, banking and other financial related add-ons, website/service specific add-ons marketed by corporations and many VPN (Virtual Private Network) add-ons.

Hide and seek. Regarding VPN add-ons, there are 172 of them at the time of this writing and most of them are highly suspect, yet millions of clueless people use them. Furthermore, a VPN add-on for a web browser may protect only browser traffic while leaving all other network traffic unprotected, such as email and, potentially, DNS look-ups. If you want to use a VPN, and i would certainly recommend considering it, it should be incorporated at the system level or, even better, at the router level.

Add-ons

ClearURLs by Kevin R. [privacy/security]

ClearURLs automatically removes tracking parameters from clicked hyperlinks. This add-on is not needed if using uBlock Origin with the ClearURLs for uBo filter list (see the suggested settings for uBlock Origin page for more information).

Dark Background and Light Text by Mikhail Khvoinitsky [enhancement]

Dark Background and Light Text replaces Dark Reader as my preferred add-on for darkening the entire web. These 'darkify' add-ons, of which there are many, change the colors used by all websites to a darker theme and this one seems to be the best of those i have tested and i've tested many.

Caveats: All of these 'dark web' add-ons fail miserably in some cases and this one is no exception, however it seems to work better overall than all of the others i've tested and it does offer a few different styles that can be assigned to specific websites when the default style fails. Due to a shortcoming in the code, this add-on cannot be disabled for local content, such as paths beginning with file://.

Disable WebRTC by Chris Antaki [privacy]

Disable WebRTC adds a toolbar button to conveniently toggle several media.peerconnection.* preferences. Disabling WebRTC (Real-Time Communication over the web) is important for privacy reasons when using a proxy or VPN.

Enforce Browser Fonts by Jayesh Bhoot [enhancement]

Enforce Browser Fonts allows one to choose whether to use the fonts specified by the website, or those that you have defined in Firefox preferences (Language and Appearance). Personally i hate when websites override my personal font choices and this extension takes care of that. Enforce Browser Fonts defaults to enabled and will remember the websites for which you disable it.

Caveats: For the privacy minded who enable privacy.resistFingerprinting, forcing the use of your preferred fonts will increase the likelihood of your browser being uniquely identified. It can also uglify some websites.

Extension source viewer by Rob W [enhancement]

Extension source viewer is a handy and well thought out utility to quickly view the source code of a Firefox extension right from the Mozilla add-ons website without having to download and unpack it manually. The extension has the ability to search the contents of the files in the source code by prefixing the search with '!'.

Caveats: For advanced users.

Flagfox by Dave G [enhancement]

Flagfox is a neat utility that adds an icon to the address bar which represents the flag of the country in which the web server is located. When the icon is right-clicked, a context menu is revealed with many more tools, such as a WHOIS lookup, URL shortening services and more. You can also add your own services.

Caveats: If you choose to display the menu icons, they are not stored locally and have to be fetched the first time you open the menu which some might see as a privacy issue.

Format Link by Hiroaki Nakamura [enhancement]

Format Link offers flexible solutions for copying content and formatting it in different ways, such as HTML, markdown, plain text, , etc., before pasting it somewhere.. I don't like it as much as Link Text and Location Copier, however that add-on is unmaintained and buggy.

Caveats: Format Link is a little buggy and needs some attention, but it's still a better solution than Link Text and Location Copier. If you have trouble copying content, try pausing for just a second after initiating Format Link. I've found that if you switch tabs too soon, the content may not be placed on the clipboard.

LibRedirect by alefvanoon, ManeraKai [privacy]

LibRedirect redirects many websites, such as YouTube, Twitter, Instagram, Reddit, TikTok, etc., to alternative front-ends that are more respective of user privacy. While there are many such add-ons, LibRedirect is perhaps the best of them due to its many configuration options, its ability to automatically switch instances when a service is not responding, update the list of instances, add your own instances, etc..

Caveats: While most/all alternative front-ends are built with free, open source software and are more respective of user privacy, it is possible that those running the service may have modified the code to act in a malicious manner. Many/most of these alternative front-ends will work without enabling JavaScript however.

List Feeds by igorlogius [enhancement]

List Feeds detects news feeds (RSS, ATOM, etc.). Some time ago the M&Ms (Morons at Mozilla, corporate) decided to strip all support for detecting and reading news feeds at a crucial time when news feeds were never more important. Their excuse for doing so was a lack of money and user interest, however there is little doubt in my mind that this was done in order to sway people to get their news from "trusted" sources rather than independent journalists. List Feeds essentially restores and enhances the feed detection capability which Mozilla removed. Also see: How to access RSS feeds for websites that don't advertise one.

LocalCDN by nobody42 [privacy/security]

LocalCDN, a fork of Decentraleyes, can increase privacy and decrease page load time for many websites which depend on 3rd party Content Delivery Networks (CDNs). It accomplishes this by storing and loading several common JavaScript and font libraries locally instead of having to fetch them from the server.

From a privacy point of view, LocalCDN is not strictly needed if using the 'arkenfox' user.js or appropriate settings.

Caveats: Can break some websites, though this seems to happen very rarely in my experience. There are 'Filter HTML source code' and whitelist options to address such problems.

Mark-It by Matt [enhancement]

UPDATE: This extension is no longer available. I'm currently searching for a viable replacement. If anyone has any ideas,please  leave a comment.

Mark-It is a simple, handy add-on that replaces your new tab page with one that allows you to write notes in markup format. I find this add-on to be really handy for storing commonly used bookmarks, notes and text that i paste frequently in forums and such.

You could play with the CSS i use to divide the page into two columns for less wasted space, plus make some other changes. You'll need to open about:debugging#/runtime/this-firefox and replace <Internal UUID> in the first line with the the Internal UUID for Mark-It. If the CSS doesn't load, be sure toolkit.legacyUserProfileCustomizations.stylesheets is set to true in about:config:

@-moz-document url("moz-extension://<Internal UUID>/newTab/newTab.html") {
    /* display notes */
    html.dark, body.dark, textarea.dark {
        background-color: #252525 !important;
        color: #c8c8c8 !important;
    }

    #markdownTarget {
        width: 90% !important;
        padding-left: 1% !important;
        padding-right: 1% !important;
        font-family: unset !important;
        font-size: unset !important;
    }

    a {
        color: #97ff8d !important;
        text-decoration: none !important;
    }

    code {
        background-color: #000 !important;
        color: #ffa93b;
    }

    ul, ol {
        padding: 0 !important;
        margin-left: 20px !important;
    }

    #changeModeButton {
        background-color: #929292 !important;
        left: unset !important;
        font-family: unset !important;
        right: 33px !important;
        bottom: 90px !important;
    }

    #savingIndicator {
        bottom: 0px !important;
        left: unset !important;
        right: 0px !important;
    }

    /*columns*/
    .left {
        display: block;
        float: left;
        width: 49%;
    }
    .right {
        display: block;
        float: right;
        width: 49%;
    }

    /* edit notes */
    textarea {
        width: 90% !important;
        padding-left: 5% !important;
        padding-right: 5% !important;
        font-size: unset !important;
        font-family: unset !important;
    }
}

mozlz4-edit by Siarhei Kuzeyeu [enhancement]

mozlz4-edit allows one to edit, format and otherwise manipulate several types of compressed files including the search.json.mozlz4 file which is where Firefox stores all of its search engine plugins. If this is too much for you, try the Search Engines Helper add-on below.

Caveats: For advanced users.

Privacy-Oriented Origin Policy by claustromaniac [privacy/security]

Privacy Oriented Origin Policy (POOP) helps protect your privacy by preventing Firefox from sending Origin headers, though how it works is configurable.

Caveats: For advanced users. May break some websites, though it is easily disabled and sites can be whitelisted. There is a lengthy discussion about what led to the development of this add-on on GitHub if you're interested.

Redirector by Einar Egilsson [enhancement]

Redirector automatically redirects selected pages, links and more to another resource of your choosing. For some examples of how you can use Redirector, see the Redirecting this to that section of the Firefox Tweaks and Fixes and Styles and Things page.

Reverse Image Search by Andreas Bielawski [enhancement]

Reverse Image Search is a privacy friendly add-on used to find different versions of a given image using 3rd party services such as TinEye. Reverse image searching is a great way to find higher resolution versions of an image or to find when an image may have first been published to the web, the latter of which can be beneficial for researchers. Reverse Image Search also allows to add custom services to its menu.

Scroll Up Folder by Bruce Bujon [enhancement]

Scroll Up Folder adds an icon in the address bar that, when clicked, opens a list of the segments of the current document address. Clicking the list items makes it really easy to navigate up to a higher level of the address without having to manually edit it.

Search Engines Helper by Soufiane Sakhi [enhancement]

Search Engines Helper makes it really easy to add, import and export custom search engines for Firefox. It also allows using base64 code (data URLs) for the site icons.

Skip Redirect by Sebastian Blask [privacy]

Redirects sometimes happen when you click on a hyperlink expecting to go directly to the destination and, instead, your request is passed through an intermediary. Redirects are often used to track your browsing history or display ads before you are forwarded to the target domain. Skip Redirect simply tries to bypass this annoying behavior. I would suggest keeping the notification enabled when Skip Redirect does its thing as this makes it easy to troubleshoot a problem.

Caveats: May break the functionality of some websites in which case they can be added to a whitelist.

Smart RSS Reader by zakius [enhancement]

Smart RSS Reader is a well-rounded, multi-pane news feed reader and a pretty good one at that. There are a few little niggles with it, but overall it functions very well and the developer is friendly and open to suggestions. If you subscribe to multiple feed from the same domain, i might suggest setting the "Concurrent downloads:" preference to "1" in order to potentially prevent problems retrieving feeds.

While there is no dark theme option for Smart RSS, it does have an option to add your own CSS. Here's my CSS for a dark theme if you wish to use it. This works for the vertical 3-pane layout:

/*
 * Smart RSS Reader (v2.*) - dark theme for 3-pane layout |feeds|titles|content|
 */

/*
 * GLOBAL
 */
html, body {
    color: lightgray;
    background: #242424;
}
.context-menu {
    background: black;
}
.region:not(.focused) .selected {
    background: black;
}
a {
    color: lightgreen;
}
#properties {
    background: black !important;
}
#properties input, #properties select {
    background: #67ff91 !important;
}

/* 
 * TOP TOOLBAR
 */
.toolbar {
    background: lightgreen;
}
.toolbar > .button {
    border: 1px solid #242424;
}
.input-search {
    background: black;
    color: white;
}
input[type="search"] {
    max-width: 260px;
    width: 260px;
    border: unset;
}

/*
 * FEEDS PANE
 */
.has-unread .source-title {
    font-weight: unset;
}
.source-title {
    font-size: unset;
}
.source-counter {
    color: black;
    background: lightgreen;
}
.sources-list-item {
    font-size: unset;    
}
.sources-list-item.selected:hover .source-title {
    color: white;
}
#indicator-progress {
    background: black !important;
}
#indicator-stop {
    background-color: red !important;
}
#indicator {
    background: #242424;
    color: lightgray;
}

/*
 * TITLES PANE
 */
 .date-group {
    background: black;
}
.item-title {
    font-size: unset;
}
.full-headline > .item-title {
    white-space: break-spaces !important;
    overflow: hidden;
}
#article-list > .unvisited, .unvisited .articles-list-item-author {
    color: lightgray;
}
#article-list > .unread {
    font-weight: normal;
    color: lightgreen;
}
#article-list > .region:not(.focused) .selected {
    background: #242424;
    border-bottom-color: unset;
}
#article-list > .selected * {
    color: lightgray;
}
#article-list .item-author {
    color: darkgray;
    font-weight: normal;
}
#article-list .item-date {
    color: darkgray;
}

/*
 * CONTENT PANE
 */
#content h1 {
    color: #fdfdfd;
    font-size: 1rem;
    max-height: unset;
}
#content > header p {
    color: darkgray;
    padding-bottom: 10px;
}
#content > header .pin-button {
    opacity: 1;
}
#smart-rss-article-body {
    color: #c1c1c1;
    background: #242424;
    font-family: unset;
    font-size: unset;
    line-height:1.3;
}
#smart-rss-content > p > span {
  color: #c1c1c1 !important;
}
#smart-rss-content > .more-link {
    color: lightgreen;
}
#smart-rss-content-footer {
    border-top: 2px dashed darkgray;
    margin-top: 20px;
}
#smart-rss-content-footer a {
    background: #242424;
}

Stylus by Armin Sebastian [enhancement]

Stylus is used to write, store and inject custom CSS styles into websites, or even the entire web if you wish. Though you can use FireMonkey for this, working with Stylus is so much nicer. Note: Do not use Stylish, a similar add-on which the developer sold to an unethical party.

Caveats: For advanced users that have at least a basic knowledge of CSS.

uBlock Origin by Raymond Hill [privacy/security]

uBlock Origin is a superior content filter (or firewall, if you like) that can replace several other content/ad blockers including Adblock Plus/Edge, NoScript, etc.. It is capable of using the same filter lists as Adblock Plus/Edge as well as many more that they cannot. Two of the most welcome differences with uBlock Origin is that it does not slow page loading to any noticeable degree and it uses less memory then the competition. Another major advantage is that it can block both 1st and 3rd party requests for images, scripts and frames when configured to use its advanced mode. See my Firefox Configuration Guide for Privacy Freaks and Performance Buffs article for more information regarding uBlock Origin. Lastly, use only uBlock Origin by Raymond Hill and not any other ripoff.

Caveats: For advanced users. As with any content filtering extension, uBlock Origin has the potential to break website functionality until it is configured correctly.

Web Archives by Armin Sebastian [enhancement]

Web Archives makes it easy to find archived version of webpages. It is fairly configurable, though it does not have an option to add your own archive resources, nor does it have an option to send a webpage to an archive, however i find the latter unnecessary since the archive sites i use allow you easily archive a page if one isn't isn't found.

Enabling add-ons for addons.mozilla.org

By default Firefox does not allow add-ons to run on https://addons.mozilla.org/. if you want to override this behavior you can add the the following preferences to your user.js file or your user-overrides.js file if you're using the 'arkenfox' user.js:

user_pref("privacy.resistFingerprinting.block_mozAddonManager", true);
user_pref("extensions.webextensions.restrictedDomains", "");

Troubleshooting add-on related issues

See Firefox Tweaks and Fixes and Styles and Things.

Listing removed add-ons

While i'm sure there's a more geeky way of listing extensions which one has removed, this one works for me: In your Firefox profile folder, navigate to /extensions/staged and there should be folders with the names of the removed extensions. You can delete this folder if you like.

Doing it without an add-on

The fewer add-ons you install, the better, and there's a lot you can do to customize Firefox without add-ons. See the Firefox Tweaks and Fixes and Styles and Things page.

Enhancing privacy and security

See: Firefox Configuration Guide for Privacy Freaks and Performance Buffs or The Firefox Privacy Guide For Dummies!

Giving back

If you like an add-on, or any other free and open source software, please donate to the developer. Trust me when i tell you that most developers of free software usually receive little or nothing for all the days/months/years of hard work they invest and the support they provide. Developers are usually very appreciative of a donation regardless of how small it may be.

Recent changes

3-Mar-2023

• updates CSS code for Smart RSS Reader