tabs.onUpdated
==============

Fired when a tab is updated.

When the user navigates to a new URL in a tab, this typically generates several `onUpdated` events as various properties of the `tabs.Tab` object are updated. This includes the `url`, but also potentially the `title` and `favIconUrl` properties. The `status` property will cycle through `"loading"` and `"complete"`.

This event also fires for changes to a tab's properties that don't involve navigation, such as pinning and unpinning (which updates the `pinned` property) and muting or unmuting (which updates the `audible` and `mutedInfo` properties).

You can filter this event, making it only fire for tabs whose URLs match specific patterns, changes to particular properties, changes to a tab or window, or any combinations of these restrictions.

Syntax
------


```js
browser.tabs.onUpdated.addListener(
  listener, // function
  filter     // optional object
)
browser.tabs.onUpdated.removeListener(listener)
browser.tabs.onUpdated.hasListener(listener)
```


Events have three functions:

`addListener(callback, filter)`

Adds a listener to this event.

`removeListener(listener)`

Stop listening to this event. The `listener` argument is the listener to remove.

`hasListener(listener)`

Check whether `listener` is registered for this event. Returns `true` if it is listening, `false` otherwise.

addListener syntax
------------------

### Parameters

`listener`

The function called when this event occurs. The function is passed these arguments:

`tabId`

`integer`. The ID of the updated tab.

`changeInfo`

`object`. Properties of the tab that changed. See the changeInfo section for more details.

`tab`

`tabs.Tab`. The new state of the tab.


`filter` Optional

`object`. A set of filters that restrict the events sent to this listener. This object can have one or more of these properties. Events are only sent if they satisfy all the filters provided.

`urls`

`Array`. An array of match patterns. Fires the event only for tabs whose current `url` property matches any one of the patterns.

`properties`

`Array`. An array of strings consisting of supported `tabs.Tab` object property names. Fires the event only for changes to one of the properties named in the array. These properties can be used:

* "attention"
* "autoDiscardable"
* "audible"
* "discarded"
* "favIconUrl"
* "hidden"
* "isArticle"
* "mutedInfo"
* "pinned"
* "status"
* "title"
* "url"

**Note:** The "url" value has been supported since Firefox 88. In Firefox 87 and earlier, "url" changes can be observed by filtering by "status".

`tabId`

`Integer`. Fires this event only for the tab identified by this ID.

`windowId`

`Integer`. Fires this event only for tabs in the window identified by this ID.


Additional objects
------------------

### changeInfo

Lists the changes to the state of the tab that is updated. To learn more about these properties, see the `tabs.Tab` documentation. Note that not all `tabs.Tab` properties are supported.

`attention` Optional

`boolean`. Indicates whether the tab is drawing attention. For example, `attention` is `true` when the tab displays a modal dialog.

`audible` Optional

`boolean`. The tab's new audible state.

`autoDiscardable` Optional

`boolean`. Whether the tab can be discarded by the browser. The default value is `true`. When set to `false`, the browser cannot automatically discard the tab. However, the tab can be discarded by `tabs.discard`.

`discarded` Optional

`boolean`. Whether the tab is discarded. A discarded tab is one whose content has been unloaded from memory but is visible in the tab strip. Its content gets reloaded the next time it's activated.

`favIconUrl` Optional

`string`. The tab's new favicon URL. Not included when a tab loses its favicon (navigating from a page with a favicon to a page without one). Check `favIconUrl` in tab instead.

`hidden` Optional

`boolean`. True if the tab is `hidden`.

`isArticle` Optional

`boolean`. True if the tab is an article and is therefore eligible for display in `Reader Mode`.

`mutedInfo` Optional

`tabs.MutedInfo`. The tab's new muted state and the reason for the change.

`pinned` Optional

`boolean`. The tab's new pinned state.

`status` Optional

`string`. The status of the tab. Can be either *loading* or *complete*.

`title` Optional

`string`. The tab's new title.

`url` Optional

`string`. The tab's URL, if it has changed.

Examples
--------

Listen for and log all the change info and new state:


```js
function handleUpdated(tabId, changeInfo, tabInfo) {
  console.log(`Updated tab: ${tabId}`);
  console.log("Changed attributes: ", changeInfo);
  console.log("New tab Info: ", tabInfo);
}

browser.tabs.onUpdated.addListener(handleUpdated);
```


Log changes to URLs:


```js
function handleUpdated(tabId, changeInfo, tabInfo) {
  if (changeInfo.url) {
    console.log(`Tab: ${tabId} URL changed to ${changeInfo.url}`);
  }
}

browser.tabs.onUpdated.addListener(handleUpdated);
```

### Filtering examples

Log changes only to tabs whose `url` property is matched by `https://developer.mozilla.org/*` or `https://twitter.com/mozdevnet`:


```js
const pattern1 = "https://developer.mozilla.org/\*";
const pattern2 = "https://twitter.com/mozdevnet";

const filter = {
  urls: [pattern1, pattern2],
};

function handleUpdated(tabId, changeInfo, tabInfo) {
  console.log(`Updated tab: ${tabId}`);
  console.log("Changed attributes: ", changeInfo);
  console.log("New tab Info: ", tabInfo);
}

browser.tabs.onUpdated.addListener(handleUpdated, filter);
```


Log changes only to the `pinned` property of tabs (that is, pin and unpin actions):


```js
const filter = {
  properties: ["pinned"],
};

function handleUpdated(tabId, changeInfo, tabInfo) {
  console.log(`Updated tab: ${tabId}`);
  console.log("Changed attributes: ", changeInfo);
  console.log("New tab Info: ", tabInfo);
}

browser.tabs.onUpdated.addListener(handleUpdated, filter);
```


Combine both the previous filters, log only when the `pinned` property of tabs changes for tabs whose `url` property is matched by `https://developer.mozilla.org/*` or `https://twitter.com/mozdevnet`:


```js
const pattern1 = "https://developer.mozilla.org/\*";
const pattern2 = "https://twitter.com/mozdevnet";

const filter = {
  urls: [pattern1, pattern2],
  properties: ["pinned"],
};

function handleUpdated(tabId, changeInfo, tabInfo) {
  console.log(`Updated tab: ${tabId}`);
  console.log("Changed attributes: ", changeInfo);
  console.log("New tab Info: ", tabInfo);
}

browser.tabs.onUpdated.addListener(handleUpdated, filter);
```


Log changes only when the `pinned` property of tabs changes for tabs whose `url` property is matched by `https://developer.mozilla.org/*` or `https://twitter.com/mozdevnet` where the tab was part of the current browser window when the update event fired:


```js
const pattern1 = "https://developer.mozilla.org/\*";
const pattern2 = "https://twitter.com/mozdevnet";

const filter = {
  urls: [pattern1, pattern2],
  properties: ["pinned"],
  windowId: browser.windows.WINDOW\_ID\_CURRENT,
};

function handleUpdated(tabId, changeInfo, tabInfo) {
  console.log(`Updated tab: ${tabId}`);
  console.log("Changed attributes: ", changeInfo);
  console.log("New tab Info: ", tabInfo);
}

browser.tabs.onUpdated.addListener(handleUpdated, filter);
```

### Example extensions

* annotate-page
* apply-css
* bookmark-it
* chill-out
* cookie-bg-picker
* history-deleter
* session-state
Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

**Note:** This API is based on Chromium's `chrome.tabs` API. This documentation is derived from `tabs.json` in the Chromium code.