web-dev-qa-db-fra.com

Google Chrome Extensions - Impossible de charger des images locales avec CSS

J'ai une simple extension Chrome qui utilise la fonctionnalité de script de contenu pour modifier un site Web. Plus spécifiquement, le background-image dudit site Web.

Pour une raison quelconque, il semble que je ne puisse pas utiliser les images locales, même si elles sont compressées dans l'extension.

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

C'est ça, le CSS le plus simple ... mais ça ne marchera pas. Le navigateur ne charge pas l'image.

cssgoogle-chrome-extensionbackground-image
84
Bjarki Jonasson

Votre image URL devrait ressembler à chrome-extension://<EXTENSION_ID>/image.jpg

Vous feriez mieux de remplacer css par javascript. De docs :

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

Chrome prend en charge i18n qui offre la possibilité de référencer votre extension dans votre CSS. Je conserve mes images dans un dossier d'images dans l'extension. Par conséquent, référencez les ressources dans le CSS comme suit:

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

Il y a beaucoup d'anciennes réponses et solutions à cette question.

Depuis août 2015 (avec Chrome 45 et Manifest version 2), la "meilleure pratique" actuelle en matière de liens vers des images locales dans Chrome Extensions correspond à l'approche suivante.

1) Créez un lien vers l’actif de votre CSS à l’aide d’un chemin relatif vers le dossier des images de votre extension:

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

2) Ajoutez l’actif individuel à la section web_accessible_resources du fichier manifest.json de votre extension:

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

Remarque: cette méthode convient à quelques fichiers, mais ne s'adapte pas correctement à beaucoup de fichiers.

Au lieu de cela, une meilleure méthode consiste à tirer parti de la prise en charge par Chrome de faire correspondre les modèles à la liste blanche de tous les fichiers d'un répertoire donné:

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

Cette approche vous permettra d’utiliser rapidement et facilement les images du fichier CSS de votre extension Chrome à l’aide de méthodes prises en charge en mode natif.

26
rjb

Une option serait de convertir votre image en base64: 

puis mettez les données directement dans votre css comme ceci:

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

Bien que ceci ne soit peut-être pas une approche que vous souhaitiez utiliser lors du développement régulier d'une page Web , c'est une excellente option en raison de certaines contraintes liées à la création d'une extension Chrome.

19
Brian Sloane

Ma solution.

Avec Menifest v2, vous devez ajouter web_accessible_resources au fichier, puis utiliser chrome-extension://__MSG_@@extension_id__/images/pattern.png comme URL dans votre fichier 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"
     ]
}

p.s. Votre manifeste.json pourrait être différent de celui-ci.

17
Foxinni

Cette version CSS ne fonctionne que dans l’environnement extension (page de l’application, page contextuelle, page de fond, page des options) ainsi que content_scripts CSS.

Dans le fichier .less, je définis toujours une variable au début:

@extensionId : ~"__MSG_@@extension_id__";

Ensuite, si vous souhaitez faire référence à des images de type extension-local-resource, utilisez:

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

Une chose à mentionner est que dans les ressources web_accessible, vous pouvez utiliser des caractères génériques. Donc au lieu de 

"images/pattern.png"

Vous pouvez utiliser

"images/*"

7
patrick_hogan

Juste pour clarifier, selon la documentation , chaque fichier d'une extension est également accessible par une URL absolue comme celle-ci:

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

Notez que <extensionID> est un identifiant unique généré par le système de poste pour chaque poste. Vous pouvez voir les ID de toutes vos extensions chargées en allant à l'URL chrome: // extensions. Le <pathToFile> est l'emplacement du fichier dans le dossier principal de l'extension. c'est la même chose que l'URL relative.

...

Changer l'image de fond en CSS:

#id {background-image: url ("chrome-extension://<extensionID>/<pathToFile>"); } 


Modification de l'image d'arrière-plan dans CSS via JavaScript:

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


Modification de l'image d'arrière-plan dans CSS via jQuery:

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

3
quackkkk

Si vous souhaitez tester une image locale sur le site actif, vous pouvez exécuter un serveur Web local et définir une URL telle que http://127.0.0.1:8123/img.jpg sur la page utilisant DevTools.

Il existe différentes manières d’exécuter un serveur Web:

  1. Extension du navigateur "Web Server for Chrome" avec le dossier défini https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

  2. Si vous avez python, lancez le serveur http incorporé dans le dossier choisi

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

  3. Utilisez un serveur prêt à la production comme nginx , Apache

J'ai aussi essayé d'indiquer le lancement de chrome -- allow-file-access-from-files , Mais cela n'a pas fonctionné pour ma version 52.0.2743.116 et c'est dangereux et non sécurisé. Les documents provenant de n'importe où, local ou Web, ne devraient pas, par défaut, avoir accès aux ressources locales file: ///.

0
koxt