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

98

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.

Bjarki Jonasson
quelle
2
Warum sollte die Erweiterung denken, dass die URL ('image.jpg') lokal ist? Würdest du nicht einen vollen Weg brauchen?
Traingamer

Antworten:

70

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;
serg
quelle
7
@Salem Weil Sie sonst Ihre Erweiterungs-ID in CSS fest codieren müssten.
Serg
Nicht dumm zu sein, aber warum ist das ein Problem?
Salem
4
@Salem Es wäre unpraktisch, als entpackte Erweiterungs-ID zu entwickeln und in die Galerie hochzuladen, man hat unterschiedliche IDs. Es ist nicht das Ende der Welt, nur Unannehmlichkeiten und schlechte Praktiken, wie zum Beispiel das Hardcodieren absoluter Dateipfade im Code.
Serg
Ah, macht Sinn. Ich schätze es.
Salem
Da dies die akzeptierte Antwort ist, sollten Sie einen Kommentar zu der anderen Antwort sehen, in der ariera erwähnt hat, dass web_accessible_resources in Ihre Manifestdatei aufgenommen werden soll, um auf lokale Schriftarten und Bilder zuzugreifen.
Aryan Firouzian
253

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');
David Lemphers
quelle
4
Tolle Sache. Dies ist eine großartige Lösung und funktioniert in der Tat sowohl für unverpackte als auch für verpackte Erweiterungen - danke, dass Sie einen wirklich tollen Tipp gegeben haben.
Richard Hollis
40
Danke, genau das habe ich gesucht. Nur eine Fußnote: Denken Sie daran, dass Sie Ihre Assets in Ihrer Manifestdatei als web_accessible_resources deklarieren müssen (wie hier erläutert: code.google.com/chrome/extensions/… ). Andernfalls werden sie nicht geladen
Ariera
2
Eines habe ich gemerkt! Denken Sie niemals, dass eine akzeptierte Antwort die einzig richtige Lösung für diese Frage ist! Ich hatte Angst, dass ich Hardcode machen muss, als ich die akzeptierte Antwort sah, aber nachdem ich deine Antwort gesehen hatte, sagte ich mir, dass dieser Typ meinen Tag gerettet hat !! ;-)
Rafique Mohammed
Dies ist fast immer der bessere Weg. Reines CSS vs. Koppeln von Javascirpt und CSS in der @ serg-Antwort. Dies sollte meiner Meinung nach die akzeptierte Antwort sein.
Jeremy Zerr
@ Arieras Link ist jetzt hier: developer.chrome.com/extensions/manifest/…
Ben
41

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.

rjb
quelle
22

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.

Brian Sloane
quelle
1
Ich bevorzuge diese Option. Ich bin nicht der Meinung, dass Google zu Recht vorschlägt, alle Bilder über den oben genannten Ansatz einzufügen. Der base64-Ansatz ist auch schneller. +1 !!!
Skone
20

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.

Foxinni
quelle
8

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");
}
Thach Lockevn
quelle
7

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

patrick_hogan
quelle
4

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>')");

quackkkk
quelle