Cow Computing

Recently, i have been working on an productizing an product of my working company. It involves developing an extension for Thunderbird. During the development process, i have discovered there has been inadequate resources out there for Thunderbird Extension, especially when most developers are interested in working on another Mozilla’s flagship product — FireFox. So, i would like to share my experience on this

To begin, we have to prepare the appropriate directory.

sample.xpi

/install.rdf
/components/
/defaults/
/plugins/
/chrome.manifest
/chrome/icons/default/
/chrome/
/chrome/content
/chrome/skin

Then, we have to work on the install.rdf. It’s an RDF file to document about the extension’s information.

<?xml version="1.0"?>

<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:em="http://www.mozilla.org/2004/em-rdf#">

<Description about="urn:mozilla:install-manifest">
<em:id>sample@steve.chan</em:id>
<em:name>Sample Plugin</em:name>
<em:version>1.0</em:version>
<em:creator>Steve Chan</em:creator>
<em:description>First Plugin on Mozilla Thunderbird</em:description>
<em:homepageURL>http://www.codetter.com/</em:homepageURL>

<em:targetApplication>
<Description>
<em:id>GUID</em:id>
<em:minVersion>1.5</em:minVersion>
<em:maxVersion>2.0.0.*</em:maxVersion>
</Description>
</em:targetApplication>

</Description>
</RDF>

Note that,

1. <em:id> shall be filled in with string formatted as “string”@”string” like an email.
2. under “targetApplication”, the <em:id> shall be a proper GUID, it could be easily gen with tools (Google it)
3. For minVersion and maxVersion, they determine which version of Thunderbird could install your plugin. View Valid Application Versions.

After finishing install.rdf, there’s another manifest to prepare. It’s chrome.manifest which describe the extension file structure of yours.

content sample chrome/content
overlay chrome://messenger/content/messenger.xul chrome://sample/content/message-overlay.xul

skin sample classic/1.0 chrome/skin/classic/

style chrome://messenger/content/messenger.xul chrome://sample/skin/style.css

1. content describes the location where content’s file and folder are located
2. overlay describes which UI of Thunderbird is to be worked on / Override. (Do read about XUL to get your familiar with this idea)
3. skin describes the location where the skin’s file and folder are located
4. style describes what stylesheet to apply on various UI.

Next step is to create an message-overlay.xul

<?xml version="1.0">
<overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<statusbar id="status-bar">
<statusbarpanel id="my-panel" label="Hello, World!" onclick="alert('Hello World!')"/>
</statusbar>
</overlay>

1. statusbar with id=”status-bar” states the merge point of the extension, the while xul describe the addition of an “Hello, World!” label on the bottom right corner of Thunderbird (status bar).
2. The onclick is given a javascript function to create an alert box when the “Hello, World!” label is being clicked. (XUL works with javascript!)

Last but not least, we have to package the extension

Zip all the Content of the extension (without the root folder), and rename .zip into .xpi, and it’s DONE! Congratulation.

Ref: https://developer.mozilla.org/en/Extensions/Thunderbird/Building_a_Thunderbird_extension

***Note: The extension describe in this post does not promise to build a proper extension, it just to give a rough idea on how the process is like, and this is a simplified one. If you need any help, you might leave your comment, and i will try help you as much as i can.