javascript - Navigation in ChromeFirefox extension - Stack Overflow

admin管理员组

文章数量:1345051

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

Share Improve this question Follow edited yesterday rozsazoltan 10.7k66 gold badges1919 silver badges5151 bronze badges asked yesterday DipCraiDipCrai 3133 bronze badges New contributor DipCrai is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct. 3

• 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

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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();
    }
});

本文标签： javascriptNavigation in ChromeFirefox extensionStack Overflow