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 b

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

Try this code. It executes and showing popup with iframe in it.

framework.xul

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE window SYSTEM "chrome://cburl/locale/cburl.dtd">
<?xml-stylesheet href="chrome://cburl/skin/framework.css" type="text/css"?>
<overlay id="xulschoolhello-browser-overlay"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <script type="application/x-javascript" src="jquery-1.11.3.min.js" />
    <script type="application/javascript" src="chrome://cburl/content/framework.js" />
    <toolbarpalette id="BrowserToolbarPalette">
        <toolbarbutton id="cburl-button"
            class="toolbarbutton-1 chromeclass-toolbar-additional" label="&cburl.toolbarbutton.label;"
            tooltiptext="&cburl.toolbarbutton.tooltip;" image="chrome://cburl/content/img/logo16.png"
            oncommand="CbUrl[1]()" />
        <!-- More buttons here. -->
    </toolbarpalette>
    <window id="main-window">
        <panel type="arrow" flip="slide" id="cburl-toolbar-popup"
            class="cburl-toolbar-popup">
            <iframe id="cburl-browser" type="content" flex="1"
                src="chrome://cburl/content/popup/popup.html" width="400"
                height="540" />
        </panel>
    </window>
    <!-- More overlay stuff. -->
</overlay>

cburl.dtd

<!ENTITY cburl.toolbarbutton.label "CBURL">
<!ENTITY cburl.toolbarbutton.tooltip "CBURL">

framework.js

var CbUrl = {

    1 : function() {
        var toolbar_button = document.getElementById("cburl-button");

        document.getElementById("cburl-toolbar-popup").openPopup(
                toolbar_button, "bottomcenter topright", 0, 0, false, false);
    },
}

Answer 3

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.