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

Question

J'ai une simple extension Google Chrome qui utilise la fonctionnalité script de contenu pour modifier un site web. Plus précisément, l'image de fond dudit site web.

Pour une raison quelconque, je ne parviens pas à utiliser les images locales, même si elles sont intégrées dans l'extension.

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

C'est ça, le code css le plus simple... mais ça ne marche pas. Le navigateur ne charge pas l'image.

Answer 1

Chrome a Support i18n qui offre la possibilité de référencer votre extension dans votre CSS. Je conserve mes images dans un dossier d'images de l'extension et je fais référence aux actifs dans le CSS de la manière suivante :

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

Answer 2

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

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

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

Answer 3

Une option serait de convertir votre image en base64 :

et ensuite mettre les données directement dans votre css comme :

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

Bien que cette n'est peut-être pas une approche que vous souhaitez utiliser pour développer régulièrement une page web. Il s'agit d'une excellente option en raison de certaines des contraintes liées à la création d'une extension pour Chrome.

Answer 4

Ma solution.

Avec Menifest v2, vous devez ajouter web_accessible_resources au fichier et ensuite utiliser chrome-extension://__MSG_@@extension_id__/images/pattern.png comme l'url dans votre fichier css.

CSS :

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

Manifeste.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 manifest.json peut être différent de celui-ci.

Answer 5

Cette version CSS ne fonctionne que dans environnement d'extension (page d'application, page popup, page d'arrière-plan, page d'option) ainsi que fichier CSS content_scripts.

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

@extensionId : ~"__MSG_@@extension_id__";

Puis plus tard, si vous voulez faire référence à l'extension-local-resource comme les images, utilisez :

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