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

Question

I am currently developing a Firefox extension using the Add-On SDK and am facing a real problem. Basically, my extension simply injects the script content into a web page as follows:

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 in the data folder. Everything works except for the image. I just couldn't find how to get the real url for the image tag. Relative URL not working .: (

Is it possible to include internal addon images inside content scripts or just use absolute URLs for my web server?

Answer 1

The following code should work

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

Naturally, it would be more efficient to transfer only one object containing each resource URL.

Answer 2

You can use "contentScriptOptions" to pass values ​​to 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>'); 

Answer 3

The problem is that relative URLs are interpreted relative to the document, which in this case is a page, since you put directly on the page as a string.

In general, pages can link to images in an add-in if the add-in explicitly says so; they should use the appropriate chrome: // URI for this.