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?

possible duplicate of [How to reference a file in the data directory of a Firefox extension?](http://stackoverflow.com/questions/11551467/how-to-reference-a-file-in-the-data-directory-of-a-firefox-extension) — Roland Pihlakas, Jan 29 '15 at 16:32

score 13 · Answer 1 · edited Nov 09 '15 at 13:27

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

score 2 · Accepted Answer · answered Nov 19 '12 at 21:15

2

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.

answered Nov 19 '12 at 21:15

paa

5,048
1
18
22

1

This seems like an option though quite painful. But thanks anyway I accept this answer – Kirill Ivlev Nov 19 '12 at 21:51
1

contentScriptOptions can also get this value to where you need it. See answer below. – Sean Colombo May 31 '13 at 02:33

score 0 · Answer 3 · answered Nov 19 '12 at 04:47

0

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

In general, pages can link to images in an add-on if the add-on explicitly says so; they have to use the appropriate chrome:// URI to do that.

answered Nov 19 '12 at 04:47

Boris Zbarsky

34,758
5
52
55

Can you give an example how to use chrome:// URI in my case? – Kirill Ivlev Nov 19 '12 at 05:57
Yes, please give an example. I tried to add `contentaccessible=yes` to a path but it doesen't seem to work: [How do I make an image accessible that resides inside a Firefox SDK Addon?](http://stackoverflow.com/q/23804391) – rubo77 May 22 '14 at 10:46
@BorisZbarsky: Yes, please give an example. I tried to add `contentaccessible=yes` to a path but it doesen't seem to work: [How do I make an image accessible that resides inside a Firefox SDK Addon?](http://stackoverflow.com/q/23804391) – rubo77 May 22 '14 at 10:48
The question is about Firefox extensions, why do you answer about Chrome? – Reyraa Oct 06 '14 at 14:27
2

@alihaghighatkhah Firefox uses chrome:// URIs internally to reference parts of the browser UI (also known as "the chrome"), and did for many years before the browser named Chrome appeared and attempted to appropriate a generic term for part of the UI as a brand name. – Boris Zbarsky Oct 06 '14 at 23:49
@BorisZbarsky thanks. of course I used the 'contentScriptOptions' as Sean Colombo answers, and the path to local file was like this: src="resource://jid1-ogfxvudba4qina-at-jetpack/example-extension/data/js/example-file.js" – Reyraa Oct 07 '14 at 07:33

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

3 Answers3

Linked