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.
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;
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');
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.
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.
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.
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");
}
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 / * "
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>
')");
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:
-
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
-
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 -
utiliser un serveur prêt à la production comme nginx , apache
"
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.