Need help with URL patterns

[Rekiro]

I have a noob issue. I don't know CSS, but I've been trying to mod YouTube.

I've been trying to inject a style into YouTube Watch page with all the URLs like "https://www.youtube.com/watch?v=MIjxakTZk-0"

The URL that I used in the rule is "www.youtube.com/watch", but it doesn't light up blue. Can you please help me with that?

[czdav3]

Still not working for you?

I tried that and with the address setting "www.youtube.com/watch?" it works.

[Rekiro]

It works sometimes, but only occasionally. And when it works, it also injects the theme into "www.youtube.com" when I want to be applied just on the YouTube Watch page.

[DraakjeYoblama]

The problem here is that YouTube almost never reloads. Instead of going to a new page, it just changes everything about the page, including the url.

However, you can use the plugin to check the url and make it reload the page when you switch to and from a video.
Add a second rule that works on www\.youtube\.com, with the following JavaScript:

let watchEnvironment = window.location.pathname.startsWith('/watch');

document.addEventListener('yt-navigate-start', function process() {
    const nextEnvironment = window.location.pathname.startsWith('/watch');
    if (nextEnvironment != watchEnvironment) {
        console.log("switching");
        watchEnvironment = nextEnvironment;
        window.location.reload();
    }
    return;
});

Now you can use the rule for www\.youtube\.com\/watch like normal.

Alternatively, you can do it all in one rule for www\.youtube\.com. This would be a slightly smoother experience, but more of a hassle.

let watchEnvironment = window.location.pathname.startsWith('/watch');
switchEnvironment()

document.addEventListener('yt-navigate-finish', function process() {
    const nextEnvironment = window.location.pathname.startsWith('/watch');
    if (nextEnvironment != watchEnvironment) {
        console.log("switching");
        watchEnvironment = nextEnvironment;
        switchEnvironment();
    }
    return;
});

function switchEnvironment() {
    if (watchEnvironment) {
        // video player code here
        document.getElementById("logo-icon").style.color = "Red"; //example
    } else {
        // not video player code here
        document.getElementById("logo-icon").style.color = "Black"; //example
    }
}