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)行正确显示了网址，但没有在popup.html中显示...

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

如何制作图像＆＃39; src属性直接指向远程网址？谢谢！

Answer 1

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

img = items.object;

Answer 2

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

val rdd = sc.parallelize(1 to 100)
val rdd_tuple = rdd.map(x => (x.toLong, (x*10).toLong, x.toDouble))
var new_rdd = rdd_tuple
println("Initial RDD count: " + new_rdd.count())
for (i <- 2 to 4) {
  new_rdd = new_rdd.union(rdd_tuple)
}
println("New count after loop: " + new_rdd.count())

然后你可以加载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，它应该可以工作。

在firefox附加面板

2 个答案: