mozilla
Your Search Results

    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. Depending on the installed theme the result will look something like this: 

    current_date.png

    Modify XUL elements with JavaScript

     

    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).

    Take the JavaScript code from above and save it into the content/ folder next to your myhelloworld.xul file and name it overlay.js, then restart Thunderbird.

    Further Documentation

    More functions for the dom objects are listed on:

    You may also find the Javascript Cheat Sheet very useful.

    Document Tags and Contributors

    Contributors to this page: wbamberg, jenzed, Lanoxx
    Last updated by: wbamberg,
    Hide Sidebar