Não é possível aplicar o CSS a partir da extensão do Chrome nas folhas de estilo do usuário

Question

Estou tentando ocultar os anúncios do lado direito dos e-mails no Gmail. Para isso, fiz uma extensão que aplica um estilo CSS.

"content_scripts": [
    {
      "matches": ["https://mail.google.com/mail/*", "https://*/*"],
      "css": ["css/hide.css"]
    }
  ]

O conteúdo de hide.css é:

div.nH.HbF0O{ display: none; }

Se eu testar esse CSS no arquivo %userprofile%\Local Settings\Application Data\Google\Chrome\User Data\Default\User StyleSheets\Custom.css , os anúncios desaparecerão. Se eu carregar a extensão, não está funcionando.

Se eu introduzir outros estilos no arquivo CSS, por exemplo body {display: none;} ou algo simples, o CSS será aplicado.

Qual poderia ser o problema?

    

Answer 1

Talvez um pouco, mas eu acho que nunca vi código CSS como div.nH.HbF0O{ display: none; } .

• Você quis dizer div.nH, div.HbF0O{ display: none; } ?
• ou você quer dizer "descendente" e perder um espaço em branco: div.nH .HbF0O{ display: none; } ?

Editar: Verifiquei se o CSS div.nH.HbF0O{} pode se referir a HTML <div class="nH HbF0O" /> , por isso posso estar errado.

    

Answer 2

Acabei de brincar com uma extensão simples do Chrome que aplica alguns estilos CSS e descobri que o estilo da página da Web terá precedência sobre o estilo de extensão.

Tente acertar um !important no final da sua declaração, por exemplo

div.nH.HbF0O { display: none !important; }

e veja se isso resolve o seu problema.