May 21: My First Firefox Extension

    I've spent today trying to develop a test extension, one that also involves saving visited URLs but doing nothing really fancy with them. My goal is to have a status bar icon that can be clicked and save the current URL. Then on a menu window will have an area to show the logged URLs and a few extra options. I'll just list a few problems/solutions I ran into while trying to develop it:

• Some initial XUL research into the types of elements and objects it offers led me to use a listbox to display the URLs in, since it has an appendItem() method which I should be able to access through a Javascript to build up the list on screen.
• It took me awhile to figure out how to properly edit XUL elements through Javascripts, since I initially had no understanding of the the DOM objects that XUL uses. I eventually learned the odd commands needed, such as the all important document.getElementById(id) method. 
• After a frustrating hour of getElementById constantly returning null I found discovered that the document wasn't fully being loaded by the time my Javascript was called, so the object I was trying to reach wasn't in existence yet. I add to change the script to have a small function, init(), and then add onload="init();" to the window XUL object. Such frustrating details.
• Once I finally figured that out I could begin designing a layout for the menu window. 

 This part wasn't too hard but required learning a lot more XUL to get a semi decent layout, mostly utilizing boxes to get things sort of lining up. I don't know if I can use the Start and Stop buttons as I wish yet - those were added under the assumption that the script would run constantly and logging URLs on its own. Right now that's just too advanced for me. The Go To... and Remove buttons are some things I thought of which I might add as a challenge to myself to understand more XUL and Javascript. I have an idea of how to implement them, but only once I get the basics of the extension actually working.

 

• I wrote a relatively short Javascript to log the current URL and saving it to an array - rather simple. The problem I have is that the status bar icon can easily grab the URL of the browser, since they're embedded as the same window, but my options window (pictured above) has no access to that window. Unfortunately, to have access to the functions in my Javascript, and the array of URLs, I need to include a call in the option's XUL file. Doing this executes another instance of my Javascript, hence leaving me with no access to the built up array in the other instance of the script. This means I have no way to share data between the two windows- and I need access to the array in the options window to display the URLs when the Display button is clicked. I have the feeling that I'll have to maintain everything to a database, but I would much rather find a way that only involves Javascript, so let the Googling commence.
  
• It seems like I'm finally getting a bit of luck. It turns out that the function to open a window from the main browser window allows for Javascript objects to be passed - albeit in a slightly odd manner. So as it stands my extension is working as intended. I'm unsure if my "Remove" button will be able to properly function though, because the solution I found passes a copy of the array of URLs, so I could remove a specific URL from being displayed, but that would not remove it from the actual structure; there is no way to pass pointers or references from a Javascript to a new XUL window. There are a few options here for working with objects between multiple windows, which would be a better solution to my problem.