如何使用开发工具查看Google Chrome扩展程序注入的CSS样式表？ [英] How to view css stylesheet injected by a Google Chrome extension using dev tools?

问题描述

我使用manifest.json从我的扩展插件注入一个css文件（

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": [/*...*/]
    }
  ] 

Chrome开发工具，如果我检查一个受注入CSS影响的元素，规则是可见的，但在源文件名通常位于的右上角，它只是说注入样式表。我想查看所有正在被注入的规则，甚至那些影响DOM中当前不存在的元素。

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.

我会期望.css使用.js文件出现在内容脚本下的sources中，但它们不在那里。

I would have expected the .css to appear in "sources" under "content scripts" with the .js files, but they aren't there.

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

Is there a way to view the .css file through dev tools? If not, please explain why there isn't.

编辑：我刚发现这个问题也出现在这是一个，但是那里没有人试图回答它，尽管有一个被接受的答案。

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.

推荐答案

看起来像没有办法做到这一点，如果你通过 content_scripts 。我在这里提交了一个bug： https://crbug.com/800070

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

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

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

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

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.

这篇关于如何使用开发工具查看Google Chrome扩展程序注入的CSS样式表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！