it-swarm.com.de

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, der background-image dieser Website.

Aus irgendeinem Grund scheint es mir nicht möglich zu sein, lokale Bilder zu verwenden, obwohl sie in der Erweiterung gepackt sind.

body {
    background: #000 url('image.jpg') !important;
    background-repeat: repeat !important;
}

Das ist es, das einfachste CSS ... aber es funktioniert nicht. Der Browser lädt das Bild nicht.

84
Bjarki Jonasson

Ihre Image-URL sollte wie folgt aussehen: chrome-extension://<EXTENSION_ID>/image.jpg

Es wäre besser, CSS durch Javascript zu ersetzen. Von docs :

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

Chrome bietet i18n-Unterstützung die die Möglichkeit bietet, auf Ihre Erweiterung in Ihrem CSS zu verweisen. Ich behalte meine Bilder in einem Bildordner in der Erweiterung, verweisen Sie also wie folgt auf Assets im CSS:

background-image:url('chrome-extension://[email protected]@extension_id__/images/main.png');
228
David Lemphers

Es gibt viele ältere Antworten und Lösungen für diese Frage.

Seit August 2015 (unter Verwendung von Chrome 45 und Manifest Version 2) ist die derzeitige "bewährte Methode" für die Verknüpfung mit lokalen Bildern in Chrome Extensions der folgende Ansatz.

1) Verbinden Sie sich mit dem Asset in Ihrem CSS über einen relativen Pfad mit dem Bilderordner Ihrer Erweiterung:

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

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

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

Hinweis: Diese Methode eignet sich für wenige Dateien, skaliert jedoch nicht mit vielen Dateien.

Stattdessen empfiehlt es sich, die Unterstützung von Chrome für Übereinstimmungsmuster zu nutzen, um alle Dateien in einem bestimmten Verzeichnis in die Positivliste aufzunehmen:

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

Wenn Sie diesen Ansatz verwenden, können Sie Bilder in der CSS-Datei Ihrer Chrome-Erweiterung schnell und mühelos verwenden, wobei Sie systemeigene Methoden verwenden.

26
rjb

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

und dann die Daten direkt in Ihre CSS eintragen:

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

Obwohl dies nicht unbedingt ein Ansatz ist, den Sie beim regelmäßigen Entwickeln einer Webseite verwenden möchten , ist er aufgrund der Einschränkungen beim Erstellen einer Chrome-Erweiterung eine großartige Option.

19
Brian Sloane

Meine Lösung.

Bei Menifest v2 müssen Sie web_accessible_resources zur Datei hinzufügen und dann chrome-extension://[email protected]@extension_id__/images/pattern.png als URL in Ihrer CSS-Datei verwenden.

CSS:

 #selector {
      background: #fff url('chrome-extension://[email protected]@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"
     ]
}

p.s. Ihr Manifest.json könnte anders aussehen als dieses.

17
Foxinni

Diese CSS-Version kann nur in Erweiterungsumgebungen verwendet werden (Anwendungsseite, Popup-Seite, Hintergrundseite, Optionsseite) sowie CSS-Datei content_scripts.

In der .less-Datei habe ich am Anfang immer eine Variable gesetzt:

@extensionId : ~"[email protected]@extension_id__";

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

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

Zu erwähnen ist, dass Sie in den web_accessible_resources Platzhalter verwenden können. Also statt 

"images/pattern.png"

Sie können verwenden

"Bilder/*"

7
patrick_hogan

Um nur zu verdeutlichen, dass gemäß der Dokumentation jede Datei in einer Erweiterung auch über eine absolute URL wie diese zugänglich ist:

chrome-extension: //<extensionID>/<pathToFile>

Beachten Sie, dass <extensionID> eine eindeutige Kennung ist, die das Erweiterungssystem für jede Erweiterung generiert. Sie können die IDs aller geladenen Erweiterungen anzeigen, indem Sie die URL chrome: // extensions aufrufen. <pathToFile> ist der Speicherort der Datei unter dem obersten Ordner der Erweiterung. es ist das gleiche wie die relative URL.

...

Hintergrundbild in CSS ändern:

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


Hintergrundbild in CSS über JavaScript ändern:

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


Hintergrundbild in CSS über jQuery ändern:

$ ("#id"). css ("Hintergrundbild", "url ('chrome-extension: // <extensionID>/<pathToFile>')");

3
quackkkk

Wenn Sie ein lokales Image auf der Live-Site testen möchten, können Sie einen lokalen Webserver ausführen und die URL mit http://127.0.0.1:8123/img.jpg on mithilfe von DevTools festlegen

Es gibt verschiedene Möglichkeiten, einen Webserver auszuführen:

  1. Erweiterung für den Browser "Webserver für Chrome" mit definiertem Ordner https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

  2. Wenn Sie Python haben, führen Sie den eingebetteten http-Server im ausgewählten Ordner aus

    python3 -m http.server 8123 # python 3-version
    python -m SimpleHTTPServer 8123 # python 2-Version

  3. Verwenden Sie produktionsfertige Server wie nginx , Apache

Ich habe auch versucht, das Start-Flag von Chrome -- allow-file-access-from-files Zu starten, aber es funktionierte bei meiner Version 52.0.2743.116 nicht und es ist gefährlich und unsicher. Dokumente, die von einem beliebigen Ort (lokal oder aus dem Internet) stammen, sollten standardmäßig keinen Zugriff auf die Ressourcen der lokalen Datei: /// haben.

0
koxt