# Listener for when a page is finished loading

**URL:** <https://discourse.mozilla.org/t/listener-for-when-a-page-is-finished-loading/95760>\
**Category:** Add-on Support\
**Created:** [April 10, 2022, 12:56am UTC](https://discourse.mozilla.org/t/listener-for-when-a-page-is-finished-loading/95760 "2022-04-10T00:56:12Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dat\_Le](https://avatars.discourse-cdn.com/v4/letter/d/7993a0/32.png) [@Dat\_Le](https://discourse.mozilla.org/u/Dat_Le)\
**Post date:** [April 10, 2022, 12:56am UTC](https://discourse.mozilla.org/t/listener-for-when-a-page-is-finished-loading/95760/1 "2022-04-10T00:56:12Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![juraj.masiar](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/juraj.masiar/32/30587_2.png) [@juraj.masiar](https://discourse.mozilla.org/u/juraj.masiar)\
**Post date:** [April 10, 2022, 8:01am UTC](https://discourse.mozilla.org/t/listener-for-when-a-page-is-finished-loading/95760/2 "2022-04-10T08:01:54Z")

</div>

That depends, one could use:

> **[webNavigation.onCompleted - Mozilla | MDN](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webNavigation/onCompleted)**
>
> Fired when a document, including the resources it refers to, is completely loaded and initialized. This is equivalent to the window load event.

But you need a `webNavigation` permission, which is [alerted to users](https://extensionworkshop.com/documentation/develop/request-the-right-permissions/#advised-permissions).

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:

> **[tabs.onUpdated - Mozilla | MDN](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/onUpdated)**
>
> Fired when a tab is updated.

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.

---

<div class="post-metadata">

**Author:** ![jscher2000](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/jscher2000/32/28202_2.png) [@jscher2000](https://discourse.mozilla.org/u/jscher2000)\
**Post date:** [April 24, 2022, 8:19pm UTC](https://discourse.mozilla.org/t/listener-for-when-a-page-is-finished-loading/95760/3 "2022-04-24T20:19:25Z")

</div>

> [@Dat\_Le](#):
>
> I want to set up a listener for when a particular page has finished loading in background.js, which is the background script.

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

```auto
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"]
  }
);

```

---

<div class="post-metadata">

**Author:** ![juraj.masiar](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/juraj.masiar/32/30587_2.png) [@juraj.masiar](https://discourse.mozilla.org/u/juraj.masiar)\
**Post date:** [April 24, 2022, 8:40pm UTC](https://discourse.mozilla.org/t/listener-for-when-a-page-is-finished-loading/95760/4 "2022-04-24T20:40:23Z")

</div>

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`](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/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 😃 .