Have your chrome extension's stylesheets overwrite the site's CSS

user_9220399 0
Viewed 3095

I am writing a Chrome extension to modify the CSS of a specific page. Although, when I try to apply styles using style.min.css my spreadsheet is rendered before the site's spreadsheet in the cascade. To be precise, my rules are computed before theirs so their rules override mine.

For example, if I try this

article {
    background-color: red;
}

their rule gets computed last and my background won't be red.

This is what the dev tools look like. We can see my injected stylesheet doesn't have priority in the cascade.

Chrome dev tools

Also this is my manifest.json without the project description and name.

"content_scripts": [{
      "css": ["style.min.css"],
      "js": ["main.js"],
      "matches": ["https://intra.epitech.eu/*"]
 }],
 "permissions": ["tabs"]

So if anyone has any idea on how to go around that by prioritising your styles in a chrome extension please leave a comment :)

google-chrome-extension google-chrome css
3 Answers
article {
  background-color: red !important;
}

The !important tag stops other styles from overriding your styles.

You should use the !important tag lightly though. Because if you over use it you will start running into conflicting styles when your CSS file becomes very big.

user_81252780
user_62168780

As per the OP comments "run_at": "document_end" works only for js files. So load js file at document end then insert css files dynamically by loading css files from that js file.

In manifest.json write this

"content_scripts": [
    {
      "js": ["main.js"],
      "matches": ["https://intra.epitech.eu/*"],
      "run_at": "document_end"
    }
  ]
user_121946780
Related