Testing the above it didn't work for me so I've made some adjustments.

{ "name": "DarkCloud", "description": "SoundCloud Dark Theme", "version": "2024.07.30", "permissions": ["scripting"], "manifest_version": 3, "icons": { "128": "darklogo.png" }, "action": { "default_title": "DarkCloud", "default_icon": "darklogo.png" }, "web_accessible_resources": [ { "resources": ["css_dark.css"], "matches": ["https://soundcloud.com/*"] } ], "content_scripts": [ { "matches": ["https://soundcloud.com/*"], "js": ["background.js"], "css": ["css_dark.css"], "run_at": "document_start" } ] }

and then updating the background.js

const observer = new MutationObserver((mutationsList) => {
    mutationsList.forEach((mutation) => {
        mutation.removedNodes.forEach((node) => {
            if (node.id === 'darkstyle_css') {
                const head = document.getElementsByTagName('head')[0];
                const link = document.createElement('link');

                link.id = 'darkstyle_css';
                link.rel = 'stylesheet';
                link.type = 'text/css';
                link.href = chrome.extension.getURL('css_dark.css');
                link.media = 'all';

                head.appendChild(link);
            }
        });
    });
});

observer.observe(document, { childList: true, subtree: true });

let's merge that one @iamdiogo @MyNameIsJulian!

@CTRPaul

and then updating the background.js

I would change this a bit so it stops checking the rest of the mutated nodes when it has already re-added the CSS and keeps a reference to the link element instead of creating a new one every re-adding

// background.js

const link = document.createElement('link');

link.id = 'darkstyle_css';
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = chrome.extension.getURL('css_dark.css');
link.media = 'all';

document.head.appendChild(link);

const observer = new MutationObserver((mutationsList) => {
    'use strict';
    for (const mutation of mutationsList) {
        for (const node of mutation.removedNodes) {
            if (node.id !== 'darkstyle_css') continue;
            document.head.appendChild(link);
            return;
        }
    }
});

observer.observe(document, { childList: true, subtree: true });

{
    "name": "DarkCloud",
    "description": "SoundCloud Dark Theme",
    "version": "2024.07.30",
    "permissions": ["scripting"],
    "manifest_version": 3,
    "icons": {
        "128": "darklogo.png"
    },
    "action": {
        "default_title": "DarkCloud",
        "default_icon": "darklogo.png"
    },
    "web_accessible_resources": [
        {
            "resources": ["css_dark.css"],
            "matches": ["https://soundcloud.com/*"]
        }
    ],
    "content_scripts": [
        {
            "matches": ["https://soundcloud.com/*"],
            "js": ["background.js"],
            "css": ["css_dark.css"],
            "run_at": "document_start"
        }
    ]
}

I just realized for background.js, instead of searching for the node in all of the modified nodes, you can check it directly (if it has a parent node, it's in the DOM)

const link = document.createElement('link');

link.rel = 'stylesheet';
link.type = 'text/css';
link.href = chrome.extension.getURL('css_dark.css');

document.head.appendChild(link);

const observer = new MutationObserver(() => link.parentNode == null && document.head.appendChild(link));

observer.observe(document, { childList: true, subtree: true });

The media attribute in link elements is all by default and since we have a reference stored, an id is also not needed