tabs.onUpdated

Syntax

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"
• "groupId"
• "hidden"
• "isArticle"
• "mutedInfo"
• "openerTabId"
• "pinned"
• "splitViewId"
• "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.

cookieStoreId

Integer. Fires this event only for tabs in the cookie store 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.

groupId Optional

integer. The ID of the group the tabs are in or -1 (tabGroups.TAB_GROUP_ID_NONE) for ungrouped tabs.

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.

openerTabId Optional

integer. The ID of the tab that opened this tab, if any. This property is only present if the opener tab exists and is in the same window.

pinned Optional

boolean. The tab's new pinned state.

splitViewId Optional

integer. The ID of the split view the tab belongs to. Set to tabs.SPLIT_VIEW_ID_NONE when the tab doesn't belong to a split view.

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:

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:

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://mastodon.social/@mdn:

const pattern1 = "https://developer.mozilla.org/*";
const pattern2 = "https://mastodon.social/@mdn";

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):

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://mastodon.social/@mdn:

const pattern1 = "https://developer.mozilla.org/*";
const pattern2 = "https://mastodon.social/@mdn";

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://mastodon.social/@mdn where the tab was part of the current browser window when the update event fired:

const pattern1 = "https://developer.mozilla.org/*";
const pattern2 = "https://mastodon.social/@mdn";

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