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

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

Barbara Streisand
Barbara Streisandoriginal
2024-11-11 01:10:02706parcourir

How to Inject CSS Styles into a Webpage Using a Content Script?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn