Comprehensive Guide on Firefox Customization

Firefox is a great browser for many reasons, but one of the most important reasons is how it can be customized. Mozilla has worked hard to ensure the latest versions provide options and features you won’t find without add-ons in other browsers. By making these available by default all users can have the same access without the hassle of installing extensions that may cause compatibility or security concerns. Here we will review all built-in customization options you have when Firefox is installed on your system out of the box:

You can change the items that appear in the menu or your toolbar. to do so, click the menu button located on the top right side of your borwser window and choose Customize.

A special tab will open which allows you to drag and drop items in or out of the menu and the toolbar. Feel free to experiment with what works best for you. You can always start over by clicking the Restore Defaults button at the bottom of the screen.

When you are done, click the green Exit Customize button.

To turn on the Title bar:

Click the menu button new fx menu and choose Customize.
Click the Title Bar button in the lower left.
Click the green Exit Customize button.

To turn on the Bookmarks toolbar:

Click the View menu at the top of the screen, go down to Toolbars and select Bookmarks Toolbar.

Control The Awesome Bar With Keyboard Shortcuts

The Awesome Bar is the primary search field within Firefox. One way to change what appears is to know and use keyboard shortcuts which customize Awesome Bar’s behavior. Here’s the current list.

^ to search in your browsing history
* to search in your bookmarks
+ to search in pages you’ve tagged
% to search in your currently open tabs
~ to search in pages you’ve typed
# to search in page titles
@ to search in web addresses (URLs).

Let’s say you want to search for FOO within your bookmarks and only your bookmarks. To do that you would simply enter FOO * in the Awesome Bar. Note the space between the * symbol and what you’re searching for. This is important; the feature won’t work if the space is not included.

You can chain these together for even more precise results. Entering FOO * Android #” would show you only FOO bookmarks with Android in the title, for example.

Further Customize Awesome Bar With Tags And Keywords

Another way to control the Awesome Bar is through tags. Tags can be added to any bookmarked page when you have it open by clicking on the blue bookmark star in the toolbar (assuming you have not removed it, of course). This will open a field that shows, among other things, the tags. No tags are assigned by default.

Tags appear in the Show All Bookmarks window and are great for categorizing information, but that’s not their only feature. Tags also impact how items appear in the Awesome Bar. Let’s say your planning a big dinner for your family and want quick access to recipes you’ll be using. Just bookmark them and tag them as “family dinner” and they’ll appear every time you search for that term.

Extend %s Hack

The %s hack, also known as smart keyword, provides a tremendous degree of freedom for customization and is extremely powerful. To make it even more flexible it should be extended to three cases:

keyword only = replace %s with an empty string,
keyword plus option = replace %s with option string,
keyword only but marked text in the website = replace %s with marked text (the option string should have a higher priority than marked text).

This would extent all the wonderful search options to the text within the website so that copy and paste can be avoided.

Exclude smart keywords from autocomplete when entered as first word in address bar. Or even better suggest recent smart keyword invocation by autocomplete. The same note was added to autocomplete section.

Even more

The default customization options presented by Customize window and preferences get you started, but they are really basic in my opinion. about:config has some other built-in options beyond what is presented in official menus but they can only do so much.

The power of Firefox customization mainly comes from how extensions are able to add totally new functionality to the default layout. Some extensions are there just to do one thing, for example to add a button to context menu that closes the current tab. Others, like Classic Theme Restorer (Customize UI), provide plenty of additional options on how the UI behaves.

Often already existing extensions can provide all the functionality one wants, provided they can find one that suits their needs. But what if you need/want to create something totally new? Getting into building a real extension may be a bit much for starters.

I think learning CSS and the structure of Firefox UI is kind of good starting point. Not too hard, but you can do pretty much just with that. For this there are two in my opinion essential extensions, Stylish and DOM Inspector. I’m not sure how up-to-date userstyles.org is anymore but it was my starting point.

Userstyles are basically CSS snippets that modify the looks of the UI and by assigning additional rules to them. Stylish is an extension for managing and writing userstyles. Of course, to write your own rulesets you have to know what elements to target, this is where DOM Inspector comes in. It provides a way to look at the Document Object Model (DOM) and data about all it’s elements.

So by looking at the CSS rules of different userstyles and trying them to see how they affect is pretty good way to experimentally learn something. Just bear in mind that plenty of userstyles are written for outdated versions of Firefox so they may not work correctly anymore, but In my experience trying broken userstyles doesn’t break anything permanently. CSS documentation can be found all over the internet but Mozilla Developer Network has been invaluable for me at least.

But you can’t add new functionality with just CSS. For that you really need an extension. Perhaps you need a button that does something the default buttons don’t. You could try to find some extension that provides that, but if it’s some very specific thing one might not exist.

But writing real extensions needs some amount of knowledge about JavaScript as well as APIs that Firefox provides. Thus, I would recommend playing with existing extensions and userstyles first, and after you are somewhat familiar with Firefox DOM you can try writing extensions too.

Customize the menu or the toolbar

Turn on the Title bar or Bookmarks toolbar

Control The Awesome Bar With Keyboard Shortcuts

Further Customize Awesome Bar With Tags And Keywords

Extend %s Hack

Even more

References: