Ich habe eine einfache Chrome-Erweiterung, die die Inhaltsskriptfunktion zum Ändern einer Website verwendet. Genauer gesagt die background-image
der genannten Website.
Aus irgendeinem Grund kann ich anscheinend keine lokalen Bilder verwenden, obwohl sie in der Erweiterung enthalten sind.
body {
background: #000 url('image.jpg') !important;
background-repeat: repeat !important;
}
Das war's, das einfachste CSS ... aber es wird nicht funktionieren. Der Browser lädt das Bild nicht.
css
google-chrome-extension
background-image
Bjarki Jonasson
quelle
quelle
Antworten:
Ihre Bild-URL sollte so aussehen
chrome-extension://<EXTENSION_ID>/image.jpg
Sie sollten CSS besser durch Javascript ersetzen. Aus Dokumenten :
quelle
Chrome bietet i18n-Unterstützung , mit der Sie auf Ihre Erweiterung in Ihrem CSS verweisen können. Ich behalte meine Bilder in einem Bildordner in der Erweiterung, also verweisen Sie auf Assets im CSS wie folgt:
quelle
Es gibt viele ältere Antworten und Lösungen für diese Frage.
Ab August 2015 (unter Verwendung von Chrome 45 und Manifest Version 2) ist die derzeitige "Best Practice" für die Verknüpfung mit lokalen Bildern in Chrome Extensions der folgende Ansatz.
1) Verknüpfen Sie das Asset in Ihrem CSS über einen relativen Pfad zum Bilderordner Ihrer Erweiterung:
2) Fügen Sie das einzelne Asset zum Abschnitt web_accessible_resources der Datei manifest.json Ihrer Erweiterung hinzu :
Hinweis: Diese Methode eignet sich für einige Dateien, lässt sich jedoch bei vielen Dateien nicht gut skalieren.
Eine bessere Methode besteht darin, die Unterstützung von Chrome für Übereinstimmungsmuster zu nutzen, um alle Dateien in einem bestimmten Verzeichnis auf die Whitelist zu setzen:
Mit diesem Ansatz können Sie Bilder in der CSS-Datei Ihrer Chrome-Erweiterung mithilfe nativ unterstützter Methoden schnell und mühelos verwenden.
quelle
Eine Möglichkeit wäre , Ihr Bild in base64 zu konvertieren :
und dann die Daten direkt in Ihr CSS einfügen wie:
Dies ist möglicherweise kein Ansatz, den Sie bei der regelmäßigen Entwicklung einer Webseite verwenden möchten. Aufgrund einiger Einschränkungen beim Erstellen einer Chrome-Erweiterung ist dies jedoch eine hervorragende Option.
quelle
Meine Lösung.
Mit Menifest v2 müssen Sie
web_accessible_resources
der Datei hinzufügen und dannchrome-extension://__MSG_@@extension_id__/images/pattern.png
als URL in Ihrer CSS-Datei verwenden.CSS:
Manifest.json
ps Ihre manifest.json sieht möglicherweise anders aus als diese.
quelle
Diese CSS-Version funktioniert nur in der Erweiterungsumgebung (App-Seite, Popup-Seite, Hintergrundseite, Optionsseite) sowie in der CSS-Datei content_scripts.
In der .less-Datei setze ich immer eine Variable am Anfang:
Wenn Sie später auf Bilder mit Erweiterungslokalressourcen verweisen möchten, verwenden Sie:
quelle
Eine Sache zu erwähnen ist, dass Sie in den web_accessible_resources Platzhalter verwenden können. Also statt
"images / pattern.png"
Sie können verwenden
"images / *"
quelle
Um zu verdeutlichen, dass laut Dokumentation auf jede Datei in einer Erweiterung auch über eine absolute URL wie diese zugegriffen werden kann:
Beachten Sie,
<extensionID>
dass dies eine eindeutige Kennung ist, die das Erweiterungssystem für jede Erweiterung generiert. Sie können die IDs für alle geladenen Erweiterungen anzeigen, indem Sie zur URL chrome: // extensions gehen . Das<pathToFile>
ist der Speicherort der Datei im obersten Ordner der Erweiterung. Es ist das gleiche wie die relative URL....
Ändern des Hintergrundbilds in CSS:
Ändern des Hintergrundbilds in CSS über JavaScript:
Ändern des Hintergrundbilds in CSS über jQuery:
quelle