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

我试图在FireFox附加面板中显示远程图像，但是

src

属性是从以下内容转换而来的：

http://example.com/image.jpg

对这样的事情：

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

我不知道我是否违反了安全策略

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

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

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

data/my panel.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();

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

如何使图像“

src

属性直接指向远程URL？

---

谢谢

我不太确定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

，它应该会起作用。

我发现我做错了什么。在img URL上使用JSON.stringify（）会在其周围添加双引号。移除它修复了图像：

---

img=items.object
谢谢@Noitidart。我看看明天能不能把它修好。