How to view css stylesheet injected by a Google Chrome extension using dev tools?

Question

I\'m injecting a css file from my chrome extension using the manifest.json (full source):

  \"content_scripts\": [
    {
      \"matches\": [
        \"http://*/         


        

Answer 1

Go to Sources and then Content Scripts. You have to go to the extension name and then you'll see the injected files.

Answer 2

Looks like there's no way to do this if you inject the CSS via content_scripts. I filed a bug here: https://crbug.com/800070

When the extension is in your control, Paul Irish suggests using this code pattern in order to make your styles inspectable: https://github.com/lateral/chrome-extension-blogpost/compare/master...paulirish:master

For other people's extensions, as far as I can tell there's no way to view the source code of the injected stylesheets in DevTools, if you go the content_scripts route.

Answer 3

Use the Chrome App and Extensions Developer Tool on an extension which injects CSS, such as Bootstrap Grid Overlay:

the injected URL can be used on the console tab on the app to get the runtime URL using the getURL method:

chrome.runtime.getURL("src/grid.css")

and produce the source:

References

• Content Scripts - Google Chrome

• chrome.runtime - Google Chrome