This is an archived page. It's not actively maintained.

Building a Thunderbird extension 6: Adding JavaScript

Warning: This content is for older versions of Thunderbird. Much of it may no longer be relevant. See for newer information.

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) {
}, false);

	function() {
	}, 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:

You may also find the Javascript Cheat Sheet very useful.