Listener for when a page is finished loading

I am developing an add-on for Firefox. I want to set up a listener for when a particular page has finished loading in background.js, which is the background script. There are many webextensions apis that could be the answer, but their documentation don’t make a lot of sense to me. Please help me with this!

That depends, one could use:


But you need a webNavigation permission, which is alerted to users.

Second option, if you already have all_urls (or other hosts) permission, you can create dummy “single-line” content script that will be injected into every page after is loaded (using run_at property) and it will send a message to background script.

And lastly, if you already have tabs permission, you could use:


BUT things gets really complicated here so I can’t recommend this approach at all. There is just too many update events, some of them makes no sense, some are browser specific, some can be repeated.

You could try something along these lines; I have not tested this myself:

function doTabLoadedStuff(tabId, changeInfo, tabInfo) {
  if (changeInfo.status != 'complete') return;
  console.log('Page loaded in tab ' + tabId);
}

browser.tabs.onUpdated.addListener(doTabLoadedStuff, 
  {
    urls: ["https://www.example.com/"],
    properties: ["status"]
  }
);

The problem with status is that it changes all the time, from the docs:

When the user navigates to a new URL in a tab, this will typically generate several onUpdated events as various properties of the tabs.Tab object are updated. The status property will cycle through "loading" and "complete" .

So you may first get “complete” for “about:blank” (!!!), because each page starts with a blank page (I think), and then as the page loads, you may again receive multiple “complete” events. It’s a pure hell :smiley: .