Problemas de inyección de CSS en scripts de contenido para extensiones

A pesar de definir la inyección de CSS en el manifiesto, su archivo CSS permanece ausente de la página web. Estas son las posibles causas y soluciones:

Motivo: Reglas CSS en conflicto

La hoja de estilos se inyecta pero no se aplica debido a que otros estilos anulan sus reglas.

Solución:

• Aumentar la especificidad de CSS: Agregue selectores más específicos a sus reglas CSS.
• Utilice " !important": Agregue el sufijo "!important" a cada regla para anular los estilos existentes.

Motivo: Límite de inyección de secuencias de comandos de contenido

Manifiesto versión 3 limita que los scripts de contenido inyecten CSS directamente.

Solución: Inyecte CSS a través de un script de contenido de la siguiente manera:

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"]

Nota: Cuando se utiliza Manifest versión 2, se requiere la clave "web_accessible_resources" para permitir el acceso al archivo CSS desde una página sin extensión.