Google Chrome-Erweiterungen - Lokale Bilder können nicht mit CSS geladen werden

Ich habe eine einfache Chrome-Erweiterung, die die Inhaltsskriptfunktion zum Ändern einer Website verwendet. Genauer gesagt die background-imageder 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.

Ihre Bild-URL sollte so aussehen chrome-extension://<EXTENSION_ID>/image.jpg

Sie sollten CSS besser durch Javascript ersetzen. Aus Dokumenten :

//Code for displaying <extensionDir>/images/myimage.png:
var imgURL = chrome.extension.getURL("images/myimage.png");
document.getElementById("someImage").src = imgURL;

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:

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

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:

.selector {
    background: url('chrome-extension://__MSG_@@extension_id__/images/file.png');
}

2) Fügen Sie das einzelne Asset zum Abschnitt web_accessible_resources der Datei manifest.json Ihrer Erweiterung hinzu :

"web_accessible_resources": [
  "images/file.png"
]

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:

{
    "name": "Example Chrome Extension",
    "version": "0.1",
    "manifest_version": 2,
    ...    
    "web_accessible_resources": [
      "images/*"
    ]
}

Mit diesem Ansatz können Sie Bilder in der CSS-Datei Ihrer Chrome-Erweiterung mithilfe nativ unterstützter Methoden schnell und mühelos verwenden.

Eine Möglichkeit wäre , Ihr Bild in base64 zu konvertieren :

und dann die Daten direkt in Ihr CSS einfügen wie:

body { background-image: url(data:image/png;base64,iVB...); }

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.

Meine Lösung.

Mit Menifest v2 müssen Sie web_accessible_resourcesder Datei hinzufügen und dann chrome-extension://__MSG_@@extension_id__/images/pattern.pngals URL in Ihrer CSS-Datei verwenden.

CSS:

 #selector {
      background: #fff url('chrome-extension://__MSG_@@extension_id__/images/pattern.png'); 
 }

Manifest.json

{
  "manifest_version": 2,

  "name": "My Extension Name",
  "description": "My Description",
  "version": "1.0",

  "content_scripts": [
      {
        "matches": ["https://mydomain.com/*"],
        "css": ["style.css"]
      }
    ],

  "permissions": [
    "https://mydomain.com/"
  ],
  "browser_action": {
      "default_icon": {                    
            "19": "images/icon19.png",           
            "38": "images/icon38.png"          
       },
       "default_title": "My Extension Name"  
   },
   "web_accessible_resources": [
       "images/pattern.png"
     ]
}

ps Ihre manifest.json sieht möglicherweise anders aus als diese.

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:

@extensionId : ~"__MSG_@@extension_id__";

Wenn Sie später auf Bilder mit Erweiterungslokalressourcen verweisen möchten, verwenden Sie:

.close{
    background-image: url("chrome-extension://@{extensionId}/images/close.png");
}

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 / *"

Um zu verdeutlichen, dass laut Dokumentation auf jede Datei in einer Erweiterung auch über eine absolute URL wie diese zugegriffen werden kann:

Chrome-Erweiterung: // <extensionID>/<pathToFile>

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:

#id{Hintergrundbild: URL (" chrome-extension://<extensionID>/<pathToFile>"); }}

Ändern des Hintergrundbilds in CSS über JavaScript:

document.getElementById (' id') .style.backgroundImage = "url ('chrome-extension: // <extensionID>/ <pathToFile>')");

Ändern des Hintergrundbilds in CSS über jQuery:

$ (" #id") .css ("Hintergrundbild", "URL ('Chrome-Erweiterung: // <extensionID>/ <pathToFile>')");