Pourquoi suis-je incapable d'injecter du CSS dans des pages Web à l'aide de scripts de contenu pour les extensions ?

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 possibles et les solutions :

Raison : Règles CSS conflictuelles

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": Suffixez chaque règle avec "!important" pour remplacer les styles existants.

Raison : Limite d'injection de script de contenu

Manifest version 3 limite l'injection directe de CSS par les scripts de contenu.

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 à le fichier CSS à partir d'une page sans extension.

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!