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('

1

2

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

Accepted Answer

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 pass just one object containing every asset's url.

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

Solution

Problem

Related problems