Firefox添加内容脚本中的相对图像网址

我目前正在使用Add-On 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"]
});

start.js

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

start.js和insertnote.png都位于数据文件夹中。 除了图像之外，一切都有效。 我只是无法找到如何获得图片标签的真实网址。 相对网址似乎不工作。 :(

甚至有可能在内容脚本中包含插件的内部图像，或者我应该只使用绝对URL到我的网络服务器？

---

下面的代码应该可以工作

main.js

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

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

start.js

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

---

问题在于，相对URL是相对于文档进行解释的，在这种情况下，该文档是页面，因为您直接将该文档作为字符串放入页面。

一般来说，如果加载项明确说明，页面可以链接到加载项中的图像; 他们必须使用适当的chrome：// URI来做到这一点。

链接地址: http://www.djcxy.com/p/45747.html

上一篇: Relative image url in content script in Firefox Add

下一篇: How to reference a file in the data directory of a Firefox extension?