I'm currently building my first Firefox extension, and am having a little difficulty with one piece of functionality. I'd like to open a new browser tab in response to a button click on the toolbar. The new tab should contain the contents of a webpage, together with some extra buttons.

At the moment I've created a separate xul file for the contents of the new tab:

    <?xml version="1.0"?>

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="myapp-report-window" title="Example 4.5.1" xmlns:html="http://www.w3.org/1999/xhtml"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<script type="application/x-javascript" src="chrome://myapp/content/main.js" />

<toolbox>
  <toolbar id="nav-toolbar">
    <toolbarbutton label="This-is-going-to-do-some-stuff"/>
  </toolbar>
</toolbox>

<iframe id="myapp-report-frame" flex="1"/>

<script type="text/javascript">
    function loadPage(url){
    	document.getElementById('myapp-report-frame').setAttribute('src',url);
    }
</script>

</window>

This xul file is launched via this javascript, referenced from the main myapptoolbar.xul:

gBrowser.selectedTab = gBrowser.addTab('chrome://myapp/content/report.xul');
							var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab);
							newTabBrowser.addEventListener("load", function(){
																		loadPage('http://www.somedynamicallysetwebsite.com');
																	}, true);

The problem that I'm having is that the loadPage function is not being found, so the src attribute of the iframe is never set. I'm sure it's some silly scoping problem, but I'm very new to firefox extensions (day 2!) so any help would be much appreciated.

Thanks for looking!

Graham