Opening a xul file in response to a toolbar extension button click

Question

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"&gt;

<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

Answer 1

Hello!

I am new to this myself. Actually stumbled back here because I was trying to ask another question about firefox extension but I think I might be able to help.

Um, your loadpage function is declared within newtab.xul and therefore, the function can't be called from myapptoolbar.xul. I think XUL files are HTML files with enhanced privilege and hence share similar properties. You can declare the function within an app.js and then have the both of them include the app.js file like this:-

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

Place it somewhere at the top, right after the there.is.only.xul line would be nice. Just do things like what you'll normally do to a HTML page.

I hope this helps. =) Good luck on your extension!

Answer 2

I fixed this in the end - it was a scope issue. I had to access the iframe via the GBrowser property.

Answer 3

i have a question in response to your answer. im trying to do something similar and having a hard time understand how to acess the iframe via the browser property. your help would be much appreciated.

thanks