Can't apply CSS from Chrome Extension in user stylesheets

Question

I'm trying to hide the ads from the right side of the emails in Gmail. For that I've made an extension that applies a CSS style.

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

The content of hide.css is:

div.nH.HbF0O{ display: none; }

If I test this CSS in the file %userprofile%\Local Settings\Application Data\Google\Chrome\User Data\Default\User StyleSheets\Custom.css, the ads disappear. If I load the extension, it's not working.

If I introduce other styles in the CSS file, for example body {display: none;} or something simple, the CSS it's applied.

What could be the problem?

Answer 1

I've just been playing around with a simple Chrome extension that applies some CSS styling and have found the web page's styling will take precedence over extension styling.

Try whacking an !important at the end of your declaration, e.g.

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

and see if that fixes your problem.

Answer 2

Maybe a long shot, but I guess I've never seen CSS code like div.nH.HbF0O{ display: none; }.

• Did you mean div.nH, div.HbF0O{ display: none; } ?
• or you mean "descendant" and miss a whitespace: div.nH .HbF0O{ display: none; } ?

Edit: I've checked that CSS div.nH.HbF0O{} can refer to HTML <div class="nH HbF0O" /> so I might be wrong.