Wie füge ich mithilfe eines Inhaltsskripts CSS-Stile in eine Webseite ein?

Probleme beim Einfügen von CSS-Stilen in eine Webseite mithilfe eines Inhaltsskripts

Ein häufiges Problem, auf das Entwickler stoßen, wenn sie Inhaltsskripte zum Einfügen von CSS verwenden, ist der Fehler um die CSS-Stile auf die Webseite anzuwenden. Obwohl diese Stile eingefügt wurden, können sie durch andere Regeln außer Kraft gesetzt werden.

Um dieses Problem zu lösen, können mehrere Ansätze gewählt werden:

1. Erhöhen Sie die CSS-Spezifität

Erhöhen Sie die Spezifität von CSS-Regeln, um sie vorherrschender zu machen.

2. Verwenden Sie „!important“

Suffix jeder Regel mit „!important“, um ihre Anwendung zu erzwingen und andere Regeln außer Kraft zu setzen.

3. Fügen Sie CSS über ein Inhaltsskript ein

Fügen Sie das CSS mithilfe eines Inhaltsskripts ein. Erstellen Sie eine JavaScript-Datei (z. B. myScript.js) und ändern Sie manifest.json:

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:

{
  "name": "Extension",
  "version": "0",
  "description": "",
  "manifest_version": 2,
  "permissions": ["tabs", "http://*/*", "https://*/*", "file:///*/*"],
  "content_scripts": [
    {
        "matches": [ "http://*/*", "https://*/*", "file:///*/*"],
        "js": ["myScript.js"],
        "all_frames": true
    }
  ],
  "web_accessible_resources": ["myStyles.css"]
}

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

Das obige ist der detaillierte Inhalt vonWie füge ich mithilfe eines Inhaltsskripts CSS-Stile in eine Webseite ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!