Create a mozilla extension to display the popup and iframe in it.

Question

I am trying to develop a mozilla extension. I just need to display the iframe in the popup, but don't know how to do it.

My requirement

• Add extension button on top Navigation toolbar
• Display an iframe in a pop-up window when you click on the extension button.

I have not found any textbook like this. Please help me.

Thanks...

Hariprasad

Answer 1

In an xul-based extension, you can do this as follows:

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 google iframe:

Answer 2

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

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

By connecting it to a button on the toolbar, create a community by creating modules that make it easy to launch the panel.

Answer 3

Try this code. It executes and shows a popup with an 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); }, }