Warum kann ich mithilfe von Inhaltsskripten für Erweiterungen kein CSS in Webseiten einfügen?

CSS-Injection-Probleme in Inhaltsskripten für Erweiterungen

Obwohl CSS-Injection im Manifest definiert ist, bleibt Ihre CSS-Datei auf der Webseite verschwunden. Hier sind die möglichen Ursachen und Lösungen:

Grund: Widersprüchliche CSS-Regeln

Das Stylesheet wird eingefügt, aber nicht angewendet, da andere Stile es überschreiben Regeln.

Lösung:

• CSS-Spezifität erhöhen:Fügen Sie spezifischere Selektoren zu Ihren CSS-Regeln hinzu.
• Verwenden Sie „!important“: Fügen Sie jeder Regel „!important“ als Suffix hinzu, um sie zu überschreiben Vorhandene Stile.

Grund: Content Script Injection Limit

Manifest Version 3 schränkt das direkte Einfügen von CSS durch Content Scripts ein.

Lösung: CSS über ein Inhaltsskript einfügen als folgt:

myScript.js:

var style = document.createElement('link');
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = chrome.extension.getURL('myStyles.css');
(document.head||document.documentElement).appendChild(style);

manifest.json:

"web_accessible_resources": ["myStyles.css"]

Hinweis : Bei Verwendung von Manifest Version 2 ist der Schlüssel „web_accessible_resources“ erforderlich, um den Zugriff auf zu ermöglichen CSS-Datei von einer Nicht-Erweiterungsseite.

Das obige ist der detaillierte Inhalt vonWarum kann ich mithilfe von Inhaltsskripten für Erweiterungen kein CSS in Webseiten einfügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!