user-interface - 如何使用开发工具查看 Google Chrome 扩展注入(inject)的 css 样式表？

Question

我使用manifest.json ( full source ) 从我的 chrome 扩展注入(inject)一个 css 文件:

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

在 Chrome 开发工具中，如果我检查受注入(inject) css 影响的元素，规则是可见的，但在源文件名通常所在的右上角，它只是显示“注入(inject)的样式表”。我想查看正在注入(inject)的所有规则，甚至是那些影响 DOM 中当前不存在的元素的规则。

我本希望 .css 与 .js 文件一起出现在“内容脚本”下的“源”中，但它们不在那里。

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

编辑:我刚刚发现这个问题也显示为 this one 的“子问题” ，但是那里没有人试图回答这个问题，即使有一个被接受的答案。

Answer 1

如果您通过 content_scripts 注入(inject) CSS，则似乎无法执行此操作。我在这里提交了一个错误:https://crbug.com/800070

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

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