Mozilla's getting a new look. What do you think?

Building an Account Manager Extension

Step 1: Implementing nsIAccountManagerExtension

As first step we have to implement the nsIAccountManagerExtension. We name the Extension "devmo-account" and state that it is located in the Chrome Package "". Furthermore we show the new panel only for IMAP accounts...


  //class constructor
  function DevmoAccountManagerExtension() {}; 
  // class definition
  DevmoAccountManagerExtension.prototype = 
    name : "devmo-account",
    chromePackageName : "",
    showPanel: function(server) 
      //this panel is only shown for imap accounts...
      if (server.type == \"imap\")
        return true;
      return false;
    QueryInterface: XPCOMUtils.generateQI([

Step 2: Building a Component

We convert the interface to a XPCOM Component and register it in the component manager as Account Manager Extension. Therefore we add the following code to the previous. The JavaScript file has to be saved either in the extension's or Thunderbird's component directory.

// Define the Contract information needed for this Component...

// ... the Unique Component Identifier (change it if you copied this example!)...
DevmoAccountManagerExtension.prototype.classID = Components.ID("{659ce960-9dfb-11dd-ad8b-0800200c9a55}");

// ... the description and ...
DevmoAccountManagerExtension.prototype.classDescription = "Devmo Account Manager Extension";

// ... textual unique identifier or rendez-vous point in the category manager.
DevmoAccountManagerExtension.prototype.contractID = ";1?";

// Add the component to the mailnews-accountmanager-extensions category
DevmoAccountManagerExtension.prototype._xpcom_categories: [{ category: "mailnews-accountmanager-extensions" }],

// Create entry point for the module
if (XPCOMUtils.generateNSGetFactory)
  var NSGetFactory = XPCOMUtils.generateNSGetFactory([DevmoAccountManagerExtension]);
  var NSGetModule = XPCOMUtils.generateNSGetModule([DevmoAccountManagerExtension]);

Step3: Create the new panel

As next Step we create the XUL and the property file for your new panel.

We defined in Step 1 "devmo-account" as name and "" as chrome package. This means the XUL file for the new panel has to be located in chrome:// And the property file needs to be in chrome://

The XUL file needs a page element as root element, with a special on load command. Furthermore you should include the AccountManager.js script and accountManage.css styles. It is common practice to use for the java script of the new panel, the same naming as used for the XUL. This means in our example, the JavaScript file should be located in chrome://

<?xml version="1.0" encoding="UTF-8"?>

<?xml-stylesheet href="chrome://messenger/skin/accountManage.css" type="text/css"?>

<page xmlns="" 

  <script type="application/javascript" src="chrome://messenger/content/AccountManager.js"/>
  <script type="application/javascript" src="chrome://"/> 

  <dialogheader title="Devmo Example Panel"/>

   This Panel is only shown in IMAP Accounts...

  <vbox flex = "1"/>


As with the XUL page, the content of the property file relies on a very strict naming. As our Account Manager Extension is named "devmo-account", we are required to include a property named prefPanel-devmo-account.

prefPanel-devmo-account=Devmo Demo Panel

Step4: The new panel and JavaScript

 the JavaScript for an account manager panel needs to implement at least the following functions. These functions are invoked by the Account Manager.

function onPreInit(account, accountvalues)  { }

function onInit(pageId, serverId)  { }

function onAcceptEditor() { } function onSave() { } function UpdatePage() {}

Step5: Putting it all together

// todo build an demo extension for this tutorial...

Document Tags and Contributors

 Contributors to this page: Sheppy, Wladimir_Palant, Cchantep, sdwilsh, Smi
 Last updated by: Sheppy,