How to change styles of element with a specific CSS class?

54 Views Asked by At

I'm trying to change the font-family of a specific element on a website (https://chromewebstore.google.com/) to my custom font instead of what the website uses. For that purpose I created my own Chrome extension locally. But the element I want to work with does not have an element "id", only a CSS class, so I use it to hook to that element on a webpage.

When I try to change the font style directly in the Chrome dev tools panel, it works just fine, the style of the element is changed:

enter image description here

But when I do the same in my Chrome extension, it simply does not work, the element's style is not changed. Here's my manifest file and CSS file code: 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 is just a custom font installed on my Windows machine.

What is the reason for my extension not working? I have some guesses but cannot be sure:

  • The manifest vestion "3" doesn't allow changing styles; however, the version "2" is deprecated;
  • The "matches" values doesn't work for websites without "www" in the URL;
  • The website's styles for .WAxuqb class have higher priority than my stylesheet, even though I specified "!important" in the definition; but why?

It would be great if you could point out what I'm doing wrong here.

1

There are 1 best solutions below

0
BohdanZPM On

I was able to make it work for other websites, after I found an error in the code: in the manifest "matches" value, you have to specify "*" at the end of the url instead of blank "/", otherwise it will not match the bebsite URL.

    "matches": ["https://store.steampowered.com/*"]

I wasn't able to make it work for Chrome web store though, probably because extensions are disabled there, but I could make it work for Steam website.