Problemas de injeção de CSS em scripts de conteúdo para extensões

Apesar de definir a injeção de CSS no manifesto, seu arquivo CSS permanece ausente da página da web. Aqui estão as possíveis causas e soluções:

Motivo: Regras CSS conflitantes

A folha de estilo é injetada, mas não aplicada devido a outros estilos substituindo suas regras.

Solução:

• Aumentar a especificidade do CSS: Adicione seletores mais específicos às suas regras CSS.
• Use " !important": Sufixe todas as regras com "!important" para substituir os estilos existentes.

Motivo: Limite de injeção de script de conteúdo

Manifest version 3 limita a injeção direta de CSS por scripts de conteúdo.

Solução: Injete CSS por meio de um script de conteúdo da seguinte maneira:

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: Ao usar o Manifest versão 2, a chave "web_accessible_resources" é necessária para permitir o acesso ao arquivo CSS a partir de uma página sem extensão.