我曾尝试进行 chrome 扩展，但我遇到了麻烦

Question

所以我尝试制作小 chrome 扩展只是为了在 csgosquad 中更改颜色。com/ranks color of thoose orange bars to red

使用 manifest.json

{
  "name": "Top Questions redder",
  "description": "Make the world red",
  "version": "1.0",
  "content_scripts": [
    {
    "matches": ["https://csgosquad.com/ranks"],
    "css": ["sheet.css"],
    }
  ],
  "manifest_version": 2
}

和sheet.css

`.row-rank .progress.bar-rank .progress-bar
{
    background-color: #ff0b00;
}`

但我仍然需要手动更改它 like this

那么如何让它自动改变呢？

Answer 1

嗯...代码好像差不多Ok了，但是我发现了一个问题

"content_scripts": [
  {
    "matches": ["https://csgosquad.com/ranks"],
    "css": ["sheet.css"],
  }
],

"css"行末尾的逗号：["sheet.css"],。可能这个 manifest.json 文件无效。您应该在 chrome://extensions 页面上确认您的扩展程序是否已成功注册。

Answer 2

有三个点，

1. 删除 content_scripts
中的最后一个“,”
2. 删除 sheet.css
中的“`”
3. 添加“!important”以确保您的 css 具有更高的特异性

manifest.json:

{
    "name": "Top Questions redder",
    "description": "Make the world red",
    "version": "1.0",
    "content_scripts": [
        {
            "matches": [
                "https://csgosquad.com/ranks"
            ],
            "css": [
                "sheet.css"
            ]
        }
    ],
    "manifest_version": 2
}

sheet.css

.row-rank .progress.bar-rank .progress-bar
{
    background-color: #ff0b00 !important;
}