Url immagine relativa nello script di contenuto nell'SDK add-on per Firefox

Question

Attualmente sto sviluppando un'estensione per Firefox utilizzando l'SDK add-on e ho riscontrato un problema reale. In pratica la mia estensione solo inietta uno script contenuto in una pagina web come questo:

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

Sia start.js e insertnote.png si trovano nel cartella dati Tutto funziona tranne l'immagine. Non riuscivo a trovare come ottenere l'url reale per il tag immagine. L'url relativo non sembra funzionare. :(

è che anche possibile includere immagini interiori del addon all'interno degli script contenuti o devo solo usare URL assoluti al mio webserver?

Answer 1

Il seguente c ode dovrebbe funzionare

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

Naturalmente sarebbe più efficiente di passare un solo oggetto che contiene l'URL di ogni bene.

Answer 2

Il problema è che gli URL relativi vengono interpretati rispetto al documento, che in questo . caso è la pagina, dal momento che si sta mettendo la direttamente nella pagina, come una stringa

in generale, le pagine può link per le immagini in un add-on se l'add-on in modo esplicito dice, hanno per utilizzare l'chrome appropriato: // URI per farlo

Answer 3

È possibile utilizzare "contentScriptOptions" per passare i valori negli script di contenuto.

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