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.