我使用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 的“子问题” ,但是那里没有人试图回答这个问题,即使有一个被接受的答案。
最佳答案
如果您通过 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)样式表的源代码。
关于user-interface - 如何使用开发工具查看 Google Chrome 扩展注入(inject)的 css 样式表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28402524/