Problèmes d'injection CSS dans les scripts de contenu pour les extensions

Malgré la définition de l'injection CSS dans le manifeste, votre fichier CSS reste absent de la page Web. Voici les causes et solutions possibles :

Raison : Règles CSS en conflit

La feuille de style est injectée mais n'est pas appliquée car d'autres styles remplacent ses règles.

Solution :

• Augmenter la spécificité CSS : Ajoutez des sélecteurs plus spécifiques à vos règles CSS.
• Utilisez " !important": Ajoutez à chaque règle "!important" pour remplacer les styles existants.

Raison : Limite d'injection de script de contenu

Manifest version 3 empêche les scripts de contenu d'injecter directement du CSS.

Solution : Injectez du CSS via un script de contenu comme suit :

myScript.js :

var style = document.createElement('link');
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = chrome.extension.getURL('myStyles.css');
(document.head||document.documentElement).appendChild(style);

manifest.json:

"web_accessible_resources": ["myStyles.css"]

Remarque : Lors de l'utilisation de Manifest version 2, la clé "web_accessible_resources" est requise pour autoriser l'accès au fichier CSS à partir d'une page sans extension.