開発ツールを使用してGoogle Chrome拡張機能によって挿入されたcssスタイルシートを表示するにはどうすればよいですか？

Question

マニフェスト.json（ フルソース ）を使用してchrome拡張子からcssファイルを挿入しています：

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

Chrome Dev Toolsで、挿入されたcssの影響を受ける要素を検査すると、ルールが表示されますが、ソースファイル名が通常存在する右上には、「挿入された」とだけ表示されます。スタイルシート。」現在DOMに存在しない要素に影響を与えるルールも含め、挿入されているすべてのルールを表示したいと思います。

.cssが.jsファイルとともに「コンテンツスクリプト」の下の「ソース」に表示されることを期待していましたが、そこにはありません。

開発ツールを使用して.cssファイルを表示する方法はありますか？そうでない場合は、なぜないのか説明してください。

編集：この質問は これ の「サブ質問」としても表示されることがわかりましたが、受け入れられた回答があるにもかかわらず、向こうの誰もそれに答えようとしませんでした。

Answer 1

content_scriptsを介してCSSを挿入する場合、これを行う方法はないようです。ここにバグを報告しました： https://crbug.com/80007

拡張機能を管理している場合、Paul Irishは、スタイルを検査可能にするためにこのコードパターンを使用することをお勧めします： https://github.com/lateral/chrome-extension-blogpost/compare/master...paulirish ：master

他の人の拡張機能については、私が知る限り、content_scriptsルートを使用すると、DevToolsに挿入されたスタイルシートのソースコードを表示する方法がありません。