How to add an iframe to a hosted page using the Firefox SDK add-on?

Question

Suppose that frame.html inside the data folder in the Firefox SDK addon, how to add an iframe and define frame.html as its source?

Additional information: Due to CPS, it is impossible to use the built-in source, so I can not use data.load('frame.html') , I need to use the file URL:

Library / main.js

 tabs.activeTab.attach({ contentScriptFile: [self.data.url("js/appender.js") ], attachTo: 'top', contentScriptOptions: { scriptUrl: self.data.url("js/sandbox.js"), imageUrl: self.data.url("image.jpg") frameUrl: self.data.url("sandbox.html") } }); 

data / appender.js

  var scriptTag = document.createElement("script"); scriptTag.src = self.options.scriptUrl; document.body.appendChild(scriptTag); // worked fine var imageTag = document.createElement("image"); imageTag.src = self.options.imageUrl; document.body.appendChild(imageTag); // worked fine var iframeTag = document.createElement("iframe"); iframeTag.src = self.options.frameUrl; document.body.appendChild(iframeTag); // the html tag of iframe is empty 

Answer 1

It is empty due to firefox's security policy, which prevents content scripts from loading resource URLs in frames. The solution may be to install it directly from the background script, for this you will need to use a low-level sdk.

 var { viewFor } = require("sdk/view/core"); var tab_utils = require("sdk/tabs/utils"); var iframe = viewFor(tab).linkedBrowser._contentWindow.document.querySelector('iframe[src="' + self.data.url("sandbox.html") + '"]') iframe.contentWindow.location.href = iframe.getAttribute("src") 

therefore, fully working code will look like this:

data / appender.js

 var iframeTag = document.createElement("iframe"); iframeTag.src = self.options.frameUrl; document.body.appendChild(iframeTag); // the html tag of iframe is empty // note that the iframe is attached after the content ready event, so you have to inform the background when it can start working with the iframe self.port.emit("attached", true); 

main.js

 tabs = require("sdk/tabs") self = require("sdk/self") var { viewFor } = require("sdk/view/core"); tab_utils = require("sdk/tabs/utils"); tabs.on("ready", function(tab) { var worker = tab.attach({ contentScriptFile: [self.data.url("js/appender.js") ], attachTo: 'top', contentScriptOptions: { frameUrl: self.data.url("sandbox.html") } }); worker.port.on('attached', function() { reinitIframe(tab) }); function reinitIframe(tab) { var iframe = viewFor(tab).linkedBrowser._contentWindow.document.querySelector('iframe[src="' + self.data.url("sandbox.html") + '"]') iframe.contentWindow.location.href = iframe.getAttribute("src") } }) 

You may need a cross-process wrapper to make it work in a future version of Firefox with electrolysis

Answer 2

Found a better way. You add an empty <iframe> and attach an event listener for the load event. Then you can easily add any elements you want in the iframe, as usual.

Include this in your content - script:

 var iframe = document.createElement('iframe'), div = document.createElement('div'); div.textContent('Hello World'); document.body.appendChild(iframe); iframe.addEventListener('load', function(){ this.contentWindow.document.body.appendChild(div) })