在firefox扩展中的一个注入iframe中加载一个本地html文件 [英] Loading a local html file in an injected iframe within a firefox extension

问题描述

我目前正在开发一个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的链接但是，正如我怀疑，我得到一个安全错误告诉我，位于当前网址的内容无法加载数据或建立一个链接到我的main.html文件。 b
$ b

p>

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

在此先感谢。

解决方案

我假定使用 Addon SDK ，这与Google Chrome浏览器扩展程序开发更类似于Firefox中的常规XUL开发。然而，我在这里解释的方法，也没有附加SDK的工作。

目前在附加SDK是不可能的，但有一些工作，请参阅错误820213 。

我现在想到的唯一解决方法是使用 data： url。所以，而不是：

  const {data} = require（self）; 
 
让url = data.url（main.html）; 
 
 //将网址传递给iframe 
  

您将拥有：

  const {data} = require（self）; 
 
 let content = encodeURIComponent（data.load（main.html））; 
让url =data：text / html; charset = utf-8+ content; 
 
 //将网址传递给iframe 
  

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

希望有帮助！

I'm currently developping a firefox extension which basically insert an iframe in the current page when the user click on the extension icon. I managed to insert the iframe code, I figured out how to link the src attribute to my html file.

In the chrome version, I simply do a

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

And I pass the link to the src attribute of the iframe like that :

 iframe.setAttribute("src",main_html);

So main_html is a link like resource://idofmyextension/content/data/main.html

But, as I suspected, I get a security error telling me that the content located at the current url cannot load data or establish a link to my main.html file.

Is there a way to pass this security restriction ? Or another way to load my html file in my iframe ?

Thanks in advance.

解决方案

I'm assuming the usage of the Addon SDK, that is more similar to Google Chrome extensions development, than the regular XUL development in Firefox. However, the approach I'm explaining here works also without the Add-on SDK.

In Add-on SDK is not currently possible, but there is some working about it, see Bug 820213.

The only workaround that comes to my mind at the moment, is using data: url. So, instead having:

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

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

// pass the url to the iframe

You will have:

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

Notice the data.load instead of data.url: you basically load the content of the resource and use that as data url. It's ugly but at least can be used in some cases until a proper fix.

Hope it helps!

这篇关于在firefox扩展中的一个注入iframe中加载一个本地html文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！