With the introduction of Firefox Quantum, Mozilla removed support for legacy XUL extensions in favor of Web Extensions. This naturally made a lot of people angry. XUL extensions had full control over the browser and could change everything from how downloads where handled to the user interface. This powerful framework gave Firefox what many seen as a competitive edge. Extensions this powerful came with some shortcomings, however, and this lead to the adoption of Web Extensions in Firefox.

The Problems with XUL Extensions

We already established that XUL is powerful. Many of the most popular extensions, Classic Theme Restorer for example, are written in XUL. They are able to change most aspects of the browser, make complex themes, and essentially rewrite parts of the browser. This comes with some inherent risks:

  • Extensions are single processor.
  • Updates can brake extensions.
  • Extensions can break browser functions.
  • Extensions are not sandboxed.

Image: Firefox Quantum with Web ExtensionsXUL Extensions are powerful, but are unstable. If Mozilla wanted to add a new feature or change a function in Firefox, they would risk breaking popular extensions. This held Firefox back and kept Firefox from developing much needed features such as multi-processor support and tab sandboxing. Imagine a tab crashing and your whole browser crashing in the process, not very fun. Powerful extensions that could change every aspect of the browser are not secure, break things, and keep the browser in the past.

Very few extensions actually needed XUL to function and the technology was putting Firefox behind other browsers.

Web Extensions

Web extensions are written in HTML, CSS, and JavaScript. These extensions are written in the same languages as the web and have some advantages over XUL:

  • Extensions are more secure.
  • Extensions are unlikely to brake.
  • They can run in their own process.
  • Web languages are more accessible to developers than XUL
  • Extensions are cross-platform

Web Extensions cannot change core browser features. This is a mixed blessing. They cannot add a sidebar or give you a debug console for example, but by the same token they are not able to hijack core functions of the browser and are unlikely to change something that will get updated. That said malicious extensions do exist and they could break with an API update. Firefox can now develop much more rapidly without breaking things.

These extensions come with a new Firefox built to handle the modern web. The browser can now handle multiple processes. Tabs no longer bring down the rest of the browser with them and run in their own sandbox. Undoubtedly Quantum is a faster browser. Firefox would have continued to lose its market share without these improvements. How can the “Browser with a mission” complete that mission without users, funding, or developers?

The Future of Firefox

Web Extensions are likely the future. They may not be nearly as powerful as legacy extensions, but the benefits outweigh the downfalls. Most other web browsers use web extensions, implementing the API allows for cross-platform extensions, greatly expanding Firefox’s plugin library. Chrome, Opera, Vivaldi, and others all use the same underlining technology.

Mozilla has not just been copying other browsers. They know that web extensions lack functionality and have enhanced Web Extensions. Extensions in Firefox are far more powerful than in their competitors. The move away from extensions has also prompted the idea of making the browser more powerful out of the box. New ideas and built in features will come with time.

Firefox is one of the few major open source browsers with power to shape the web. Firefox is still one of the most customizable browsers online, even without the power of XUL extensions. The commitment to privacy is commendable, but now Mozilla has something to back up their ideals.

You can find out more about web extensions from Mozilla’s website and learn how to write your own here.

Aside

Will I still be using Firefox? Perhaps in the future, but for now I will be using Vivaldi as Firefox matures. Firefox’s sidebar is half-backed; the UI is customizable, but limited; and the built in features do not compare to Vivaldi’s. Firefox is a good browser, Mozilla is improving, and they have a future. Bad marketing decisions and deals aside, Firefox is an open source browser that respects your privacy.

Earlier we mentioned how to customize Firefox. Personas are like wallpaper for Firefox and give some basic customization, but what if you wanted to make your own instead of using the ones provided by others?

Fortunately you can with some photo editing and a Firefox addon named Personas Plus. This little addon will give you the ability to create your own personas.

Creating the Persona Images

Custom Persona

My attempt at making a persona.

To start you will need some images to use as the Firefox Header and Footer. The header is the image that is displayed at the top of your browser, behind the toolbars and tabs. The footer is the image used for the addonbar at the bottom of Firefox. These two images should be simple as to not interfere with text.

The files have specific requirements:

  • Header: 3000px x 200px, PNG or JPG format, 300 KB maximum file size.
  • Footer: 3000px x 100px, PNG or JPG format, 300 KB maximum file size.

You can use your favorite image editing program to crop larger images to size if you wish or make your own.

Persona Plus Settings

Persona Plus SettingsNow that you have your images, you will need to install Personas Plus. You should find an icon for the addon on your toolbar. When you click on the icon a menu should appear with the option to edit a custom persona. This will give you a menu where you can chose your header, footer, text color, and accent color. Make sure that your colors do not conflict with the persona you made as this will be the text color for the toolbar.

Now you you can have a unique theme for your browser. There are more complicated ways to make and edit Firefox themes, but that would require some css. Perhaps we will touch on it in the future.

The reason we chose Firefox as our web browser in the Introduction to Computers series is due to its great customization features. By using Extensions and Personas we can make Firefox our own. Make sure that you have the program installed before continuing.

Personas: Firefox’s Skin

The easiest way to customize Firefox is with a Persona. These are similar to wallpaper on your desktop, but cover the browser toolbars. You can find them on Mozilla’s Firefox addons site under themes. To apply a Persona just click the “+ Add” button. You can also test a theme without installing it by hovering over it with your cursor. Persona ExampleIn the past Firefox had a much more powerful theme system that could change the whole layout of the browser. Due to some unfortunate design decisions they have simplified the system and made it more difficult to achieve system wide changes.

If you would like to know how to make your own persona you can, we will go over how to do so in a future tutorial as it will require some image editing.

Extensions: Make Firefox Better

Firefox is rather powerful on its own, but some things that should be default are not and some things need to be fixed. This is where extensions come in. These are bits of code that add functionality to the browser. All of the extensions that are peer and Mozilla reviewed, if something is bad it will not stay for long if it ever gets approved in the first place. You should not install addons/extensions from untrusted sources.

We will go over some of the most useful and fun extensions in this article.

Adblock Plus/uBlock Origin

Disable AdsMost websites make money using ads, without them we could not afford to keep in business. There comes a time, however, when ads are obnoxious or even harmful. Video ads, animated ads, scams, etc. Ads slow down your browsing experience. These two extensions are the most known and respected ad blockers around. Either one will work, but Adblock Plus has had some shady deals with advertisers and has some issues with high CPU usage.

If you chose to install Adblock Plus, disable “Allow some non-intrusive advertising” option in the options.

Also consider adding us to your browser white list by clicking on the extensions button and clicking “disable on this domain”

You can add either one by simply clicking the “+ Add to Firefox” button.

Classic Theme Restorer

Classic OptionsI have already gone over this extension in the past. Remember how I said that Firefox use to be more customizable? This plugin gives some of that customization back. You can change the style of tabs, the menus, and more importantly the search box. One of the biggest issues with the design direction in the newer Firefox is the search box functionality. The decision prevents you from quickly switching between search engines in favor for one click searching. In the Classic Theme Restorer options you can set the behavior back to a more useful state.

Stylish

Keeping with the theme of Customization, Stylish allows you to to theme websites with custom CSS. Basically personas for websites. If you find that a website is too light or has a bad color scheme, you can change it yourself or in most cases find a theme that someone has already made for you. Though it is mostly cosmetic, it is useful to have and will surprise your friends when Google looks different.

Greasemonkey

Moving away from cosmetics and into functionality, Greasemonkey is the Swiss Army Knife of extensions. It functions similarly to Stylish. By itself, Greasemonkey is useless, but by applying userscripts you can change anything on the web. Userscripts are like mini-extensions written in JavaScript. Some auto-load the next page on Google, wist others change the way Facebook works all together. You will have to work at this one for it to be useful, but useful it is.

VimFx

VimFx brings Vim-style keyboard shortcuts to Firefox. It is a bit complicated to go over in this article, but keyboard shortcuts make everything faster. With VimFx, pressing “x” will close a tab, “t” will open a new tab, “o” will activate the search bar, and “i” will disable the shortcuts. The extension is not perfect, you cannot exit insert mode when on YouTube as it has its own shortcuts for example, but VimFx provides great shortcuts that will save anyone time.

Firebug

Firebug allows you to make live changes to a website’s source code. This may sound a bit complicated to a normal user, but it is very useful. Some website will have full page ads that block content and do not go away even with ad blockers for example. You can disable the ad by erasing the line in the source code or adding a new CSS rule. It is also useful for web developers and designers when mocking up website changes.

Disconnect

Most websites track you. Ads track you, Facebook, Amazon, even my website has some trackers. Sometimes they are harmless, just to keep you logged into your account. Often they are malicious. Amazon and Facebook do not need to know that you are looking into buying a computer and that random Chinese advertising agency does not need to know that you are talking to your grandma on Facebook. To help prevent these issues Disconnect blocks the invisible tracking elements on websites. This will often speed up website load times as an added benefit. Remember, you should never need to sacrifice privacy.

Add to Search Bar

Have you ever been on a website or custom search engine and wanted to search with it directly from the search bar? Unfortunately very few web browsers have a way to easily customize your search engines. Fortunately this extension gives you the ability to add any search box to your search engine list. If you are a student you can finally add that search database that your school uses to Firefox.

We hope that you have found this article helpful. What web browsers do you use?

 If you are anything like me, you probably do not like the new look Mozilla created for Firefox 29. Fortunately there is a way to change it back. All that you will need is a simple add-on and a two line CSS edit.

Classic Theme Restorer

The first step will be to install the Classic Theme Restorer (Customize Australis) add-on by Aris. This add-on is still in beta so it may contain bugs and we can expect updates in the future.

Once you install it you should go to the Add-ons Manager and find the add-on. Under its preferences menu you are given many options. Some of the basic options I recommend selecting are: Star-button in urlbar, movable status-bar panel, combine stop & reload buttons, and Hide add-on bars close button. There are many more opions available and I recommend that you try them all out.

The next thing to do is move your icons where you want them. Once you have customized everything to your liking you can right click the customization button and remove it from the screen.

CSS

Something that you may have noticed was that the Classic Theme Restorer does not give you the option to edit the height of tabs, only the width. The size of the tabs in Firefox 29 are a bit large for small screens, especially if you use toolbars. To fix this we will use a little CSS.

The first thing we want to do is find our Profile folder. The location of the profile folder depends on your Operating System. You can read this page to find out where it is on your OS.

Mine is located at: /home/mlamont/.mozilla/firefox/o5meaoc7.default/

Once you find your profile folder we need to make a new folder named chrome. Within that folder we are going to make a new text document and name it userChrome.css. If you are using Linux, remember that Linux is case-sensitive. Now open the new file with the text editor of you choice. We are going to type the following:

@namespace url(“http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”);

#TabsToolbar { height: 15px !important; }

You may change “15px” to anything you want, but it is a good size.

Now we are done. If you know basic CSS you may want to do some more tinkering with the .CSS file.

I use Firefox as my default browser on all of my computers. Google Chrome is more popular nowadays, but Firefox has a solid extension library and I never had any problems with it. The extension library is one of the reasons I use it over any other browser. Here are some to the extensions that I have found most helpful.

Adblock Plus

The most popular Firefox extension (it is available for Google Chrome as well), Adblocck Plus blocks advertizements. You can create whitelists so that you can support the websites you love, without getting bombarded with excessive ads on other sites. Ads have their place; but if a website has five ads per page or has some improper ads, then it is good to save your bandwidth and block the ads. Ads help keep the sites you love online, so please consider whitelisting them.

Add to Search Bar

Have you ever wished that you could add a new search engine to Firefox with a few clicks? This little extension allows you to. I use a lot of different websites and need to search them easily. I could use a custom Google search, but that adds more steps than necessary. There are other ways to add custom search engines, but I find that this does it the best.

Firebug

Firebug is a web development console for web developers. You can quickly view and test HTML and CSS code. This is a must have for web developers and is a fun toy for anyone who would like to play with the source of web pages. For kids it is a great way to show off your fake “hacking” skills.

FoxLingo

This is not the most popular or lightweight translator for Firefox, but it is rich in features that would be helpful to anyone working internationally. It had built-in support for many online translators and has instant dictionary look up for words you do not know. The only problems with it is that it is by no means lightweight and it attempts to get you to install other extensions along with it.

HTTPS-Everywhere

With more websites offering HTTPS you would think that the web would be safer, however most websites connect you to HTTP automatically. HTTPS-Everywhere connects you to HTTPS whenever it is available. There are other extensions that do this, but they can be slow or even prevent you from connecting to websites that only provide HTTP. Unlike extensions that search each website for HTTPS, HTTPS-Everywhere has a whitelist full of websites that offer HTTPS. This white list allows you to connect to websites that only offer HTTP and keeps you from having to scanning each site you go to.

Social Fixer

I hate having to use Facebook. It would be a simple mater of not logging in if not for the fact that most of my contacts use Facebook for their main form of communication. Social Fixer gets rid of many of the annoying things in Facebook while adding in some useful features of it’s own. It can help filter your news feed, reorganize the look of Facebook, and many other optimizing features. If you use Facebook, it is strongly recommended that you use this extension