title: How to view css stylesheet injected by a Google Chrome extension using dev tools?
body: <p>I'm injecting a css file from my chrome extension using the manifest.json (<a href="https://github.com/foobarbecue/gottafixit/blob/master/chromeext/manifest.json" rel="noreferrer">full source</a>):</p>
  
  <pre><code>  "content_scripts": [
      {
        "matches": [
          "http://*/*"
        ],
        "css":["src/inject/gfi_extension.css"],
        "js": [/*...*/]
      }
    ] 
  </code></pre>
  
  <p>In Chrome Dev Tools, if I inspect an element which is affected by the injected css, the rules are visible, but in the upper right where the source filename would normally be, it just says "injected stylesheet." I'd like to view ALL of the rules being injected, even those that affect elements which do not currently exist in the DOM.</p>
  
  <p>I would have expected the .css to appear in "sources" under "content scripts" with the .js files, but they aren't there.</p>
  
  <p>Is there a way to view the .css file through dev tools? If not, please explain why there isn't.</p>
  
  <p>Edit: I've just found that this question also appears as a "sub-question" of <a href="https://stackoverflow.com/questions/18533820/how-do-i-remove-an-injected-css-file">this one</a>, however no one over there has attempted to answer it, even though there is an accepted answer.</p>