How to detect url change (via popstate) on my extension?

Add-ons Development
, ,
#1

I’m creating a firefox extension to take notes whilst watching youtube videos. When on a youtube video I make a request to my backend which looks for notes tagged with the current URL.

So far I have this in the manifest

"content_scripts": [
    {... "run_at": "document_end", "js": ["content-script.js"]}],
    "background": { "persistent": false,"scripts": ["background.js" ]},
    "sidebar_action": {
        ...
        "default_panel": "sidebar/index.html"
    }

In sidebar/script.js which links into sidebar/index.html I have this

browser.browserAction.onClicked.addListener(() => {
    browser.sidebarAction.close();
  });
  // get message on tab change
  browser.tabs.onActivated.addListener(function (activeInfo) {
    browser.tabs.get(activeInfo.tabId, function (tab) {
      GetInitialInfo(tab);
    });
  });
  // get message on page load
  browser.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
    if (changeInfo.status == "complete") {
      GetInitialInfo(tab);
    }
  });
  // // on window load
  window.onload = function () {
    browser.tabs.query({ active: true, currentWindow: true }, function (tabs) {
      GetInitialInfo(tabs[0]);
    });
  };

The GetInitialInfo then does everything I want to, checks if the tab.url is youtube and so on.

It works fine, but if I click on another youtube video (because youtube uses History.replaceState) none of the above are triggered.

I tried using window.addEventListener('popstate'...) just under window.onload but nothing happened.

#2

The popstate listener would have to be in the content script.