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.
By convention extension preferences should be saved on a branch named after our extension, and that branch should be put inside the extensions branch. That means that our preferences will follow this format:
1
2
extensions.tntfixer.pref1
extensions.tntfixer.pref2
The code
For our extension we are going to use one preference to save the status of our extension (active or inactive), for this we are going to use a char preference that we are going to save every time our status bar icon is clicked, and retrieve when our extension is started.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
var tntfixer =
{
/**
* Reference to status bar icon
*/
'statusBarIcon': null,
/**
* Saved preferences
*/
'preferences': null,
/**
* init
* Initializes the extension. Gets a reference to the status bar icon,
* gets preferences status of the extension and verifies how many Tnt tabs
* are already open
*
* @return void
*/
'init': function()
{
// Preferences manager
tntfixer.preferences = Components
.classes["@mozilla.org/preferences-service;1"].getService(
Components.interfaces.nsIPrefService);
tntfixer.preferences = tntfixer.preferences.getBranch('extensions.tntfixer.');
try
{
var status = tntfixer.preferences.getCharPref('status');
}
catch (err)
{
var status = 'inactive';
tntfixer.preferences.setCharPref('status', status);
}
// Status bar icon
tntfixer.statusBarIcon = document.getElementById('tntFixerStatusBarIcon');
tntfixer.statusBarIcon.setAttribute('value', status);
tntfixer.statusBarIcon.addEventListener('click',
tntfixer.toogleStatusBarIcon, false);
},
/**
* toogleStatusBarIcon
* Changes the color of the icon in the status bar when it is clicked
*
* @return void
*/
'toogleStatusBarIcon': function()
{
if ('active' == tntfixer.statusBarIcon.getAttribute('value'))
{
tntfixer.statusBarIcon.setAttribute('value', 'inactive');
tntfixer.preferences.setCharPref('status', 'inactive');
}
else
{
tntfixer.statusBarIcon.setAttribute('value', 'active');
tntfixer.preferences.setCharPref('status', 'active');
}
}
};
// Initialize at startup
window.addEventListener(
'load',
function()
{
tntfixer.init();
},
true
);
I added a new attribute to my tntfixer object to store a reference to my extension preferences. Its value is assigned on the init function.
1
2
3
tntfixer.preferences = Components
.classes["@mozilla.org/preferences-service;1"].getService(
Components.interfaces.nsIPrefService);
This line of code gives us access to all Firefox preferences, but since we are only interested on our branch we point our attribute to the correct place:
1
tntfixer.preferences = tntfixer.preferences.getBranch('extensions.tntfixer.');
Next we try to get the value of our status preference. We do this inside a try catch because it will throw an exception when the preference doesn’t exist (the first time we run it). In that case we assign the “inactive” status manually.
1
2
3
4
5
6
7
8
9
try
{
var status = tntfixer.preferences.getCharPref('status');
}
catch (err)
{
var status = 'inactive';
tntfixer.preferences.setCharPref('status', status);
}
As you can imagine getCharPref and setCharPref are used to set and get a char preference. Next, we assign the stored value of our preference in our image:
1
tntfixer.statusBarIcon.setAttribute('value', status);
We also modified the toogleStatusBarIcon method to save its status on the status preference when it is clicked:
1
2
3
4
5
6
7
8
9
10
11
12
13
'toogleStatusBarIcon': function()
{
if ('active' == tntfixer.statusBarIcon.getAttribute('value'))
{
tntfixer.statusBarIcon.setAttribute('value', 'inactive');
tntfixer.preferences.setCharPref('status', 'inactive');
}
else
{
tntfixer.statusBarIcon.setAttribute('value', 'active');
tntfixer.preferences.setCharPref('status', 'active');
}
}
Now whenever we start Firefox our extension icon will remember its last status and will start that way.
firefox_extension javascript projects