Ich bin eine CSS-Datei von meiner Chrome-Erweiterung Injektion des manifest.json mit (full source):Wie kann man CSS-Stylesheets anzeigen, die von einer Google Chrome-Erweiterung mithilfe von Dev-Tools eingegeben wurden?
"content_scripts": [
{
"matches": [
"http://*/*"
],
"css":["src/inject/gfi_extension.css"],
"js": [/*...*/]
}
]
In Chrome Dev-Tool, wenn ich ein Element untersuchen, die durch das injizierte css betroffen ist, ist die Regeln sichtbar, aber oben rechts, wo der Quelldateiname normalerweise sein würde, heißt es nur "injected stylesheet". Ich möchte ALLE Regeln sehen, die injiziert werden, auch diejenigen, die sich auf Elemente auswirken, die derzeit nicht im DOM existieren.
Ich hätte erwartet, dass die .css in "Quellen" unter "Inhaltsskripts" mit den .js-Dateien erscheinen würde, aber sie sind nicht da.
Gibt es eine Möglichkeit, die .css-Datei über Dev-Tools anzuzeigen? Wenn nicht, bitte erklären Sie, warum nicht.
Edit: Ich habe gerade festgestellt, dass diese Frage auch als eine "Unterfrage" von this one erscheint, aber niemand drüben hat versucht, es zu beantworten, obwohl es eine akzeptierte Antwort gibt.
Die chrome.devtools. * API-Module sind nur für die Seiten verfügbar, die im DevTools-Fenster geladen werden. Inhaltsskripts und andere Erweiterungsseiten verfügen nicht über diese APIs. Daher sind die APIs nur während der Lebensdauer des DevTools-Fensters verfügbar. Um den Link für weitere Details zu sehen: https://developer.chrome.com/extensions/devtools – gui47
gui47, danke, aber ich verstehe immer noch nicht. Warum kann ich die injizierten .js-Dateien sehen, aber nicht die .css? Liegt das daran, dass das CSS irgendwie außerhalb der "Lebensdauer des DevTools-Fensters" injiziert wird? Wenn du eine Antwort hast, poste sie als Antwort! – foobarbecue
Sie können das Tag injected.js unter Content Scripts sehen, weil Inhaltsskripte im Kontext von Webseiten ausgeführt werden, die innerhalb der Lebensdauer des DevTools-Fensters liegen. Wie du bereits erwähnt hast, ist das css nicht über die Lebensdauer des DevTools-Fensters. – gui47