title: Why do Chrome Extension Images Show Up As Broken When Added to the DOM?
body: <p>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.</p>
  
  <pre><code>$('.close-button').css('background', 'url('+chrome.extension.getURL('img/btn_close.png')+')');
  </code></pre>
  
  <p>The URL shows up in the inspector as </p>
  
  <pre><code>chrome-extension://fdghianmcdbcgihapgdbjkdoaaocmoco/img/btn_close.png
  </code></pre>
  
  <p>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.</p>
  
  <p>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?</p>