Firefox'ta içerik komut dosyasındaki bağıl görüntü URL'si Add-On SDK

Question

Şu anda Add-On SDK kullanarak bir Firefox eklentisi geliştiriyorum ve gerçek bir soruna çarptı.

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

Hem start.js ve insertnote.png bulunur: Temelde Uzantımın sadece böyle bir web sayfası içine bir içerik komut dosyası enjekte veri klasörü. Her şey görüntü dışında çalışır. Resim etiketi için gerçek URL’yi nasıl alacağımı bulamadım. Göreceli url çalışmıyor gibi görünüyor. :(

bile mümkündür içerik komut içine addon iç görüntüleri dahil etmek veya sadece benim sunucunuza mutlak URL'ler kullanması gerektiğini mı?

Answer 1

Aşağıdaki c gazel her öğenin url içeren sadece bir nesne geçmesine

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

Doğal olarak daha verimli olacaktır çalışmalıdır.

Answer 2

sorun göreli URL'ler belgeye göre yorumlanır yani, bu hangi sayfa, bir dize olarak doğrudan sayfaya koyduğunuzdan sayfadır.

Genel olarak, sayfa , eklenti açık bir şekilde belirtiyorsa eklentilere resimler ekleyebilirsiniz. Bunu yapmak için uygun chrome: // URI kullanmak için:

Answer 3

Değerleri içerik komut dosyalarına iletmek için "contentScriptOptions" öğesini kullanabilirsiniz.

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

$('body').append('<div>1</div><img src="' + self.options.pngUrl + '" /><div>2</div>'); 

ait