Firefox Add-On SDK中的内容脚本中的相对图像url [英] Relative image url in content script in Firefox Add-On SDK

问题描述

我正在开发一个使用附加SDK的Firefox扩展，并碰到一个真正的问题。基本上我的扩展只是注入一个内容脚本到这样的网页：
$ b 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

< pre>< code> $ ; / DIV>'）;

start.js 和 insertnote.png 位于数据文件夹中。
除了图片以外的所有东西都可以使用。我只是无法找到如何获得图像标签的真实网址。相对网址似乎并没有工作。 ：（b / b）
$ b是甚至可以在内容脚本中包含插件的内部图像，或者我应该只使用绝对的URL到我的web服务器？

解决方案

以下代码应该可以工作

main.js

$ b $

  var pngurl = self.data.url（insertnote.png）; 
 
 // PageMod构造函数中
 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）; 
 
 
 
 
 
 
当然，只传递一个包含每个资产url的对象会更有效率。
 
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?
解决方案
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.

                        
这篇关于Firefox Add-On SDK中的内容脚本中的相对图像url的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！