24

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

  "content_scripts": [
    {
      "matches": [
        "http://*/*"
      ],
      "css":["src/inject/gfi_extension.css"],
      "js": [/*...*/]
    }
  ]

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.

I would have expected the .css to appear in "sources" under "content scripts" with the .js files, but they aren't there.

Is there a way to view the .css file through dev tools? If not, please explain why there isn't.

Edit: I've just found that this question also appears as a "sub-question" of this one, however no one over there has attempted to answer it, even though there is an accepted answer.

Community
  • 1
  • 1
foobarbecue
  • 6,780
  • 4
  • 28
  • 54
  • The chrome.devtools.* API modules are available only to the pages loaded within the DevTools window. Content scripts and other extension pages do not have these APIs. Thus, the APIs are available only through the lifetime of the DevTools window. To see the link for more details: https://developer.chrome.com/extensions/devtools – Dayton Wang Feb 09 '15 at 19:04
  • gui47, thanks, but I still don't understand. Why can I see the injected .js files but not the .css? Is this because the css is somehow injected outside of the "lifetime of the DevTools window"? Also, if you've got an answer, post it as an answer! – foobarbecue Feb 09 '15 at 22:33
  • 2
    You can see the injected.js under content scripts tag is because content scripts run in the context of webpages which are inside of the lifetime of the DevTools window. While as you mentioned the css is not through the lifetime of the DevTools window. – Dayton Wang Feb 10 '15 at 01:38
  • Ok, thanks... that's my upvote on your comment, because you are trying to help and seem like maybe you're making sense, but I still don't quite get it. I mean, clearly DevTools can access things which are loaded and applied to the DOM long before DevTools was opened, such as "normal" css files. So why doesn't Chrome just apply it like a normal css file? – foobarbecue Feb 10 '15 at 17:06
  • According to Match Pattern documentation, maybe it is because the schema section is very strict in what kind of URL's it allows, and "chrome-devtools" is not one of them. https://developer.chrome.com/extensions/match_patterns – Dayton Wang Feb 10 '15 at 18:17
  • 2
    Neither of your explanations explains the fact that injected .js shows up, but injected .css does not. Therefore, your explanations are incorrect. I wish you had made it clear that you were just guessing -- that would have saved me a lot of time trying to figure out what you mean! – foobarbecue Feb 11 '15 at 02:04
  • 2
    Apologize for the misleading. Content scripts are JavaScript files contained within Chrome extensions that run in the context of web pages: https://developer.chrome.com/devtools/docs/settings while injected.css isn't showing up: http://stackoverflow.com/questions/18533820/how-do-i-remove-an-injected-css-file – Dayton Wang Feb 11 '15 at 06:29
  • Ok, that question you linked to is helpful. Was there supposed to be something useful in the settings link? And yeah... I know what content scripts are, since I write them! – foobarbecue Feb 11 '15 at 15:12
  • 1
    @PaulSweatte So, do we have a little edit war here? Please explain how tags [tag:css] and [tag:content-script] are not relevant here. More importantly, explain how super-generic tags [tag:manifest] and [tag:file-browser] are relevant here. – Xan Aug 03 '15 at 15:08
  • @Xan. The question includes `manifest`.json and `view the .css file`. – Paul Sweatte Aug 03 '15 at 15:11
  • 1
    @PaulSweatte True. Please read the tag description of the `manifest` tag - it's recommended not to use it as it's very generic. The only relevant portion of the manifest to the actual question is that it's a content script, and a Chrome extension always includes a manifest, so it's redundant. Would you agree to swap `manifest` for `content-script`, and the extremely generic `user-interface` to a more relevant `css`? – Xan Aug 03 '15 at 15:34
  • @xan I'd agree with `content-script` and `file-browser`, since this question is essentially about the how to browse files in the chrome developer tools that are declared in the manifest.json content_scripts array. – Paul Sweatte Aug 03 '15 at 15:54

3 Answers3

8

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.

Kayce Basques
  • 23,849
  • 11
  • 86
  • 120
-4

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

enter image description here

Standard
  • 1,450
  • 17
  • 35
-6

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

Chrome App Extensions Developer Tool

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:

grid.css

References

Paul Sweatte
  • 24,148
  • 7
  • 127
  • 265