I am attempting to customize the font-family of a specific element on a website (https://chromewebstore.google.com/) with my own custom font. To achieve this, I created a Chrome extension locally. However, the element I want to modify does not have an "id" attribute, only a CSS class, so I am using that to target the element on the webpage.
When I directly change the font style in the Chrome dev tools panel, it works perfectly fine and the element's style is updated:
https://i.sstatic.net/Q9dVC.png
But when I attempt to do the same with my Chrome extension, it simply does not work - the style of the element remains unchanged. Here is the code from my manifest file and CSS file: manifest.json
{
"name": "Custom CSS",
"version": "0.0.1",
"manifest_version": 3,
"description": "An extension allowing you to inject custom CSS to the websites you browse",
"content_scripts": [
{
"css": ["chromestore_styles.css"],
"matches": ["https://chromewebstore.google.com/"]
}
]
}
chromestore_styles.css
.WAxuqb {
font-family: "Droid Serif" !important;
}
The "Droid Serif" font used is a custom font installed on my Windows machine.
Why isn't my extension working as expected? There are a few possibilities that come to mind:
- The manifest version being set to "3" may restrict style changes, but version "2" is deprecated;
- The "matches" values might not be effective for websites without "www" in the URL;
- The website's styles for the .WAxuqb class could be taking precedence over my stylesheet, even though I have specified "!important" in the definition; but why?
If you could provide any insight into what I might be doing incorrectly here, it would be greatly appreciated.