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?

Now that we have an understanding of how to get around, we will go over installing software and the internet. We will only cover the minimum here, in the future we will go over email, Facebook, and other things.

There are a couple of programs we will be installing to get you up and running properly on the internet. These would be a web browser and a firewall.

An Overview

The internet is, in its most basic form, a connection between computers. These computers can send data between one another. For our purposes your computer and a web-server will be communicating.

These servers hold the data that makes up websites and other things that you download.

Why access this data? For many reasons: The Internet holds vast amounts of information from encyclopedias to movies and games, you need to know how to use it effectively to hold a job and there is much fun to be had as well.

Getting Online

Wireless Icons

Wireless on the Left and Wired on the Right

Before you can do anything related with the internet you need to be connected. In the notifications area you should be able to see your connection status and if you are not connected, connect to a network. The icon for this will very depending on whether you are using a wired or a wireless connection.

If you are connected by Ethernet then you have nothing more to do, but if you are using wireless you will need to click the wireless icon. A new menu will appear showing all available networks. You will need to click on the network that belongs to you and enter the password for it.

If you do not know the password it may be on the router that you are using. A router is a devise that routs wireless connections, either your service provider sent you one or you will need to buy one to get wireless.

Now we have one more step, that is open up a web browser. We will be using Microsoft Edge at the start of this tutorial, but will be changing that really soon. There are multiple ways to open Edge, the ‘e’ icon that is on the task bar and start menu, in the start menu you can click all apps and find “Microsoft Edge”, or you can open the start menu and start typing “edge” and hit enter when it appears.MS Edge

Getting Around and Installing Better Programs

Now there are a couple of things you can do now; you can check the weather, make a Facebook account, or watch a movie, but we will be getting a new web browser and an anti-virus.

“Why do I need another browser?” Though Microsoft Edge is far better than what Microsoft had in the past, it is not powerful and is completely controlled by Microsoft. As said previously, we want to keep dependence on them to a minimal.

There are much better options out there than Edge, the two I recommend are Firefox and Google Chrome. This depends on your philosophy and how much power you wish over your browser. Firefox is founded on the principle of privacy and freedom to control the browser as you see fit. Google Chrome is controlled by one of the largest data collection organizations in the world, who just so happens to control a large amount of the internet. With Chrome you do not have control like in Firefox and privacy is questionable, but you have full integration with Google’s services and an easy to use interface.

I will be using Firefox for this tutorial, but the same principles apply to both browsers.

In the search box, the box on the top of the page, you should type wish to find, in this case “Firefox”. A web page should appear with a list of search results. Click on the blue text “Firefox Web Browser – The Official…”, this will take you to the Firefox website. There should be a button that says “Free Download”, click it.Firefox Bing Search

At the bottom of Edge there should be a download status that gives you information on the download.

The first thing you wish to do once the file is downloaded is click “Run”. You will see a green extraction bar and then a warning asking if you would like to run the file, say yes.

Installing Firefox

The installer is a fairly self-explanatory, click next once it opens. You are then presented with options for a Standard or Custom install. For most programs you will want to do a Custom Install when it is an option, as some software will do undesirable things to your computer unless you disable them. Firefox will not do said things, but it is best to get in the habit of doing things this way.

7 Firefox_Install_0

Next you will be asked where you wish to install the program. You are best leaving this alone, but take note how things are set up. You are given the folder that the program will be installed into, how much space is required for the program, and how much you have on your hard drive.8 Firefox_Install_1

The next option given you is to install the “Maintenance Service”, you will want to have this. You should always have your software up to date, this keeps it secure and keeps you from getting a virus.

There will also be the options to have an icon on your Desktop and in the Start Menu. You will want to have the start menu, but there is no need for a desktop icon as we will have a quick launch icon on the task bar shortly. Thus you will want to uncheck the desktop option.

You will be given a summery of the installation, where the program will be installed. All you need to do is click “Install”.

A green progress bar will show you how things are going and then you can just click “Finish”. Firefox will start automatic unless you unchecked it.Firefox, Gateway to the Internet

Follow similar steps if using Google Chrome.

Firefox and the Internet

You are finally here, you have a competent web browser and are connected to the internet. Now there is some simple setup needed for Firefox.

11_Firefox_Search_OptionsWithout a little work, Firefox is not as powerful as it could be. So we need to go into the menu and click on options. This menu is on the far right of the browser, just under the close button. Within the options you will find a tab that says Search, under that tab you will have the option to change search engines. You will want to change it to Google under the drop down list that says Yahoo. Just click on the button and it will open this list, then click Google. Yes, that Google.

Then you just close the options by clicking the ‘x’ on the tab that is in the top of the browser. These tabs will become very important in the future.

Windows comes with a simple Firewall and anti-virus, but they are rather simplistic and lacking in some areas. If you are comfortable with that, you are set for the internet. However we will be covering anti-virus software in our next article.

Sadly our short attention span culture means that this website would suffer if I continue here. Keep an eye out for our next step, installing an anti-virus and exploring the web.

Firefox has experienced a major update with built in chat and a new search box. Some of you may find the new search box inconvenient if you use multiple search engines regularly, fortunately there is an easy fix to the problem.

To use the old search box in Firefox in version 34 or higher you will need to edit the configuration settings.

Type about:config in the URL bar to see Firefox’s settings. Hit “I agree” If prompted.

There should be a search box on the top of the page type this into the box:

browser.search.showOneOffButtons

Set the setting to false by double clicking it or right clicking and hitting Toggle.

After resetting Firefox the search bar should act like it did in earlier versions of Firefox.

 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

 

I use a lot of programs between multiple computers. Most of the time these computers have different operating systems so I need cross-platform applications. Open source programs have come a long way over the years and no many can compete with commercial software. I use open source software because it is cross0platform, usually light weight, and it is free. I use these programs on both my dad’s Windows Desktop and my Linux laptop.

Firefox (Web Browser)

Firefox is light weight and extendable. I have been using Firefox for as long as I have been a using open source software. It’s extendability is key, it has all the tools I could ever need. It is also more secure than internet explore and I dislike that Google Chrome is spying on you every second. If you are using internet explore I strongly advise you to try Firefox.

Thunderbird (Email Client)

I use Gmail for email service, but I do not like to use the web interface. Thunderbird is as extendable as Firefox and has a great spam filter. It is easy to set up custom filters to organize your mail for you and you can be logged into multiple email accounts at once. Also I download all of my emails so that if the internet is down or Google goes down, I will still have all of my emails. If you use multiple accounts, want better organization of emails, or hate Microsoft Outlook I can not recommend this enough.

LibreOffice (Office Program)

I would never use Microsoft Office if my school allowed me to run this on the computer lab computers. It is fast, extendable, and almost as powerful as Microsoft Office. I will grant that Microsoft office can handle bigger files better and is better for enterprise publishing, but LibreOffice is free and strong enough for anyone short of a major publisher. LibreOffice is much cheeper than Office, with a price tag of free, and can open all of Microsoft’s formats. If you must you can even save your work in Microsoft’s formats. It comes with everything you need: a word processor, a presentation maker, and a spreadsheet program. The best part is that it doesn’t have that horrible ribbon interface.

WINE (Windows Compatibility Layer)

Wine Is Not an Emulator (WINE), is a compatibility layer for windows programs running on Linux. I love open source programs, but sometimes you need a commercial program to do what you need. Most of these programs are Windows only, but I use a Linux environment most of the time. Wine allows me to run these programs. It may not be perfect, but it gets the job done most of the time. I usually use it to run games rather than work related programs, but I use it when making my RPG Maker XP game.

When away from home I usually have a copy of all, excluding Wine, on my USB drive. I hope you find these programs helpful and merry Christmas.