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


98

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.


2
Pourquoi l'extension penserait-elle que l'url ('image.jpg') est locale? N'auriez-vous pas besoin d'un chemin complet?
Traingamer

Réponses:


70

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;

7
@Salem Parce que sinon, vous auriez besoin de coder en dur votre identifiant d'extension en css.
serg

Ne pas être stupide, mais pourquoi est-ce un problème?
Salem le

4
@Salem Il ne serait pas pratique de développer un identifiant d'extension décompressé et de télécharger dans la galerie un identifiant différent. Ce n'est pas la fin du monde, juste des inconvénients et une sorte de mauvaise pratique, tout comme le codage en dur des chemins de fichiers absolus dans le code par exemple.
serg

Ah, ça a du sens. Je vous en suis reconnaissant.
Salem le

Puisqu'il s'agit de la réponse acceptée, vous devriez voir un commentaire sur l'autre réponse où ariera a mentionné l'inclusion de web_accessible_resources dans votre fichier manifeste pour accéder aux polices et images locales.
Aryan Firouzian

254

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');

4
Elle est bonne. C'est une excellente solution et fonctionne en effet pour les extensions non emballées et emballées - merci de partager un très bon conseil.
Richard Hollis

40
Merci, c'est exactement ce que je cherchais. Juste une note de bas de page: rappelez-vous que vous devez déclarer vos éléments en tant que web_accessible_resources dans votre fichier manifeste (comme expliqué ici: code.google.com/chrome/extensions/… ). Sinon, ils ne seront pas chargés
ariera

2
Une chose que j'ai réalisée! Ne pensez jamais que la réponse acceptée est la seule solution correcte pour cette question! J'avais peur de devoir faire du hardcode quand j'ai vu la réponse acceptée, mais après avoir vu votre réponse, je me suis dit que ce gars a sauvé ma journée !! ;-)
Rafique Mohammed

C'est presque toujours la meilleure façon de procéder. CSS pur vs couplage Javascirpt et CSS ensemble dans @serg answer. Cela devrait être la réponse acceptée à mon avis.
Jeremy Zerr

Le lien de @ ariera est ici maintenant: developer.chrome.com/extensions/manifest/…
Ben

41

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.


22

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.


1
Je préfère cette option. Je ne suis pas d'accord avec le fait que Google a raison de suggérer d'injecter toutes les images via l'approche mentionnée ci-dessus. L'approche base64 est également plus rapide. +1 !!!
Skone

20

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.


8

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");
}

7

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/*"


4

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>')");

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.