Google Chrome Extensions-ne peut pas charger les images locales avec CSS

j'ai une extension Chrome simple qui utilise la fonctionnalité de script de contenu pour modifier un site web. Plus précisément, le background-image de ce site.

pour une raison inconnue, Je ne peux pas utiliser les images locales, même si elles sont emballées dans l'extension.

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

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

82
demandé sur Ninjakannon 2010-08-24 22:32:09

9 réponses

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

il serait préférable 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;
54
répondu serg 2014-06-02 15:24:25

Chrome a prise en charge i18n qui permet de référencer votre extension dans votre CSS. Je garde mes images dans un dossier image dans l'extension, donc référencez les ressources dans le CSS comme ceci:

background-image:url('chrome-extension://__MSG_@@extension_id__/images/main.png');
217
répondu David Lemphers 2014-06-02 15:14:30

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

depuis août 2015 (en utilisant Chrome 45 et Manifest version 2), la" meilleure pratique "actuelle pour le lien vers des images locales dans extensions Chrome est l'approche suivante.

1) Lien vers le bien dans votre CSS en utilisant un chemin relatif vers le dossier images de votre extension:

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

2) Ajouter le texte suivant: élément d'actif individuel de la section web_accessible_resources de votre manifeste d'extension .json fichier:

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

Note: cette méthode est appropriée pour quelques fichiers, mais ne se dimensionne pas bien avec beaucoup de fichiers.

au lieu de cela, une meilleure méthode est de tirer parti du soutien de Chrome pour match patterns pour whitelist tous les fichiers dans un répertoire donné:

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

en utilisant cette approche vous permettra d'utiliser rapidement et sans effort des images dans le fichier CSS de votre Extension Chrome en utilisant des méthodes supportées nativement.

21
répondu rjb 2015-08-21 00:10:21

une option serait de convertir votre image à base64:

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

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

bien que ce puisse ne pas être 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 de la construction d'une Extension Chrome.

18
répondu Brian Sloane 2017-05-23 12:10:36

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

16
répondu Foxinni 2013-02-20 08:06:13

cette version CSS fonctionne uniquement dans l'environnement d'extension (page app, page popup, page background, page option) ainsi que dans le fichier CSS content_scripts.

In .moins de fichier, j'ai toujours défini une variable au début:

@extensionId : ~"__MSG_@@extension_id__";

puis plus tard, si vous voulez faire référence à l'extension-local-ressource comme des images, utilisez:

.close{
    background-image: url("chrome-extension://@{extensionId}/images/close.png");
}
7
répondu Thach Lockevn 2011-12-14 05:10:38

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

images/motif.png"

vous pouvez utiliser

"images / * "

7
répondu patrick_hogan 2014-09-07 21:07:03

juste pour clarifier, selon la documentation , chaque fichier dans une extension est également accessible par une URL absolue comme ceci:

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

Note le <extensionID> est un identificateur unique que le système d'extension génère pour chaque extension. Vous pouvez voir les pièces d'identité de tous vos chargé extensions en allant à L'URL chrome: / / extensions . Le <pathToFile> est l'emplacement du fichier sous le dossier supérieur de l'extension; il est le même que L'URL relative.

...

changer l'image de fond dans CSS:

#id { arrière-plan-image: adresse url(" chrome-extension://<extensionID>/<pathToFile> "); }



Changer le fond d' image en CSS par JavaScript:

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



Changer l'image de fond en CSS grâce à jQuery:

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

3
répondu quackkkk 2017-03-08 20:27:09

si vous voulez tester une image locale sur le site en direct, vous pouvez lancer un serveur web local et définir une URL comme http://127.0.0.1:8123/img.jpg sur la page en utilisant DevTools

il y a différentes façons d'exécuter un serveur web:

  1. Extension pour le navigateur Serveur Web de google Chrome" avec dossier défini par l' https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

  2. si vous avez python, Lancez alors embedded serveur http dans le dossier choisi

    python3-m http.server 8123 # python 3 version

    python-m SimpleHTTPServer 8123 # python 2 version

  3. utiliser un serveur prêt à la production comme nginx , apache

  4. "

J'ai aussi essayé le drapeau de lancement chrome --permettre l'accès de fichier de fichiers mais ça n'a pas marché pour ma version 52.0.2743.116 et c'est dangereux et peu sûr. Les Documents provenant de n'importe où, local ou web, ne devraient pas, par défaut, avoir accès aux ressources/// locales.

0
répondu koxt 2017-02-05 12:55:21