Why Do Chrome Extension Images Show Up As Broken When Added To The Dom?

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 corre

Solution 1:

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.