Relative image url in content script in Firefox Add-On SDK

Question

I'm currently developing a Firefox extension using Add-On SDK and bumped into a real problem. Basically my extension just injects a content script into a webpage like this:

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

Both start.js and insertnote.png are located in the data folder. Everything works except for the image. I just could't find how to get the real url for the image tag. Relative url doesn't seem to be working. :(

Is that even possible to include the addon's inner images inside content scripts or should I just use absolute urls to my webserver?

Answer 1

You can use "contentScriptOptions" to pass the values into the content scripts.

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