Need to create xul based frame in firefox extension build using xul

Question

I want to create xul based frame in one of my firefox extension. The frame should look like https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_frame

or

how to use below node js code in xul:

var { Frame } = require("sdk/ui/frame");
var frame = new Frame({
  url: "./city-info.html"
});

In node.js, its working fine, but I dont know how to create the same thing with xul. Anybody can help?

thanks in advance.

There are either too many possible answers, or good answers would be too long for this format. Please [edit] the question to add details to narrow the answer set or to isolate an issue that can be answered in a few paragraphs. — Makyen, Nov 21 '16 at 11:34
Alternately, this is a debugging question without a [mcve]. Either way please [edit] the question such that it is possible to answer. — Makyen, Nov 21 '16 at 11:35
thanks for your feedback Makyen. But my question is simple. I just want to show a frame on firefox browser using xul based firefox addon. In that frame I want to open an url. I have given example url also, to better understand the view. — Saurabh Sharma, Nov 21 '16 at 11:39
Then what, beyond the examples in that page, are you expecting to get out of this question? — Makyen, Nov 21 '16 at 11:43
I have edited the question and add reference code from node js. Is it fine now? I think you are confused with node js and xul. The example url belongs to node js, and I want answer in xul. — Saurabh Sharma, Nov 21 '16 at 11:49
FYI: The terminology you are using is not commonly used in this context. You appear to be saying "node.js" where you actually are meaning "Firefox Add-on SDK" (which has a lot of node.js). But, in Firefox extensions, saying "node.js" is not used to refer to code which is intended to be used with the Add-on SDK. No, I am not confused between Overlay/XUL and the Firefox Add-on SDK. I am confused as to what you are wanting, because you have not described it (nor provided any code as to what you have already tried) and have more or less not understood that your description is lacking in detail. — Makyen, Nov 21 '16 at 12:32
For instance: You have not stated if you want just an `` or if you are wanting a toolbar that contains an `<iframe>`, or if you are wanting a [CustomizableUI widget](https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/CustomizableUI.jsm) that contains an `<iframe>`. So, basically, what your question boils down to at the moment is "Give me the codz for something that looks like this thing over here", where "this thing over here" is not clearly specified. — Makyen, Nov 21 '16 at 12:46
In addition, while it often happens that code is provided, Stack Overflow isn't a code writing service. In general, we like to see what code you have already written in an attempt to accomplish what you desire rather than providing answers which are writing something based on specifications you provide in the question. — Makyen, Nov 21 '16 at 12:49

score 0 · Answer 1 · edited May 23 '17 at 12:13

You have provided very little detail as to what you desire. If all that you desire is to create an <iframe> in which you can load HTML content, then something along the lines of the following will do so:

//The URL of the HTML you desire to load.
let chromeUrl = '[Some URL here]';
//Whatever element you want the iframe placed under.
let parentEl = document.getElementById('foo');

//* Overlay and bootstrap (from almost any context/scope):
Components.utils.import('resource://gre/modules/Services.jsm');//Services
let activeWindow = Services.wm.getMostRecentWindow('navigator:browser');
//*/
let mainDocument = activeWindow.document;

//Create the <iframe> use
//mainDocument for the XUL namespace.
let iframeEl;
if(options.useBrowser){
    iframeEl = mainDocument.createElement('browser');
} else {
    iframeEl = mainDocument.createElement('iframe');
}
iframeEl.id = id;
iframeEl.setAttribute('src',chromeUrl);
iframeEl.setAttribute("tooltip", "aHTMLTooltip");
iframeEl.setAttribute("autocompleteenabled", true);
iframeEl.setAttribute("autocompletepopup", "PopupAutoComplete");
iframeEl.setAttribute("disablehistory",true);
iframeEl.setAttribute('type', 'content');
parentEl.appendChild(iframeEl);

The above code was taken from my answer to Firefox SDK Add-on with a sidebar on both the right and left at the same time, which creates sidebars. One option of how those sidebars are created is to have them contain an <iframe>.

score 0 · Answer 2 · answered Nov 22 '16 at 05:47

Finally I got the answer:

let chromeUrl = 'YOUR HTML PAGE URL';
                        Components.utils.import('resource://gre/modules/Services.jsm');//Services
                        let activeWindow = Services.wm.getMostRecentWindow('navigator:browser');
                        //*/
                        let mainDocument = activeWindow.document;

                        let iframeEl;
                        iframeEl = mainDocument.createElement('iframe');

                        iframeEl.id = "d";
                        iframeEl.setAttribute('src',chromeUrl);
                        iframeEl.setAttribute("tooltip", "aHTMLTooltip");
                        iframeEl.setAttribute("autocompleteenabled", true);
                        iframeEl.setAttribute("autocompletepopup", "PopupAutoComplete");
                        iframeEl.setAttribute("disablehistory",true);
                        iframeEl.setAttribute('type', 'content');
                        iframeEl.setAttribute('height', '32px');

                        window.document.documentElement.appendChild(iframeEl);

Need to create xul based frame in firefox extension build using xul

2 Answers2