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.
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.
2 Answers
Reset to default 6An 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 enpasses 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.