Brain Flush

January 18, 2008

Integrating Direct Web Remoting (DWR) in Mozilla Thunderbird

Direct Web Remoting, or DWR for short, is a Web technology for exposing server-side Java interfaces via a dynamically generated JavaScript API. A specific Servlet will translate incoming JavaScript calls to their Java equivalents which makes integration of applications programmed in client-side JavaScript with Web applications written in server-side Java a no-brainer.

DWR calls are typically dispatched from a JavaScript/JScript program running in a Web browser such as Mozilla Firefox or Microsoft’s Internet Explorer, but since all Mozilla products are built upon the Gecko layout engine and XUL (which are programmed using JavaScript modules), you can leverage DWR to dispatch remote calls from e.g. a Mozilla Thunderbird extension just as easily. Integrating DWR into a XUL based extension is actually pretty straight forward, but there are couple of subtleties to be aware of.

I will hereafter assume that a Web application called ‘MyWebApp’ has been deployed on localhost port 8080, that it’s up and running, that it exposes an interface called ‘MyService’ via DWR. Refer to the DWR documentation if you are unsure how to do that. It is further assumed that the DWR servlet is reached at dwr/ relative to the base URL. All following code examples refer to DWR version 1.1, which unfortunately has already been superseded by version 2.x at the time of this writing. If required at all, changing the code to run with newer versions of DWR should be easy enough however.

In order for your XUL component to be able to access `MyService’, add the following lines to your XUL file (e.g. myOverlay.xul):

<script type="application/x-javascript"

<script type="application/x-javascript"

<script type="application/x-javascript"

Don’t go looking for MyService.js in your file system, it’s not there. DWR will take care of dynamically creating it once your client requests it from the server. You can find both engine.js and util.js in the dwr.jar file which should reside at WEB-INF/lib of your deployed Web application.

Now you’re already prepared to invoke your service. However, when run outside a Web browser, as is the case with e.g. a Thunderbird extension, there is a catch: DWR won’t correctly resolve the target URL for your server, because it operates on relative URLs by default. You can fix that problem by modifying the MyService._path variable, which was auto-generated by DWR. Ponder the example program below, which invokes MyService.service() from a JavaScript program running in a Thunderbird extension:

function callService() {

    MyService._path = "http://localhost:8080/MyWebApp/dwr";

        callback: function(returnData) {
            // perform logic

        errorHandler: function(error) {
            // handle error

That’s it basically; of course you may want to add additional call variables or use another invocation style altogether, but you get the idea.


January 17, 2008

Mozilla Thunderbird Extension Development – Environment Setup

It took me a while to setup my Thunderbird installation in order to make it ready for convenient extension development, by which I mean having all the tools and configuration in place. So I thought I’d share the most useful steps you want to perform in order to make your life easier.

You should basically do two things: One, reconfigure Thunderbird to be more developer-friendly, and two, install some cool extensions.

First, I recommend installing the following plugins:

  1. ChromEdit Plus – allows for easy access to your configuration files. Works in Firefox, too.
  2. Venkman – A JavaScript debugger. Must have. For Firefox, I recommend Firebug instead.
  3. Console² – An advanced error console. Can interpret JavaScript commands on-the-fly.
  4. Chrome List – Lets you inspect chrome packages of all installed components. It’s somewhat buggy for me though, sometimes the contents of XUL files are not displayed in the viewer.

With these plugins installed, you already have a solid basis to built your hacking on.

Now to the configuration. You can do this with ChromEdit now, or if you haven’t installed it, fall back to your favorite text editor. Open the ChromEdit Plus menu, select ChromEdit and navigate to the ‘user.js’ tab. From here you can edit your ‘user.js’ file located in your profile folder (on Linux, it’s in your home directory, on Windows, it’s in ‘Documents and Settings/<username>/Application Data/Thunderbird/Profiles/<long_UUID>’ ). If it does not yet exist, and it doesn’t by default, go ahead and create it). Add the following lines (it’s a JavaScript file, so it’s simply JavaScript syntax):

user_pref(“javascript.options.showInConsole”, true);
user_pref(“nglayout.debug.disable_xul_cache”, true);
user_pref(“browser.dom.window.dump.enabled”, true);
user_pref(“javascript.options.strict”, true);

The following explanations are taken from the MDC:

  • javascript.options.showInConsole = true. Logs errors in chrome files to the Error Console.
  • nglayout.debug.disable_xul_cache = true. Disables the XUL cache so that changes to windows and dialogs do not require a restart. This assumes you’re using directories rather than JARs. Changes to XUL overlays will still require reloading of the document overlaid.
  • browser.dom.window.dump.enabled = true. Enables the use of the dump() statement to print to the standard console. See window.dump for more info. You can also use nsIConsoleService from privileged script.
  • javascript.options.strict = true. Enables strict JavaScript warnings in the Error Console. Note that since many people have this setting turned off when developing, you will see lots of warnings for problems with their code in addition to warnings for your own extension. You can filter those with Console2.

In order for the Thunderbird standard console to appear, run Thunderbird with the ‘-console’ command line argument. The dumped statements won’t appear in Console² though.

You may also want to refer to Setting up extension development environment on MDC as a primer, I particularly recommend the steps outlined for externalizing your development files into a separate folder, so you won`t have to reinstall the plugin each time you change a line of code.

Blog at