How to view css stylesheet injected by a Google Ch

2019-04-03 17:10发布

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.

3条回答
乱世女痞
2楼-- · 2019-04-03 17:33

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.

查看更多
神经病院院长
3楼-- · 2019-04-03 17:41

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

查看更多
不美不萌又怎样
4楼-- · 2019-04-03 17:51

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

查看更多
登录 后发表回答