Menu
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.
819
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;
}
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.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
