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

J'ai une simple extension Chrome qui utilise la fonction de script de contenu pour modifier un site Web. Plus précisément, background-imageledit site Web.

Pour une raison quelconque, je n'arrive pas à pouvoir utiliser des images locales, même si elles sont emballées dans l'extension.

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

Voilà, le CSS le plus simple ... mais cela ne fonctionnera pas. Le navigateur ne charge pas l'image.

L'URL de votre image doit ressembler à chrome-extension://<EXTENSION_ID>/image.jpg

Vous feriez mieux de remplacer css par javascript. À partir de la documentation :

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

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

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

Il y a beaucoup de réponses et de solutions plus anciennes à cette question.

Depuis août 2015 (avec Chrome 45 et Manifest version 2), la "meilleure pratique" actuelle pour créer des liens vers des images locales dans les extensions Chrome est l'approche suivante.

1) Créez un lien vers l'élément dans votre CSS en utilisant un chemin relatif vers le dossier d'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 bien à de nombreux fichiers.

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

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

L'utilisation de cette approche vous permettra d'utiliser rapidement et sans effort des images dans le fichier CSS de votre extension Chrome à l'aide de méthodes prises en charge nativement.

Une option serait de convertir votre image en base64:

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

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

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

Ma solution.

Avec Menifest v2, vous devez ajouter web_accessible_resourcesau fichier, puis l'utiliser chrome-extension://__MSG_@@extension_id__/images/pattern.pngcomme 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"
     ]
}

ps Votre manifest.json peut être différent de celui-ci.

Cette version CSS fonctionne uniquement dans l' environnement d'extension (page d'application, page contextuelle, page d'arrière-plan, page d'options) ainsi que dans le fichier CSS content_scripts.

Dans le fichier .less, je règle 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");
}

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

"images / pattern.png"

Vous pouvez utiliser

"images/*"

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

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

Notez qu'il <extensionID>s'agit d'un identifiant unique que le système d'extension génère pour chaque extension. Vous pouvez voir les ID de toutes vos extensions chargées en accédant à l'URL chrome: // extensions . le<pathToFile> est l'emplacement du fichier sous le dossier supérieur de l'extension; c'est la même chose que l'URL relative.

...

Changer l'image de fond en CSS:

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

Modification de l'image de fond en CSS via JavaScript:

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

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

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