2

I'm building a Chrome extension, and am trying to add a div with a background image to the DOM via a content script. The CSS loads in correctly, and the image URL seems to be correct looking at it via the Developer Tools inspector.

$('.close-button').css('background', 'url('+chrome.extension.getURL('img/btn_close.png')+')');

The URL shows up in the inspector as 

chrome-extension://fdghianmcdbcgihapgdbjkdoaaocmoco/img/btn_close.png

But the image does not load in the background. If I do the same thing, but load the image as the src of an img tag, the image plainly shows as broken in the browser.

However, when I paste this URL into the browser URL bar and load it, it shows up fine. What's the problem loading it into the DOM?

Travis
  • 4,018
  • 4
  • 37
  • 52
  • I don't know anything about chrome extension development. But, if worse comes to worse you could try converting the image to a data url. – Matt Greer Apr 22 '12 at 02:55

1 Answers1

13

I found the answer in the chrome extension docs. By default, files in the extension root are not accessible in the web page DOM. The developer can override this with the "web_accessible_resources" setting in the manifest.json file:

http://code.google.com/chrome/extensions/manifest.html#web_accessible_resources

{
  ...
  "web_accessible_resources": [
    "images/my-awesome-image1.png",
    "images/my-amazing-icon1.png",
    "style/double-rainbow.css",
    "script/double-rainbow.js"
  ],
  ...
}

Special shout-out as well to Matt Greer's comment suggesting using a data url, which I believe also works.

Travis
  • 4,018
  • 4
  • 37
  • 52
  • 1
    Note: This feature is disabled by default in manifest version 1 (when `"manifest_version": 2` is specified or missing). It is automatically enabled when the property is set. – Rob W Apr 22 '12 at 07:28