我试过制作镀铬扩展但我有麻烦

Question

所以我尝试使用litle 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

嗯......似乎代码差不多好了，但我发现了一个问题。

"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;
}