SoMeGoD SoMeGoD - 4 months ago 7
Javascript Question

Packed Image on Chrome Extension won't load on .append()

I've an image packed with my extension that I'd like to add to a page by using content script. I have my menu.js file that appends everything correctly, but I can't seem to work it out with the packed image.

I've tried

var loader = chrome.extension.getURL("repo/loader.gif");


and also

var loader = "chrome-extension://" + chrome.runtime.id + "/repo/loader.gif"


as well for

var loader = "chrome-extension://__MSG_@@extension_id__/repo/loader.gif";


and even

var loader = "chrome-extension://" + __MSG_@@extension_id__ + "/repo/loader.gif";


And this is the jQuery to append

$('body').append('<div id="gacHover1"><span>Content is loading</span><img src="' + loader + '" width="470" height="300"></div>');


What Am I missing?

Answer

Try chrome.extension.getURL("/repo/loader.gif"); instead, note / before repo.

Also take a look to web_accessible_resources in your manifest file and make sure that you allow the packed image you're trying to use.

{
  ...
  "web_accessible_resources": [
    "images/*.png",
    ...
  ],
  ...
}

Or instead of "images/*.png" name just the images you want,e.g repo/loader.gif.

Hope this