如何更改具有特定 CSS 类的元素的样式？

Question

我正在尝试将网站 (https://chromewebstore.google.com/) 上特定元素的字体系列更改为我的自定义字体，而不是网站使用的字体。为此，我在本地创建了自己的 Chrome 扩展程序。但我想要使用的元素没有元素“id”，只有 CSS 类，所以我用它来挂钩网页上的该元素。

当我尝试直接在 Chrome 开发工具面板中更改字体样式时，效果很好，元素的样式已更改：

但是当我在 Chrome 扩展中执行相同操作时，它根本不起作用，元素的样式没有更改。这是我的清单文件和 CSS 文件代码： 清单.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;
    }

“Droid Serif”字体只是我的 Windows 计算机上安装的自定义字体。

我的扩展无法工作的原因是什么？我有一些猜测，但不能确定：

• 明显的归属“3”不允许改变风格；然而，版本“2”已被弃用；
• “matches”值不适用于 URL 中没有“www”的网站；
• .WAxuqb 类的网站样式比我的样式表具有更高的优先级，即使我在定义中指定了“!important”；但为什么呢？

如果您能指出我在这里做错了什么，那就太好了。

Answer 1

在我发现代码中的错误后，我能够使其适用于其他网站： 在清单的“matches”值中，您必须在url末尾指定“*”而不是空白“/”，否则它将与bebsite URL不匹配。

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

虽然我无法使其适用于 Chrome 网上商店，可能是因为扩展程序在那里被禁用，但我可以使其适用于 Steam 网站。