Create mozilla extension to display a popup and iframe in it

Question

Am trying to develop a mozilla extension. I just need to display an iframe in a popup, but don't know how to do this.

My requirement is

1. Add a extension button on top Navigation Tool bar
2. Display an iframe on a popup while clicking on the extension button.

I didn't find any tutorial similar to this. Please help me.

Thank you...

Hariprasad

Answer 1

In a xul based extension you can do it like this:

In your xul file:

<toolbarpalette id="BrowserToolbarPalette">
    <toolbarbutton id="mainToolbarIcon"
            image='chrome://yourExt/content/images/icon.png'
            type="panel"
            class="toolbarbutton-1 chromeclass-toolbar-additional">
        <panel id="toolbarPanel"
            type="arrow"
            noautofocus="true"
            consumeoutsideclicks="true"
            noautohide="false"
            onpopupshowing="handleOnLoad();"
            level="parent">

            <vbox id="iframeContainerContainer" align="top">
                <iframe id="myframe" width="100" height="100"/>
            </vbox>
        </panel>
    </toolbarbutton>
</toolbarpalette>

And in your js file:

function handleOnLoad() {
    var iframe = document.getElementById("myframe");
    iframe.setAttribute("src","http://www.google.com");
}

Just tried this and it opens a panel with an iframe of google: