Millarian

Firefox is my development browser of choice. With Firebug, Web Developer and ySlow, what more could any developer want? It is also my personal browser of choice and when I’m not developing then I don’t really need all those things, right? For personal browsing they will only slow things down. I suppose I could disable them every time… but no! There’s a better solution and it’s called Firefox Profiles.

Firefox profiles allows you to create multiple personas to use when starting Firefox. If you have Firefox, then you’ve already been using Firefox profiles, you just didn’t know it. Most people will probably only need the default profile and will never create others, but for web developers this is a must. So what do you do? It’s easy.

On your Mac (go here for Windows/Linux instructions), simply execute the following from the command line:

/Applications/Firefox.app/Contents/MacOS/firefox -profilemanager

A Firefox profile chooser will appear (it may appear behind your terminal window). This is where you manage your profiles. From this screen you may create, rename or delete profiles. There is also a checkbox that allows you to specify that the profile chooser should be consulted when starting Firefox. That’s not such a big deal. If you’re like me, you open Firefox from the Dock and the icon only allows a single instance. That’s okay, we’ll get around that in a second.

So, now you need to create some profiles. Here are the profiles I currently have:

• Personal – This was originally the default profile; it has my personal stuff on it and of course Nads :)
• Test User – A plain, vanilla Firefox instance; no extensions. This is what I use mainly for testing web applications. I didn’t have this one at first and had simply split personal from development. After seeing some strange behavior with applications when Firebug was installed, I decided I needed a profile that has no extensions to use for testing.
• Debugger – Firefox with Firebug, Web Developer, and ySlow. This is what I use for development.

Firefox will keep these profiles separate, so if you want extensions in the new ones you will need to add them yourself. And don’t forget to remove all those unnecessary extensions from your personal profile. It will speed it up and get rid of that occasional Firebug interference (tabbing and return not working, etc.).

Now, how do we start multiple instances of Firefox? The way I do it currently is through a command line alias. This alias will open the Firefox profile chooser and then you’re off. To do this, you need to edit your .bashrc file. This file resides in your home directory. Open it in your favorite text editor, or if you don’t have a favorite then allow me to walk you through using vi. From the command line type:

vi ~/.bashrc

This opens the vi text editor. Type the letter

i

alias f='/Applications/Firefox.app/Contents/MacOS/firefox -profilemanager'

Press the Esc key to exit input mode. Type

:wq

. ~/.bashrc

f

Hopefully this makes your personal browsing and web development more enjoyable!

While creating Nads I perused the source code of Firebug and noticed a directory called iBug. What lies within you ask? Why Firebug for the iPhone of course.

It seems that iBug is a small webserver that you run during development. Placing a snippet of code into the head of pages you want to debug results in the page sending your log messages to the webserver, which forwards it into the Firebug console. Joe also says it accepts requests from the browser and sends them to the iPhone for processing. Very cool!

Yesterday, I desired to learn more about building an extension for Firefox. It seemed like it would be something worthwhile to check out. I decided that I would try to create something small, just to see the process behind creating one and get familiar with the technologies used in the implementation of the extension.

Firefox extensions are implemented in XUL and JavaScript. I found the information on the Mozilla developer site to be most helpful while playing around with this; especially the tutorial and FAQ. I also downloaded and perused the Firebug source code to use as an example of how to add an item to the statusbar, etc.

Update: I forgot to link to another great tool that I found useful during the development of this extension. It is called Extension Developer’s Extension.

The small project I decided to attempt for this first extension was based around modifying DOM objects from the Firefox extension. Basically, I wanted to be able to hide ads on a page by enabling the extension. In this way I not only create an extension to Firefox, but also learned how to manipulate the content in the browser through the extension. I called it Nads, short for No Ads. This is by no means a great extension, but it taught me quite a bit about how to create a Firefox extension.

Licensing

Nads by Curtis Miller is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.

That being said, you may download the code from my subversion repository:

http://svn.millarian.com/svn/nads/

Installation

If you want to install Nads, just click on the link below. It should follow the standard installation procedure for a Firefox extension. You may see a Firefox message that tells you Firefox prevented the site from installing the extension. If that happens, then click the ‘Edit Options’ button and add millarian.com to the list of trusted sites. Then click the installation link again. This is a necessary part of the installation procedure.

If you want to remove millarian.com from the list of trusted sites after installing, just go to the Firefox preferences window (On Windows => Tools | Options) and click ‘Security’. Click the ‘Exceptions’ button next to the checkbox labeled “Warn me when sites try to install add-ons”. Select millarian.com in the list and click ‘Remove Site’.

After you install the extension, it will ask you to restart Firefox. When Firefox is back up, you will see an orange asterisk in the lower right corner of the screen on the status bar. If you don’t see the status bar, it may be disabled. Click View | Status Bar to enable it. The orange asterisk indicates that Nads is currently turned off. Clicking on the orange asterisk will enable Nads (and make the icon yellow); clicking again will disable it. You can turn it on or off as you like and it will retain that preference in the current window (across all tabs). Upon closing Firefox or opening a new window, the preference again defaults to off.

After you install, try it out on Google, Yahoo!, Techcrunch, etc. Admittedly it does not work for all ads, but it catches a fair portion.

Install Nads Now!

Contribute

Since this is my first Firefox extension, I am really interested in hearing ideas to improve it. I would like to see the implementation change to account for more ads without resorting to manual addition of the ad class or id. I found that on some sites, ads are simply smashed forcefully into the page and don’t have an id or class. In these cases, Nads will not remove them. Ideas for how to solve this problem would be greatly appreciated.

Leave your comments below or contact me using the information on the about page.

If nothing else, I hope this can serve as a starting point for other people interested in learning a little about extensions in Firefox.