Comment injecter des styles CSS dans une page Web à l'aide d'un script de contenu ?

Problème d'injection de styles CSS dans une page Web à l'aide d'un script de contenu

Un problème courant rencontré par les développeurs utilisant des scripts de contenu pour injecter du CSS est l'échec pour que les styles CSS soient appliqués à la page Web. Bien qu'ils soient injectés, ces styles peuvent être remplacés par d'autres règles.

Pour résoudre ce problème, plusieurs approches peuvent être adoptées :

1. Augmenter la spécificité CSS

Augmenter la spécificité des règles CSS pour les rendre plus prédominantes.

2. Utilisez "!important"

Suffixez chaque règle avec "!important" pour forcer leur application, en remplaçant les autres règles.

3. Injecter du CSS via Content Script

Injecter le CSS à l'aide d'un script de contenu. Créez un fichier JavaScript (par exemple, myScript.js) et modifiez le manifest.json :

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 :

{
  "name": "Extension",
  "version": "0",
  "description": "",
  "manifest_version": 2,
  "permissions": ["tabs", "http://*/*", "https://*/*", "file:///*/*"],
  "content_scripts": [
    {
        "matches": [ "http://*/*", "https://*/*", "file:///*/*"],
        "js": ["myScript.js"],
        "all_frames": true
    }
  ],
  "web_accessible_resources": ["myStyles.css"]
}

Remarque : Lors de l'utilisation du manifeste version 2, la clé "web_accessible_resources" est indispensable pour permettre l'accès au fichier CSS depuis 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!