Content Scripts CSS doesn't overwrite the original

问题

My problem that I want to modify a style of a site with my custom settings. I tried with Content Scripts, but this dosent work, because they can't overwrite the original css files. Here is an example:

foo/manifest.json

{
  "name": "test",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["file://*/*test.html"],
      "css": ["main.css"]
    }
  ]
}

foo/main.css

body {
  background: #0f0;
}

test.html

<html>
  <head>
    <title>foobar</title>
  </head>

  <body style="background:#f00;">

  </body>
</html>

Then i loaded the the extension foo folder into my google chrome, and opened the test.html but the background color still red. I inspected the element and i saw that:

Element Style

body {
background: #f00;
}

user stylesheet

body {
~~background: #0f0;~~
}

How can I modify an existing css file with my custom css with Content Scripts?
If this not possible, how can i automatically modify an existing css with my custom when page loads in google chrome specially.

回答1:

An inline style rule has higher precedent over any rules imported from a stylesheet. You could use the !important directive to subvert this behavior:

body {
  background: #0f0 !important;
}

回答2:

Using javascript, add an ID to the body tag, or some other tag that encompasses everything. Then you can do this:

// original rule
.someclass li a{
    color: blue;
}

// your rule
#cool-extension .someclass li a{
    color: red;
}

If you use the original full selector, and prepend it with your ID, your rule will always take precedence.

来源：https://stackoverflow.com/questions/6077472/content-scripts-css-doesnt-overwrite-the-original

标签

javascript

css

google-chrome

google-chrome-extension