title: Relative image url in content script in Firefox Add-On SDK
body: <p>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:</p>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>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"]
  });
  </code></pre>
  
  <p><strong>start.js</strong></p>
  
  <pre><code>$('body').append('&lt;div&gt;1&lt;/div&gt;&lt;img src="insertnote.png" /&gt;&lt;div&gt;2&lt;/div&gt;');
  </code></pre>
  
  <p>Both <code>start.js</code> and <code>insertnote.png</code> 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. :(</p>
  
  <p>Is that even possible to include the addon's inner images inside content scripts or should I just use absolute urls to my webserver?</p>