Pourquoi mon CSS injecté ne s'applique-t-il pas dans mon script de contenu ?

Dépannage de l'échec de l'injection CSS dans les scripts de contenu

Dans les scripts de contenu, l'injection de CSS peut parfois s'avérer difficile. Examinons un problème courant où le CSS injecté n'apparaît pas sur la page Web.

Énoncé du problème :

Un utilisateur rencontre des problèmes pour injecter un fichier CSS ("myStyles .css") via un script de contenu, bien qu'il soit inclus dans le tableau "css" du fichier manifest.json.

Extrait du manifeste :

{
  "content_scripts": [
    {
        "matches": [ "http://*/*", "https://*/*", "file:///*/*"],
        "css": ["myStyles.css"],
        "js": ["myScript.js"],
        "all_frames": true
    }
  ]
}

Causes possibles :

Même si la feuille de style est injectée, elle peut ne pas être appliquée en raison de facteurs tels que :

• Règles CSS conflictuelles : D'autres styles sur la page Web peuvent remplacer les règles CSS injectées.

Solutions :

Pour résoudre ce problème, envisagez les options suivantes :

1. Augmenter la spécificité des règles CSS

Améliorer la spécificité des règles CSS dans "myStyles.css" pour garantir leur préséance.

2. Utilisez la déclaration "Important"

Ajoutez "!important" à chaque règle CSS dans "myStyles.css" pour forcer leur application.

#test {
    margin: 0 10px !important;
    background: #fff !important;
    padding: 3px !important;
    color: #000 !important;
}

3. Injecter du CSS via Content Script

Vous pouvez également injecter le CSS de manière dynamique via JavaScript dans "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);

Modification du manifeste :

Assurez-vous que la clé "web_accessible_resources" est incluse dans manifest.json (pour la version 2 du manifeste), permettant au fichier "myStyles.css" d'être accessible à partir de pages sans extension.

{
  "web_accessible_resources": ["myStyles.css"]
}

En implémentant Avec ces solutions, vous pouvez résoudre efficacement le problème de l'échec de l'injection CSS et vous assurer que les styles injectés sont appliqués comme prévu.

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!