将具有多个应用页面的Chrome扩展程序移植到Firefox

Question

铬

我有一个Chrome扩展程序，其行为类似于一个Web应用程序（除了使用chrome。* API和跨源请求），其中包含多个html页面，这些页面都使用 background.html 与NPAPI插件。

扩展的结构（来自扩展名的根目录）如下：

• background.html
• 插件/（NPAPI插件包）
• 前端/
  • main.html中
  • foo.html
  • 一个bar.html
  • ..

在扩展安装时加载background.html并加载NPAPI插件，无限期运行（直到浏览器关闭或扩展被停用/删除）。

点击扩展程序的工具栏按钮后，会打开 main.html ，这会提供UI导航以访问其他页面foo.html和bar.html。

这些页面中的任何一个都使用chrome.extension.getBackgroundPage()来调用NPAPI插件的方法并同步接收响应。

---

火狐

关于后台NPAPI插件，这已在previous question of mine中得到解答。

从当前的addon sdk中可用的选项，Firefox限制消息传递到JSON可序列化值，因此我不能再直接调用NPAPI插件方法（通过传递插件的返回值来解决）。

剩下的问题涉及前端应用页面，这些页面是本地的，应该是受信任的脚本。我已经尝试将它们加载为 Panels ，但是Panel似乎不适合完整的UI页面，而是适用于小的信息片段。

有没有办法加载这些页面而不会在每个页面中以编程方式注入page-mod内容？（这也需要在页面导航时注入新脚本）。

Answer 1

使用CSSOM和data URI以编程方式加载页面：

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

<强>参考

• Data URI Converter

• NPM: datauri package