如何在 chrome 扩展中更改网站的 css？答案

【问题标题】：How to change css of a website in a chrome extension?如何在 chrome 扩展中更改网站的 css？
【发布时间】：2022-11-11 05:37:54
【问题描述】：

我一直在制作 chrome 扩展来更改 youtube 订阅按钮的颜色，但它似乎不起作用这是我的代码清单.json： `

{
  "manifest_version": 3,
  "name": "Red Subsccribe Button",
  "description": "Brings back the red subscribe button",
  "version": "1.0",
  "content_scripts": [{
    "css": ["styles.css"],
    "matches": ["https://*.youtube.com/watch/*"]
  }]
}

样式.css： `

.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled {
    color: #080808;
    background-color: #c00;
}

我看过很多其他帖子，但没有运气。加载页面后没有任何结果。

【问题讨论】：

问题肯定是由于您的内容脚本试图在 youtube.com/watch/* 上注入...当我去 YouTube 时，这不是他们拥有的 URL 模式。实际模式是 youtube.com/watch?v=VIDEOID ...因此您的内容脚本永远不会注入。解决方案是将模式更改为 youtube.com/*

标签： css google-chrome-extension

【解决方案1】：

我最终确保解决方案有效，并且可以确认以下设置有效：

manifest.json:

{
    "manifest_version": 3,
    "name": "Red Subscribe Button",
    "description": "Brings back the red subscribe button",
    "version": "1.0.0",
    "content_scripts": [{
        "matches": ["https://*.youtube.com/*"],
        "css": ["styles.css"]
    }]
}

styles.css:

.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled {
    color: #080808 !important;
    background-color: #c00 !important;
}

有 2 个问题：内容脚本 URL 的目标是“https://.youtube.com/watch/" 格式错误，因为 YouTube 在观看后没有另一个 "/"。

另一个问题是样式表将在注入 YouTube 的样式表之前立即注入，这意味着 YT 对您所定位的按钮类的定义将获得重要性并覆盖您的样式。

要解决这个问题，只需将!important 添加到您要设置的样式中。

【讨论】：