Firefox Extension: What Does The Template Mean?

[Mordent 0]

Me again with another JavaScript question for you lot. I've started work on a Firefox extension that acts on a particular site, altering various properties of the pages and so on. I've got a semi-working version that needs a revamp to allow me to expand it, so as I hadn't got too far in to it yet I've decided to start from scratch, this time trying to understand a bit more about what's going on with the code.

The initial template I used was taken from here, and also shown below:

window.addEventListener("load", function() { myExtension.init(); }, false);	   var myExtension = {		 init: function() {		   var appcontent = document.getElementById("appcontent"); // browser		   if (appcontent) appcontent.addEventListener("DOMContentLoaded", myExtension.onPageLoad, true);		   var messagepane = document.getElementById("messagepane"); // mail		   if (messagepane)	  messagepane.addEventListener("load", function () { myExtension.onPageLoad(); }, true);		 },		 onPageLoad: function(aEvent) {		   var doc = aEvent.originalTarget; // doc is document that triggered "onload" event		   // do something with the loaded page.		   // doc.location is a Location object (see below for a link).		   // You can use it to make your code executed on certain pages only.		   if (doc.location.href.search("forum") > -1) alert("a forum page is loaded");		 }	   }

Assuming that the "messagepane" aspect is unnecessary in my case, I'm trying to work out how to translate this in to something that makes sense to me. My first attempt was this:

window.addEventListener("load", function() { myExtension.init(); }, false);      var myExtension =   {	 function init ()	 {	   var appcontent = document.getElementById("appcontent"); // browser	   if ( appcontent )		 appcontent.addEventListener("DOMContentLoaded", myExtension.onPageLoad, true);	 }   	 function onPageLoad (aEvent)	 {	   var doc = aEvent.originalTarget; // doc is document that triggered "onload" event	   // do something with the loaded page.	   // doc.location is a Location object (see below for a link).	   // You can use it to make your code executed on certain pages only.	   alert("test");	 }   }

But it doesn't show an alert. As far as I can tell, the two are (nigh-on) identical, so can someone explain to me the difference between "onPageLoad: function ( aEvent )" and "function onPageLoad (aEvent)", as I assume they're the things responsible for it not working.
Edited November 9, 2009 by Mordent (see edit history)

[iGuest 3]

Look at how the functions are declared in the original example

init: function() {...} as compared to function ini() {...} .

Also, remember to place a "," at the end of your first function, as there are multiple functions.

So, it would all be written as:

var myExtension = {

init: function() {...}, 

onPageLoad: function(aEvent) {...}

}

Otherwise, your code is correct.