mike.chambers

Open a URL within Thunderbird's Mail Start Page

Here is how to load a URL from an extension in Thunderbird, into the Mail Start Page area:


var url = "http://mesh.typepad.com";
var browser = document.getElementById("messagepane");
browser.loadURI(url, browser.currentURL, null);


That will allow you to change the current document loaded in the Mail Start Page (email reading) area of Thunderbird.

Opening an URL in an External Browser from a Thunderbird Extension

Here is a quick code snippet that shows how to open a URL in an external browser from within a Thunderbird extension:

var url = "http://mesh.typepad.com";
var uri = Components. classes["@mozilla.org/network/io-service;1"]. getService(Components.interfaces.nsIIOService).newURI(url, null, null);

var com = Components.classes["@mozilla.org/uriloader/external-helper-app-service;1"];
var httpHandler = com.createInstance(Components.interfaces.nsIExternalProtocolService);

httpHandler.loadUrl(uri);


This will open the URL in the system's default web browser.

Determining whether your extension is running in FireFox or Thunderbird

One of the things that is cool about building extensions for FireFox, is that in most cases they can easily made to run within Thunderbird. However, sometimes your extension needs to know which environment it is running within. You can determine this by checking the navigator.vendor property.

var firefox = false;
var thunderbird = false;

var vendor = navigator.vendor;

if(vendor == "FireFox")
{
    firefox = true;
}
else if(vendor == "Thunderbird")
{
    thunderbird = true;
}

dump("Running in FireFox : " + firefox + "\n");
dump("Running in Thunderbird : " + thunderbird + "\n");

This makes it easy to branch your code when necessary.

Debugging Thunderbird Extensions on OS X

Well, now that I have gotten my first FireFox extension working, I decided to see if I could make it run within Thunderbird. The first issue I ran into was trying to figure out how to debug extensions within Thunderbird. It took me a while to figure it out, but it is pretty much the same as in FireFox.

First, you have to set the following Thunderbird preference to true:

browser.dom.window.dump.enabled

However, there is not an easy way (such as FireFox's about:config) to set the preference. In order to set it, you need to add the following line to your user.js file in your Thunderbird profile directory:

user_pref("browser.dom.window.dump.enabled", true);

If the file doesn't exist (it doesn't by default), just create it. You can find more info on setting Thunderbird preferences here.

This setting will redirect dump() statements from your extension to the console.

In order to view the dump statements, you have to start Thunderbird from the console / terminal. You can do this on OS X with the following command line (replace the path to match your system):

/Applications/Thunderbird.app/Contents/MacOS/thunderbird-bin

Now, if you add:

debug("Hello World\n");

To you extension, then you will see:

Hello World

output to the console / terminal that you started Thunderbird from.

You can now debug Thunderbird extensions the same way you debug FireFox extensions.

boingboing FireFox Search Plugin

Well, the FireFox engadget search plugin I made has proven to be useful (and popular), so I decided to put together a search plugin for what is probably my favorite site, boingboing.

So, here it is:

Install boingboing Search Plugin

This will place a simple boingboing icon in your FireFox search bar, and make it easy to search boingboing and find that cool article that you saw posted a couple of days ago.

Create an empty menuseparator in a FireFox extension

Here is a quick tip on how to add an empty separator into a FireFox extension menu. By default, the XUL menuseparator tag draws a line across the menu. Here is how to add a separator that just adds a space (no line):

<menuseparator style="visibility:hidden" />

Pretty simple, but it took me a little searching to figure out, so I thought I would post it here.

Simple Class to Make XUL StatusBarPanel Icon Blink from FireFox extension

I have put together a simple class that will make the icon in a XUL StatusBarPanel tag within a FireFox extension blink.

In order for this to work, the StatusBarPanel tag must have its class set to statusbarpanel-menu-iconic.

For example, here is the XUL tag:

<statusbarpanel class="statusbarpanel-menu-iconic" id="my-status" />

and the associated style sheet:

statusbarpanel#my-status[status="on"]
{
    list-style-image: url("chrome://appname/skin/on_status.png");
}

statusbarpanel#my-status[status="off"]
{
   list-style-image: url("chrome://appname/skin/off_status.png");
}

And finally, here is the code to use the class and make the icon blink:

var menuStatusBar = document.getElementById("my-status");

var blinker = new StatusBarPanelBlinker();
blinker.setStatusBarPanel(menuStatusBar);
blinker.setOnStatus("on");
blinker.setOffStatus("off");

blinker.startBlink();

Note that I am still getting familiar with XUL and the JavaScript API, so there may be a way to make this more generic to work with other tags. If I figure it out, I will update the class.

Here is the class:

/*
StatusBarPanelBliner Class
Created by Mike Chambers
http://mesh.typepad.com

Makes the icon of an XUL statusbarpanel instance blink.

Usage:

var blinker = new StatusBarPanelBlinker();
blinker.setStatusBarPanel(menuStatusBar);
blinker.setOnStatus("on");
blinker.setOffStatus("off");
blinker.startBlink();

The StatusBarPanel tag must have its class set to "statusbarpanel-menu-iconic"	

For example, here is a tag:



and the associated style sheet:

statusbarpanel#my-status[status="on"]
{
list-style-image: url("chrome://appname/skin/on_status.png");
}

statusbarpanel#my-status[status="off"]
{
list-style-image: url("chrome://appname/skin/off_status.png");
}


*/

/***** Constructor *****/
function StatusBarPanelBlinker()
{
}

/***** Properties *****/

StatusBarPanelBlinker.prototype.onStatus = undefined; //String
StatusBarPanelBlinker.prototype.offStatus = ""; //String
StatusBarPanelBlinker.prototype.interval = 750; //Number
StatusBarPanelBlinker.prototype.statusBarPanel = undefined; //StatusBarPanel
StatusBarPanelBlinker.prototype.intervalId = undefined; //Number

/***** Methods *****/

//starts the blinking of the icon
StatusBarPanelBlinker.prototype.startBlink = function()
{
 this.intervalId = setInterval(this.doBlink, this.interval, this);
}


//stops the icon from blinking
StatusBarPanelBlinker.prototype.stopBlink = function()
{
 clearInterval(this.intervalId);
 this.intervalId = undefined;
 
 this.statusBarPanel.setAttribute("status", this.onStatus);
}


//private internal function that toggles the state of the icon
StatusBarPanelBlinker.prototype.doBlink = function(scope)
{
 if(scope == undefined)
 {
  scope = this;
 }
 
 var newStatus = (scope.statusBarPanel.getAttribute("status") == scope.onStatus)?
 scope.offStatus: scope.onStatus;
 
 scope.statusBarPanel.setAttribute("status", newStatus);
}


//returns whether the icon is currently blinking, i.e. startBlink() has been called
StatusBarPanelBlinker.prototype.isBlinking = function()
{
 return !(this.intervalId == undefined);
}

/***** Getter / Setters *****/

//set the statusbarpanel instance whose icon we will blink
StatusBarPanelBlinker.prototype.setStatusBarPanel = function(statusBarPanel)
{
 this.statusBarPanel = statusBarPanel;
}

//return the statusbarpanel instance that the class is making blink
StatusBarPanelBlinker.prototype.getStatusBarPanel = function()
{
 return this.statusBarPanel;
}


//interval between blink states in milliseconds. This is basically how fast
//the icon blinks
StatusBarPanelBlinker.prototype.setBlinkInterval = function(interval)
{
 this.interval = interval;
}

//returns the blink interval
StatusBarPanelBlinker.prototype.getBlinkInterval = function()
{
 return this.interval;
}


//the value of the statusbarpanel's status attribute that displays the icon
StatusBarPanelBlinker.prototype.setOnStatus = function(onStatus)
{
 this.onStatus = onStatus;
}

//return's on icon status for statusbarpanel

StatusBarPanelBlinker.prototype.getOnStatus = function()
{
 return this.onStatus;
}

//the value of the statusbarpanel's status attribute that displays the off
//status of the blink / icon
StatusBarPanelBlinker.prototype.setOffStatus = function(offStatus)
{
 this.offStatus = offStatus;
}


//return's off icon status for statusbarpanel
StatusBarPanelBlinker.prototype.getOffStatus = function()
{
 return this.offStatus;
}

Post any comments, questions or suggestions in the comments section.