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 "[email protected]". Furthermore we show the new panel only for IMAP accounts...
Components.utils.import("resource://gre/modules/XPCOMUtils.jsm");
//class constructor
function DevmoAccountManagerExtension() {};
// class definition
DevmoAccountManagerExtension.prototype =
{
name : "devmo-account",
chromePackageName : "[email protected]",
showPanel: function(server)
{
//this panel is only shown for imap accounts...
if (server.type == \"imap\")
return true;
return false;
},
QueryInterface: XPCOMUtils.generateQI([
Components.interfaces.nsIMsgAccountManagerExtension
])
}
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 = "@mozilla.org/accountmanager/extension;[email protected]";
// 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]);
else
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 "[email protected]" as chrome package. This means the XUL file for the new panel has to be located in chrome://[email protected]/content/am-devmo-account.xul. And the property file needs to be in chrome://[email protected]/locale/am-devmo-account.properties.
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://[email protected]/content/am-devmo-account.js.
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://messenger/skin/accountManage.css" type="text/css"?>
<page xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
onload="parent.onPanelLoaded('am-devmo-account.xul');">
<script type="application/javascript" src="chrome://messenger/content/AccountManager.js"/>
<script type="application/javascript" src="chrome://[email protected]/content/am-devmo-account.js"/>
<dialogheader title="Devmo Example Panel"/>
<description>
This Panel is only shown in IMAP Accounts...
</description>
<vbox flex = "1"/>
</page>
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...