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

Question

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:

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.

Extensions aren't allowed to access the web store in Chrome. — woxxom
– woxxom, Commented Dec 6, 2023 at 22:47
Does your CSS appear in the web inspector? Above or below the CSS you are attempting to override? — Brett Donald
– Brett Donald, Commented Dec 6, 2023 at 22:48
My CSS does not show in the web inspector. I'm attempting to override the same CSS class that is defined on the page by default. — BohdanZPM
– BohdanZPM, Commented Dec 6, 2023 at 22:50
I tried to apply the extension to other website - store.steampowered.com - and with the same result. Other extensions do work with that website. — BohdanZPM
– BohdanZPM, Commented Dec 6, 2023 at 22:52

BohdanZPM · Accepted Answer · 2023-12-06 23:24:08Z

0

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.

answered Dec 6, 2023 at 23:24

BohdanZPM

7572 gold badges10 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related