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 seine Regeln überschreiben.

Lösung:

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

Grund: Content Script Injection Limit

Manifest Version 3 begrenzt den Inhalt Skripte durch direktes Einfügen von CSS.

Lösung: Fügen Sie CSS über ein Inhaltsskript wie folgt ein:

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 die Der Schlüssel „web_accessible_resources“ ist erforderlich, um den Zugriff auf die CSS-Datei von einer Seite ohne Erweiterung zu ermöglichen.