Building a Thunderbird extension 6: Adding JavaScript

In this step we will create a small piece of JavaScript code that inserts the current date into our statusbar widget. The statusbar is usually displayed at the bottom of the Thunderbird window. Depending on the installed theme the result will look something like this:

Modify XUL elements with JavaScript

Save the following JavaScript code into the content/ folder next to your myhelloworld.xul file and name it overlay.js.

window.addEventListener("load", function(e) {
	startup();
}, false);

window.setInterval(
	function() {
		startup();
	}, 60000); //update date every minute

function startup() {
	var myPanel = document.getElementById("my-panel");
	var date = new Date();
	var day = date.getDay();
	var dateString = date.getFullYear() + "." + (date.getMonth()+1) + "." + date.getDate();
	myPanel.label = "Date: " + dateString;
}

The first part registers a new event listener that will be executed automatically when Thunderbird loads. The event listener then calls our startup function which gets our <statusbarpanel>-element with the id my-panel from the document's DOM tree. It then uses JavaScript's Date class to get the current date, which it converts into a string that has the format of YYYY.MM.DD. Because the month is zero-based we also need to add one to the month. Finally the label of our panel is set to "Date: " and concatenated with the date string that contains the formatted date.

We use the function window.setInterval to update the date in case Thunderbird is left running for more than one day. This allows us to call the startup function repeatedly with an interval of 60000ms (every minute).

Further Documentation

More functions for the dom objects are listed on:

• DOM/Window (API reference for the Window object)
• DOM/Document (API reference for the Document object)
• Gecko DOM Reference (overview of all DOM objects in Gecko)

You may also find the Javascript Cheat Sheet very useful.