Comment puis-je charger des images locales dans des extensions Chrome avec CSS ?

Chargement d'images locales dans les extensions Chrome avec CSS

Dans les extensions Chrome, la modification des éléments du site Web implique souvent l'utilisation de CSS via la fonctionnalité de script de contenu. Cependant, charger des images locales avec CSS peut s'avérer difficile. Cet article aborde ce problème avec un exemple spécifique et une solution.

Problème : échec du chargement des images locales

Le problème survient lorsque vous tentez de définir une image d'arrière-plan à l'aide de CSS, mais les images locales ne sont pas affichées. . Ceci malgré le fait que les images soient regroupées dans l'extension.

Solution : prise en charge de l'extension Chrome i18n

La prise en charge i18n de Chrome fournit un moyen de référencer les fichiers locaux de l'extension en CSS. Pour ce faire :

1. Conserver les images dans un dossier : Stockez vos images dans un dossier dédié au sein de l'extension.
2. Utilisez le protocole d'extension Chrome : Référencez les images en CSS en utilisant le format suivant :

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

1. Inclure dans le manifeste : Assurez-vous que les images que vous souhaitez utiliser sont répertoriées dans le section web_accessible_resources du fichier manifest.json.

Grâce à cette méthode, Chrome peut charger correctement des images locales à partir de l'extension pour l'image d'arrière-plan ou d'autres propriétés CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!