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:

Answer 2

With the Addon-SDK, you can use a panel, which is essentially a popup iframe.

const { Panel } = require('sdk/panel');
let panel = Panel({
  contentURL: 'http://mozilla.com',
  width: 600,
  height: 600
});
panel.show();

Hooking it into a toolbar button, there are community created modules that allow that make it easy to trigger the panel as well.