Wie kann ich lokale Bilder in Chrome-Erweiterungen mit CSS laden?

Lokale Bilder in Chrome-Erweiterungen mit CSS laden

In Chrome-Erweiterungen erfordert das Ändern von Website-Elementen häufig die Verwendung von CSS über die Inhaltsskriptfunktion. Allerdings kann das Laden lokaler Bilder mit CSS eine Herausforderung sein. Dieser Artikel behandelt dieses Problem anhand eines konkreten Beispiels und einer Lösung.

Problem: Laden lokaler Bilder schlägt fehl

Das Problem tritt auf, wenn versucht wird, ein Hintergrundbild mithilfe von CSS festzulegen, lokale Bilder jedoch nicht angezeigt werden . Und das, obwohl die Bilder in die Erweiterung gepackt sind.

Lösung: Chrome-Erweiterung i18n-Unterstützung

Die i18n-Unterstützung von Chrome bietet eine Möglichkeit, auf die lokalen Dateien der Erweiterung in CSS zu verweisen. Um dies zu erreichen:

1. Bilder in einem Ordner aufbewahren:Speichern Sie Ihre Bilder in einem speziellen Ordner innerhalb der Erweiterung.
2. Verwenden Sie das Chrome-Extension-Protokoll : Verweisen Sie auf Bilder in CSS im folgenden Format:

background-image: url('chrome-extension://__MSG_@@extension_id__/images/main.png');

1. In Manifest einschließen: Stellen Sie sicher, dass die Bilder, die Sie verwenden möchten, im aufgeführt sind web_accessible_resources-Abschnitt der manifest.json-Datei.

Mit dieser Methode kann Chrome korrekt lokale Bilder aus der Erweiterung für Hintergrundbild oder andere CSS-Eigenschaften laden.

Das obige ist der detaillierte Inhalt vonWie kann ich lokale Bilder in Chrome-Erweiterungen mit CSS laden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!