Scripts de contenu CSS n'écrase pas l'original

Mon problème que je veux modifier un style d'un site avec mes paramètres personnalisés. J'ai essayé avec Content Scripts, mais ce travail dosent, parce qu'ils ne peuvent pas écraser les fichiers CSS d'origine. Voici un exemple:Scripts de contenu CSS n'écrase pas l'original

foo/manifest.json

{ 
    "name": "test", 
    "version": "1.0", 
    "content_scripts": [ 
    { 
     "matches": ["file://*/*test.html"], 
     "css": ["main.css"] 
    } 
    ] 
}

foo/main.css

body { 
    background: #0f0; 
}

test.html

<html> 
    <head> 
    <title>foobar</title> 
    </head> 

    <body style="background:#f00;"> 

    </body> 
</html>

Alors je loaded l'extension foo dossier dans mon google chrome, et a ouvert le test.html mais la couleur de fond reste rouge. J'ai inspecté l'élément et i vu que:

élément de style

body {
background: #f00;
}

utilisateur feuille de style

body {
~~background: #0f0;~~
}

Comment puis-je modifier un fichier existant avec mon css css personnalisé avec des scripts de contenu?
Si cela n'est pas possible, comment puis-je modifier automatiquement un CSS existant avec mon Custom lorsque la page est chargée dans Google Chrome spécialement.

Source

2011-05-20 Gergely Fehérvári

Une règle de style en ligne a un précédent plus élevé que n'importe quelle règle importée d'une feuille de style. Vous pouvez utiliser la directive !important pour subvertir ce comportement:

body { 
    background: #0f0 !important; 
}

Source

2011-05-20 20:57:41

En utilisant javascript, ajoutez un ID à la balise body, ou une autre étiquette qui englobe tout. Ensuite, vous pouvez le faire:

// original rule 
.someclass li a{ 
    color: blue; 
}

// your rule 
#cool-extension .someclass li a{ 
    color: red; 
}

Si vous utilisez le sélecteur original complet, et faites-le précéder votre identifiant, votre règle sera toujours prioritaire.

Source

2013-05-03 19:18:42 CocaLeaf

Scripts de contenu CSS n'écrase pas l'original

Répondre

Questions connexes