Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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.

like image 464
foobarbecue Avatar asked Feb 09 '15 03:02

foobarbecue


People also ask

How can I see the CSS files loaded in Google Chrome?

On Chrome's Developer Tools tab (CTRL + SHIFT + I), go to Resources (you may have to enable Resource tracking on that page), and click on the sub-tab Stylesheets. That will show all css files loaded by that page. Save this answer.

How do I view CSS in dev tools?

Click on the three vertical dots located on the top-right of Chrome dev tools. Select "More Tools" from the drop-down menu. You'll discover a variety of options when you click "More Tools." From the various options, select the CSS overview feature.

How do I view CSS files in inspect element?

How can find the css file from inspector ? right click, choose inspect element and will open the styles tab on your right and u can see the classes that holds the css and as well on right top will show in which file name is that class.


1 Answers

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.

like image 177
Kayce Basques Avatar answered Sep 23 '22 17:09

Kayce Basques