If you are a web developer, virtual hosts is probably something you already use, if not, you should.

Virtual hosts allow you to have multiple domains configured in your computer so you can have different web sites in different locations on your hard drive and keep your environment better organized when developing. Virtual servers are also used by shared web hosting companies to host multiple web sites in the same machine, the difference is that they deal with a bunch more stuff that I am not going to deal with in here. This guide should only be used to create virtual servers for local development.

I am currently using Ubuntu 11.04 (Natty Narwhal) but I am pretty sure the instructions are the same for other versions of Ubuntu. Other Linux distributions not based on Debian have a slightly different folder structure, but you should be able to adapt this guide easily.

I am going to explain how to make a very simple hello world application using Zend Framework. While doing this I am going to try to explain how Zend Framework manages MVC.

Folder structure

Zend Framework uses the Front Controller pattern on its implementation of MVC. This means that all calls to your website are managed by one file and this files routes to a correct controller based on the URL of the call.

For this example we are going to create a folder for our application: /home/adrian/www/hello. Inside that folder we need to create three folders: application, library and public.

Changing the color of a tab on a Firefox extension is a very straight forward task. You can use this code to change the color of all the tabs on a window:

1
2
3
4
5
6
7
8
9
var tabbrowser = window.getBrowser();
for (var i = 0; i < tabbrowser.browsers.length; i++)
{
    tabbrowser.tabContainer.childNodes[i].style.setProperty(
        "background-color",
        "#0f0",
        "important"
    );
}

If you don’t provide the third argument “important” you won’t be able to override the browser default and therefore you wont see your change.

This post is a continuation of Detecting when a tab or window is opened on Firefox post. We are going to be using what we did on that post as a base for this one.

Introduction

Continuing with the development of my Firefox extension, this time I am going to attach event listeners to the current tab so I can override its behavior.

I will first check if the tab matches the domain of the application, and if it does I will add an event listener to a button that I know exists on the page to do what I want it to do.

Approach

We are going to listen for location changes on our windows. For that we are going to use a progress listener that will notify us every time the location bar of our window changes. This happens every time a new tab is opened or every time you change the current tab.

This post is a continuation of using Firefox preferences to store data post. We are going to be using what we did on that post as a base for this one.

Introduction

For the ones who don’t know, these series of posts about Firefox extensions development is inspired by a need to fix some issues on a tool I use at my current job.

One of the problems with this tool is that it doesn’t allow to work on multiple tabs or windows in the same browser at the same time. Doing this could cause that when you save something on one tab the other tab is affected and your data could be corrupted. What I will do to avoid data corruption is check if there are two instances of the application open, and if so, I won’t allow to save until there is only one left.

This post is a continuation of  Adding an icon to our Firefox extension post. We are going to be using what we did on that post as a base for this one.

Introduction

The Firefox preferences system provides and easy way of storing small amounts of data for Firefox extensions. There are more advanced systems to store data for extensions but since what we are going to store is actually a user preference we are going to save it there. There are three data types that can be used for preferences: boolean, int and char.

This post is a continuation of Firefox extensions development post. We are going to be using what we did on that post as a base for this one.

Adding the icon

We are going to modify our tntfixer.xul file. This is the initial state of our file:

1
2
3
4
5
6
7
8
<overlay id="tntfixer"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <statusbar id="status-bar">
        <statusbarpanel id="tntFixerPanel">
            <label>tntfixer</label>
        </statusbarpanel>
    </statusbar>
</overlay>

For strange reasons I have been needing to use Test and Target in my current job. Test and Target is a tool that allows to easily perform content testing for  websites. The thing is that it’s interface has some issues that make working with it a little dangerous. Because of  that I decided to create a Firefox extension that will decrease the dangers of the interface. I will try to explain through a series of posts the procedure I will follow to create this extension.