How to change css of a website in a chrome extension?-CodePudding

I have been making a chrome extension to change the color of the youtube subscribe button but it does not seem to be working here is my code manifest.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/*"]
  }]
}

styles.css: `

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

I have looked though many other posts but with no luck. Nothing resulted upon loading the page.

CodePudding user response：

I ended up making sure the solution worked and can confirm the follow set up works:

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

There were 2 problems: The content script URL was targeting "https://.youtube.com/watch/" which was malformed as YouTube does not have another "/" after watch.

The other problem was that the stylesheet would be injected right away, before YouTube's stylesheets are injected which means YT's definitions for the button class you are targeting would receive importance and override your styles.

To solve this, just add !important to the styles you want to set.