I've been working on my extension YTDownloaderNew, and in the ytm-content-script.js, I'm using this code to detect when the user navigates to a YouTube Music playlist:

navigation.addEventListener('navigate', () => {
    if (window.location.href.includes("music.youtube/playlist")) {
        playlistLoaded();
    }
});

It works perfectly fine in Edge and Chrome, but for some reason, it doesn't seem to work in Firefox. Is there a different event or method I can use for Firefox to achieve the same result?

I tried to intercept the popstate method, but it didn't really get me anywhere. I also went through the documentation on mozilla website, but I couldn’t find anything useful there.

Update

As I understand, Firefox doesn't support NavigationAPI. Also, the method with YouTube navigation works perfectly with YouTube, but for some reason, it doesn't work with YouTube Music.

I've done it like this for now:

if (window.navigation) {
    navigation.addEventListener('navigate', () => {
        if (window.location.href.includes("music.youtube/playlist")) {
            playlistLoaded();
        }
    });
} else {
    setInterval(() => {
        if (window.location.href.includes("music.youtube/playlist")) {
            playlistLoaded();
        }
    }, 1000);
}

I've been working on my extension YTDownloaderNew, and in the ytm-content-script.js, I'm using this code to detect when the user navigates to a YouTube Music playlist:

navigation.addEventListener('navigate', () => {
    if (window.location.href.includes("music.youtube/playlist")) {
        playlistLoaded();
    }
});

It works perfectly fine in Edge and Chrome, but for some reason, it doesn't seem to work in Firefox. Is there a different event or method I can use for Firefox to achieve the same result?

I tried to intercept the popstate method, but it didn't really get me anywhere. I also went through the documentation on mozilla website, but I couldn’t find anything useful there.

Update

As I understand, Firefox doesn't support NavigationAPI. Also, the method with YouTube navigation works perfectly with YouTube, but for some reason, it doesn't work with YouTube Music.

I've done it like this for now:

if (window.navigation) {
    navigation.addEventListener('navigate', () => {
        if (window.location.href.includes("music.youtube/playlist")) {
            playlistLoaded();
        }
    });
} else {
    setInterval(() => {
        if (window.location.href.includes("music.youtube/playlist")) {
            playlistLoaded();
        }
    }, 1000);
}

• javascript
• google-chrome-extension
• firefox-addon
• firefox-addon-webextensions

• 1 You can try using tabs.onUpdated and/or tabs.onCreated. – guest271314 Commented yesterday
• 2 Firefox doesn't implement navigation API. See How to detect page navigation on YouTube and modify its appearance seamlessly? – woxxom Commented yesterday
• Firefox does implement webNavigation API, an API that requires your extension to request permissions to access this. In FF, your code would look like: webNavigation.addListener('onCompleted', () => { ... }) – webketje Commented yesterday

1 Answer 1

You can try using tabs.onUpdated and/or tabs.onCreated.

---

Source: Guest271314 helped me in the comment section.

Solution

I created background.js

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    if (changeInfo.url && changeInfo.url.includes("music.youtube")) {
        chrome.tabs.sendMessage(tabId, { action: "playlistLoaded" });
    }
});

And modified my ytm-content.js

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.action === "playlistLoaded") {
        playlistLoaded();
    }
});