iframe - 在 Firefox 扩展中的注入(inject) iframe 中加载本地 html 文件

Question

我目前正在开发一个 firefox 扩展，当用户单击扩展图标时，它基本上会在当前页面中插入一个 iframe。
我设法插入 iframe 代码，我想出了如何将 src 属性链接到我的 html 文件。

在 chrome 版本中，我只是做了一个

 var main_html = chrome.extension.getURL('main.html');

我将链接传递给 iframe 的 src 属性，如下所示:

 iframe.setAttribute("src",main_html);

所以 main_html 是一个类似于 resource://idofmyextension/content/data/main.html 的链接

但是，正如我所怀疑的，我收到一个安全错误，告诉我位于当前 url 的内容无法加载数据或建立指向我的 main.html 文件的链接。

有没有办法通过这个安全限制？或者在我的 iframe 中加载我的 html 文件的另一种方法？

提前致谢。

Answer 1

我假设使用 Addon SDK ，这更类似于 Google Chrome 扩展开发，而不是 Firefox 中的常规 XUL 开发。但是，我在这里解释的方法在没有附加 SDK 的情况下也适用。

目前无法在附加 SDK 中使用，但有一些相关工作，请参阅 Bug 820213 .

目前我想到的唯一解决方法是使用 data:网址。因此，改为:

const { data } = require("self");

let url = data.url("main.html");

// pass the url to the iframe

你将会有:

const { data } = require("self");

let content = encodeURIComponent(data.load("main.html"));
let url = "data:text/html;charset=utf-8," + content;

// pass the url to the iframe

注意 data.load而不是 data.url :您基本上加载资源的内容并将其用作数据 url。
它很丑陋，但至少可以在某些情况下使用，直到得到适当的修复。

希望能帮助到你!