如何使用开发工具查看由 Google Chrome 扩展注入的 css 样式表？

Question

我正在使用 manifest.json (full source):

从我的 chrome 扩展中注入一个 css 文件

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

在 Chrome Dev Tools 中，如果我检查受注入 css 影响的元素，规则是可见的，但在源文件名通常所在的右上角，它只是说 "injected stylesheet." 我想查看所有被注入的规则，甚至那些影响 DOM.

当前不存在的元素的规则

我原以为 .css 会与 .js 文件一起出现在 "content scripts" 下的 "sources" 中，但它们不在那里。

有没有办法通过开发工具查看 .css 文件？如果没有，请说明为什么没有。

编辑：我刚刚发现这个问题也显示为 this one 的 "sub-question"，但是那里没有人试图回答它，即使有一个公认的答案。

Answer 1

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

注入的 URL 可以在应用程序的控制台选项卡上使用 getURL 方法获取运行时 URL：

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

并生成源代码：

参考资料

Answer 2

转到 Sources，然后转到 Content Scripts。你必须转到扩展名，然后你会看到注入的文件。

Answer 3

如果您通过 content_scripts 注入 CSS，似乎没有办法做到这一点。我在这里提交了一个错误：https://crbug.com/800070

当扩展由您控制时，Paul Irish 建议使用此代码模式以使您的样式可检查：https://github.com/lateral/chrome-extension-blogpost/compare/master...paulirish:master

对于其他人的扩展，据我所知，如果您走 content_scripts 路线，则无法在 DevTools 中查看注入样式表的源代码。

如何使用开发工具查看由 Google Chrome 扩展注入的 css 样式表？

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

user-interface

manifest

file-browser

google-chrome-extension

google-chrome-devtools