Estensioni di Google Chrome: impossibile caricare immagini locali con CSS

Ho una semplice estensione di Chrome che utilizza la funzione di script dei contenuti per modificare un sito web. Più precisamente, il background-imagedi detto sito web.

Per qualche motivo non riesco a utilizzare le immagini locali, anche se sono presenti nell'estensione.

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

Ecco fatto, il CSS più semplice ... ma non funzionerà. Il browser non carica l'immagine.

L'URL dell'immagine dovrebbe essere simile a chrome-extension://<EXTENSION_ID>/image.jpg

Faresti meglio a sostituire css tramite javascript. Dai documenti :

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

Chrome ha il supporto i18n che offre la possibilità di fare riferimento alla tua estensione nel tuo CSS. Conservo le mie immagini in una cartella di immagini nell'estensione, quindi fai riferimento alle risorse nel CSS in questo modo:

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

Ci sono molte vecchie risposte e soluzioni a questa domanda.

A partire da agosto 2015 (utilizzando Chrome 45 e Manifest versione 2), l'attuale "best practice" per il collegamento a immagini locali all'interno delle estensioni di Chrome è il seguente approccio.

1) Collega alla risorsa nel tuo CSS utilizzando un percorso relativo alla cartella delle immagini della tua estensione:

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

2) Aggiungi la singola risorsa alla sezione web_accessible_resources del file manifest.json della tua estensione :

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

Nota: questo metodo è adatto per pochi file, ma non si adatta bene a molti file.

Invece, un metodo migliore è sfruttare il supporto di Chrome per i pattern di corrispondenza per inserire nella whitelist tutti i file all'interno di una determinata directory:

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

L'utilizzo di questo approccio ti consentirà di utilizzare rapidamente e senza sforzo le immagini nel file CSS dell'estensione di Chrome utilizzando metodi supportati in modo nativo.

Un'opzione sarebbe convertire la tua immagine in base64:

e quindi inserisci i dati direttamente nel tuo css come:

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

Sebbene questo potrebbe non essere un approccio che vorresti utilizzare quando sviluppi regolarmente una pagina web , è un'ottima opzione a causa di alcuni dei vincoli della creazione di un'estensione di Chrome.

La mia soluzione.

Con Menifest v2 è necessario aggiungere web_accessible_resourcesal file e quindi utilizzare chrome-extension://__MSG_@@extension_id__/images/pattern.pngcome URL nel file css.

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 Il tuo manifest.json potrebbe avere un aspetto diverso da questo.

Questa versione CSS funziona solo nell'ambiente di estensione (pagina dell'app, pagina popup, pagina di sfondo, pagina delle opzioni) così come nel file CSS content_scripts.

Nel file .less, imposto sempre una variabile all'inizio:

@extensionId : ~"__MSG_@@extension_id__";

Successivamente, se desideri fare riferimento a immagini simili a risorse locali di estensione, usa:

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

Una cosa da menzionare è che in web_accessible_resources puoi usare i caratteri jolly. Quindi invece di

"images / pattern.png"

Puoi usare

"immagini/*"

Giusto per chiarire, secondo la documentazione , ogni file in un'estensione è accessibile anche da un URL assoluto come questo:

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

Notare che <extensionID>è un identificatore univoco che il sistema di estensione genera per ciascuna estensione. Puoi vedere gli ID di tutte le estensioni caricate andando all'URL chrome: // extensions . Il<pathToFile> è la posizione del file nella cartella superiore del prolungamento; è lo stesso dell'URL relativo.

...

Modifica dell'immagine di sfondo in CSS:

#id{immagine di sfondo: url (" chrome-extension://<extensionID>/<pathToFile>"); }

Modifica dell'immagine di sfondo in CSS tramite JavaScript:

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

Modifica dell'immagine di sfondo in CSS tramite jQuery:

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