在firefox附加面板中显示远程图像

Question

我正在尝试在FireFox附加面板中显示远程图像，但是src属性正在从以下内容转换：

http://example.com/image.jpg

这样的事情：

resource://addon_name/data/%22http://example.com/image.jpg%22

我无法弄清楚我是否违反了安全政策。

在我的附加脚本（index.js）中，我正在使用sdk / request API检索图像URL并将它们传递给我的内容脚本（data / my-panel.js）。 我的data / my-panel.js文件正在我的面板文件（data / popup.html）中创建DOM元素 - 包括图像 - 使用从index.js传递的URL。 以下是相关的代码：

index.js

var Request = require("sdk/request").Request;
var panel = require("sdk/panel").Panel({
  width: 500,
  height: 500,
  contentURL: "./popup.html",
  contentScriptFile: "./my-panel.js"
});
  Request({
      url: url,
      onComplete: function(response) {
           // Get the JSON data.
          json = response.json;
          // Launch the popup/panel.
          panel.show();
          panel.port.emit("sendJSON", json);
      }
  }).get();

data/my-panel.js

var title;
var desc;
var list;
var titleTextNode;   
var descTextNode; 

self.port.on("sendJSON", function(json) {

    json.docs.forEach(function(items) {
        title = JSON.stringify(items.sourceResource.title);
        desc = JSON.stringify(items.sourceResource.description);
        img = JSON.stringify(items.object);       
        console.log(img);
        var node = document.createElement("li");                 // Create a <li> node
        var imgTag = document.createElement("img");                 // Create a <img> node
        imgTag.setAttribute('src', img);
        imgTag.setAttribute('alt', desc);
        imgTag.style.width= '25px';
        titleTextNode = document.createTextNode(title);
        descTextNode = document.createTextNode(desc);
        node.appendChild(titleTextNode);                         // Append the text to <li>
        node.appendChild(descTextNode);                          // Append the text to <li>
        document.getElementById("myList").appendChild(node);     // Append <li> to <ul> with id="myList"
        document.getElementById("myImgs").appendChild(imgTag);
    });
});

console.log(img)行正确显示URL，但不在popup.html中...

<!DOCTYPE html>
<html>
    <head>
    </head>
<body>
    <ul id="myList"></ul>
    <p id="myImgs"></p>
</body>
</html>

如何使图像的src属性直接指向远程URL？ 谢谢！

Answer 1

我弄清楚我做错了什么。 在img URL上使用JSON.stringify（）是在它周围添加双引号。 删除它修复图像：

img = items.object;

Answer 2

我不太确定SDK权限，但作为最后的手段，您可以将远程URL转换为这样的资源URI -

var res = Services.io.getProtocolHandler("resource").QueryInterface(Ci.nsIResProtocolHandler);
res.setSubstitution("rawr", Services.io.newURI('http://www.bing.com/',null,null));

// now try navigating to resource://rawr it will load bing

然后你可以加载resource://rawr ，它应该工作。