Javascript Firefox加载项SDK中内容脚本中的相对图像url

我目前正在使用附加SDK开发Firefox扩展，遇到了一个真正的问题。基本上，我的扩展只是将一个内容脚本注入网页，如下所示：

main.js

var pageMod = require("page-mod");
var self = require("self");

pageMod.PageMod({
  include: "http://mail.google.com/mail/*",
  contentScriptFile: [self.data.url("jquery.js"),
                      self.data.url("start.js")],
  attachTo : ["top"]
});

$('body').append('<div>1</div><img src="insertnote.png" /><div>2</div>');

var pngurl = self.data.url("insertnote.png");

//inside PageMod constructor
onAttach: function(worker) {
  worker.port.emit("imageurl",pngurl);
}

self.port.on("imageurl", function(imgurl){
  var img = document.createElement("img");
  img.src = imgurl;
  document.body.appendChild(img);
});

start.js

var pageMod = require("page-mod");
var self = require("self");

pageMod.PageMod({
  include: "http://mail.google.com/mail/*",
  contentScriptFile: [self.data.url("jquery.js"),
                      self.data.url("start.js")],
  attachTo : ["top"]
});

$('body').append('<div>1</div><img src="insertnote.png" /><div>2</div>');

var pngurl = self.data.url("insertnote.png");

//inside PageMod constructor
onAttach: function(worker) {
  worker.port.emit("imageurl",pngurl);
}

self.port.on("imageurl", function(imgurl){
  var img = document.createElement("img");
  img.src = imgurl;
  document.body.appendChild(img);
});

$（'body'）。追加（'12'）；

start.js

和

insertnote.png

都位于数据文件夹中。 除了图像之外，一切都正常。我就是找不到如何获取图像标签的真实url。相对url似乎不起作用：(

---

甚至可以将插件的内部图像包含在内容脚本中，还是只使用Web服务器的绝对URL？

问题在于，相对URL是相对于文档进行解释的，在本例中，文档就是页面，因为您将直接作为字符串放入页面中

---

一般来说，如果加载项明确表示，页面可以链接到加载项中的图像；它们必须使用相应的chrome://URI来完成此操作。

以下代码应该可以工作

main.js

var pageMod = require("page-mod");
var self = require("self");

pageMod.PageMod({
  include: "http://mail.google.com/mail/*",
  contentScriptFile: [self.data.url("jquery.js"),
                      self.data.url("start.js")],
  attachTo : ["top"]
});

$('body').append('<div>1</div><img src="insertnote.png" /><div>2</div>');

var pngurl = self.data.url("insertnote.png");

//inside PageMod constructor
onAttach: function(worker) {
  worker.port.emit("imageurl",pngurl);
}

self.port.on("imageurl", function(imgurl){
  var img = document.createElement("img");
  img.src = imgurl;
  document.body.appendChild(img);
});

start.js

var pageMod = require("page-mod");
var self = require("self");

pageMod.PageMod({
  include: "http://mail.google.com/mail/*",
  contentScriptFile: [self.data.url("jquery.js"),
                      self.data.url("start.js")],
  attachTo : ["top"]
});

$('body').append('<div>1</div><img src="insertnote.png" /><div>2</div>');

var pngurl = self.data.url("insertnote.png");

//inside PageMod constructor
onAttach: function(worker) {
  worker.port.emit("imageurl",pngurl);
}

self.port.on("imageurl", function(imgurl){
  var img = document.createElement("img");
  img.src = imgurl;
  document.body.appendChild(img);
});

当然，只传递一个包含每个资产url的对象会更有效。

您可以使用“contentScriptOptions”将值传递到内容脚本中

main.js

var pageMod = require("sdk/page-mod");
var self = require("sdk/self");
pageMod.PageMod({
  include: "http://mail.google.com/mail/*",
  contentScriptFile: [self.data.url("jquery.js"),
                      self.data.url("start.js")],
  attachTo : ["top"],
  contentScriptOptions: {
    pngUrl: self.data.url("insertnote.png")
  }
});

start.js

$('body').append('<div>1</div><img src="' + self.options.pngUrl + '" /><div>2</div>');

$（'body'）。追加（'12'）；

你能举例说明如何在我的例子中使用chrome://URI吗？是的，请举例说明。我试图将

contentaccessible=Yes

添加到路径中，但似乎不起作用：@BorisZbarsky:是的，请举例说明。我试图将

contentaccessible=Yes

添加到路径中，但似乎不起作用：问题是关于Firefox的扩展，你为什么回答Chrome？@alihagheatkhah Firefox在内部使用Chrome://URIs引用浏览器用户界面的部分内容（也称为“Chrome”），并且在名为Chrome的浏览器出现之前多年都是这样做的，并试图为部分用户界面使用通用术语作为品牌名称。这似乎是一个选项，但非常痛苦。但无论如何，感谢我接受此答案ContentScriptOptions也可以将此值设置到您需要的位置。请参阅下面的答案。可能的重复项