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

Question

I'm trying to display remote images in a FireFox add-on panel, but the src attributes are being converted from something like this: 我正在尝试在FireFox附加面板中显示远程图像，但是src属性正在从以下内容转换：

http://example.com/image.jpg

to something like this: 这样的事情：

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

I can't figure out if I'm breaking a security policy or not. 我无法弄清楚我是否违反了安全政策。

In my add-on script (index.js) I'm retrieving image URLs using the sdk/request API and passing them to my content script (data/my-panel.js). 在我的附加脚本（index.js）中，我正在使用sdk / request API检索图像URL并将它们传递给我的内容脚本（data / my-panel.js）。 My data/my-panel.js file is creating DOM elements in my panel file (data/popup.html) – including images – using the URLs passed from index.js. 我的data / my-panel.js文件正在我的面板文件（data / popup.html）中创建DOM元素 - 包括图像 - 使用从index.js传递的URL。 Here are the relevant bits of code: 以下是相关的代码：

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

The console.log(img) line is displaying the URLs correctly, but not in popup.html... console.log(img)行正确显示URL，但不在popup.html中...

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

How can I make the images' src attributes point directly to the remote URLs? 如何使图像的src属性直接指向远程URL？ Thanks! 谢谢！

Answer 1

I figured out what I was doing wrong. 我弄清楚我做错了什么。 Using JSON.stringify() on the img URL was adding double quotes around it. 在img URL上使用JSON.stringify（）是在它周围添加双引号。 Removing it fixed the images: 删除它修复图像：

img = items.object;

Answer 2

I'm not so sure about SDK permissions, but as a last resort you can turn the remote url into a resource URI like this - 我不太确定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

Then you can load resource://rawr and it should work. 然后你可以加载resource://rawr ，它应该工作。

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-03-15 16:59:03

解决方案2
0 2016-03-15 02:08:01

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-03-15 16:59:03

解决方案2 0 2016-03-15 02:08:01

解决方案1
1 已采纳 2016-03-15 16:59:03

解决方案2
0 2016-03-15 02:08:01