CODEWITHSUNDEEP
javascriptfirefox-addonfirefox-addon-sdk
user2651403
user2651403

Reputation: 488

How can I link to an internal image within a Firefox extension?

I'm using Firefox SDK.

The following code works, so at least I know everything is working as it's supposed to:

document.getElementById("mydiv").src="http://somesite/externalimage.jpg";

However, Mozilla isn't approving this version of my extension, because I'm linking to an external image.

So what I have to do is link to the image inside the extension (I uploaded the same image to inside the extension).

I tried the following code but it did not work.

document.getElementById("mydiv").src=" + data.url("externalimage.jpg") + ";

So how do I link to an image inside the extension?

Upvotes: 1

Views: 201

Answers (2)

jongo45
jongo45

Reputation: 3090

Just use a relative url. If the html file and the image file are both located in the /data/ folder. Then the following should work:

document.getElementById("mydiv").src="some-image.jpg"

Upvotes: 0

jsantell
jsantell

Reputation: 1268

First off, your syntax is wrong and that will error. It should be:

document.getElementById("mydiv").src = data.url("externalimage.jpg");

Are you including the data module from self?

var data = require('sdk/self').data;

What context is this in? Your main SDK code has access to the data.url function, but if this is in a content script, you won't have it there, you'll need to pass in the value with a message

In main.js

// Assuming a pagemod here, but can be any worker
var data = require('sdk/self').data;
var { PageMod } = require('sdk/page-mod');
PageMod({
  include: '*',
  contentScriptFile: data.url('script.js'),
  onAttach: function (worker) {
    worker.port.emit('link', data.url('externalimage.png');
  }
});

In content script, script.js:

self.port.on('link', function (url) {
  document.getElementById("mydiv").src = url;
});

Upvotes: 1

Related Questions