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

Question

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

user-interfacegoogle-chrome-extensiongoogle-chrome-devtoolsmanifestfile-browser

24

我正在使用manifest.json从我的Chrome扩展程序中注入CSS文件(完整源代码)：

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

在Chrome开发者工具中，如果我检查一个受注入CSS影响的元素，规则是可见的，但在通常显示源文件名的右上角，它只显示“injected stylesheet”。我想查看被注入的所有规则，即使它们影响当前不存在于DOM中的元素。

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

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

编辑：我刚刚发现这个问题也出现在这个问题的“子问题”中，然而，那里没有人尝试回答它，即使有一个被接受的答案。

- foobarbecue

2

你可以在内容脚本标签下看到injected.js，因为内容脚本在Web页面的上下文中运行，这些页面位于DevTools窗口的生命周期内。而正如你所提到的，CSS并不在DevTools窗口的生命周期内。 - Dayton Wang

2

你的两个解释都没有解释为什么注入的 .js 文件会出现，但注入的 .css 文件却不会。因此，你的解释是错误的。我希望你能明确表示你只是在猜测，这样就可以节省我大量时间来理解你的意思了！ - foobarbecue

2

对于误导，我们深表歉意。内容脚本是包含在Chrome扩展中的JavaScript文件，运行在网页上下文中：https://developer.chrome.com/devtools/docs/settings，而injected.css没有显示出来：https://dev59.com/emMl5IYBdhLWcg3wR1SD。 - Dayton Wang

1

@PaulSweatte，我们在这里进行了一场小的编辑战吗？请解释一下标签[tag:css]和[tag:content-script]在这里不相关。更重要的是，请解释一下超级通用的标签[tag:manifest]和[tag:file-browser]在这里的相关性。 - Xan

1

@PaulSweatte 对的。请阅读“manifest”标签的描述 - 建议不要使用它，因为它非常通用。对于实际问题而言，清单中唯一相关的部分是它是内容脚本，Chrome扩展程序总是包含一个清单，因此这是多余的。您是否同意将“manifest”替换为“content-script”，并将极其通用的“user-interface”替换为更相关的“CSS”？ - Xan

显示剩余7条评论

3个回答