Google Chrome Extensions

chrome.webNavigation

Use the chrome.webNavigation module to receive notifications about the status of navigations requests in-flight.

Manifest

All chrome.webNavigation methods and events require you to declare the "webNavigation" permission in the extension manifest. For example: 

{
  "name": "My extension",
  ...
  "permissions": [
    "webNavigation"
  ],
  ...
}

Examples

You can find simple examples of using the tabs module in the examples/api/webNavigation directory. For other examples and for help in viewing the source code, see Samples.

Event order

For a navigation that is successfully completed, events are fired in the following order: 

onBeforeNavigate -> onCommitted -> onDOMContentLoaded -> onCompleted

Any error that occurs during the process results in an onErrorOccurred event. For a specific navigation, there are no further events fired after onErrorOccurred.

If a navigating frame contains subframes, its onCommitted is fired before any of its children's onBeforeNavigate; while onCompleted is fired after all of its children's onCompleted.

If the reference fragment of a frame is changed, a onReferenceFragmentUpdated event is fired. This event can fire any time after onDOMContentLoaded, even after onCompleted.

If the history API is used to modify the state of a frame (e.g. using history.pushState(), a onHistoryStateUpdated event is fired. This event can fire any time after onDOMContentLoaded.

If a navigation was triggered via Chrome Instant or Instant Pages, a completely loaded page is swapped into the current tab. In that case, an onTabReplaced event is fired.

Relation to webRequest events

There is no defined ordering between events of the webRequest API and the events of the webNavigation API. It is possible that webRequest events are still received for frames that already started a new navigation, or that a navigation only proceeds after the network resources are already fully loaded.

In general, the webNavigation events are closely related to the navigation state that is displayed in the UI, while the webRequest events correspond to the state of the network stack which is generally opaque to the user.

A note about tab IDs

Not all navigating tabs correspond to actual tabs in Chrome's UI, e.g., a tab that is being pre-rendered. Such tabs are not accessible via the tabs API nor can you request information about them via webNavigation.getFrame or webNavigation.getAllFrames. Once such a tab is swapped in, an onTabReplaced event is fired and they become accessible via these APIs.

A note about timestamps

It's important to note that some technical oddities in the OS's handling of distinct Chrome processes can cause the clock to be skewed between the browser itself and extension processes. That means that WebNavigation's events' timeStamp property is only guaranteed to be internally consistent. Comparing one event to another event will give you the correct offset between them, but comparing them to the current time inside the extension (via (new Date()).getTime(), for instance) might give unexpected results.

A note about frame and process IDs

Due to the multi-process nature of Chrome, a tab might use different processes to render the source and destination of a web page. Therefore, if a navigation takes place in a new process, you might receive events both from the new and the old page until the new navigation is committed (i.e. the onCommitted event is send for the new main frame). Because frame IDs are only unique for a given process, the webNavigation events include a process ID, so you can still determine which frame a navigation came from.

Also note that during a provisional load the process might be switched several times. This happens when the load is redirected to a different site. In this case, you will receive repeated onBeforeNavigate and onErrorOccurred events, until you receive the final onCommitted event.

Transition types and qualifiers

The webNavigation API's onCommitted event has a transitionType and a transitionQualifiers property. The transition type is the same as used in the history API describing how the browser navigated to this particular URL. In addition, several transition qualifiers can be returned that further define the navigation.

The following transition qualifiers exist:

Transition qualifier Description
"client_redirect" One or more redirects caused by JavaScript or meta refresh tags on the page happened during the navigation.
"server_redirect" One or more redirects caused by HTTP headers sent from the server happened during the navigation.
"forward_back" The user used the Forward or Back button to initiate the navigation.
"from_address_bar" The user initiated the navigation from the address bar (aka Omnibox).

API Reference: chrome.webNavigation

Methods

getFrame

chrome.webNavigation.getFrame(object details)

Retrieves information about the given frame. A frame refers to an <iframe> or a <frame> of a web page and is identified by a tab ID and a frame ID.

Parameters

details ( object )
Information about the frame to retrieve information about.
tabId ( integer )
The ID of the tab in which the frame is.
processId ( integer )
The ID of the process runs the renderer for this tab.
frameId ( integer )
The ID of the frame in the given tab.

Callback function

The callback parameter should specify a function that looks like this:

function(object details) {...};
details ( optional object )
Information about the requested frame, null if the specified frame ID and/or tab ID are invalid.
errorOccurred ( boolean )
True if the last navigation in this frame was interrupted by an error, i.e. the onErrorOccurred event fired.
url ( string )
The URL currently associated with this frame, if the frame identified by the frameId existed at one point in the given tab. The fact that an URL is associated with a given frameId does not imply that the corresponding frame still exists.

getAllFrames

chrome.webNavigation.getAllFrames(object details)

Retrieves information about all frames of a given tab.

Parameters

details ( object )
Information about the tab to retrieve all frames from.
tabId ( integer )
The ID of the tab.

Callback function

The callback parameter should specify a function that looks like this:

function(array of object details) {...};
details ( optional array of object )
A list of frames in the given tab, null if the specified tab ID is invalid.

Events

onBeforeNavigate

chrome.webNavigation.onBeforeNavigate.addListener(function(object details) {...});

Fired when a navigation is about to occur.

Listener Parameters

details ( object )
tabId ( integer )
The ID of the tab in which the navigation is about to occur.
url ( string )
processId ( integer )
The ID of the process runs the renderer for this tab.
frameId ( integer )
0 indicates the navigation happens in the tab content window; a positive value indicates navigation in a subframe. Frame IDs are unique for a given tab and process.
timeStamp ( double )
The time when the browser was about to start the navigation, in milliseconds since the epoch.

Filters

url ( array of events.UrlFilter )
Conditions that the URL being navigated to must satisfy. The 'schemes' and 'ports' fields of UrlFilter are ignored for this event.

onCommitted

chrome.webNavigation.onCommitted.addListener(function(object details) {...});

Fired when a navigation is committed. The document (and the resources it refers to, such as images and subframes) might still be downloading, but at least part of the document has been received from the server and the browser has decided to switch to the new document.

Listener Parameters

details ( object )
tabId ( integer )
The ID of the tab in which the navigation occurs.
url ( string )
processId ( integer )
The ID of the process runs the renderer for this tab.
frameId ( integer )
0 indicates the navigation happens in the tab content window; a positive value indicates navigation in a subframe. Frame IDs are unique within a tab.
transitionType ( enumerated string ["link", "typed", "auto_bookmark", "auto_subframe", "manual_subframe", "generated", "start_page", "form_submit", "reload", "keyword", "keyword_generated"] )
Cause of the navigation. The same transition types as defined in the history API are used.
transitionQualifiers ( array of enumerated string ["client_redirect", "server_redirect", "forward_back", "from_address_bar"] )
A list of transition qualifiers.
timeStamp ( double )
The time when the navigation was committed, in milliseconds since the epoch.

Filters

url ( array of events.UrlFilter )
Conditions that the URL being navigated to must satisfy. The 'schemes' and 'ports' fields of UrlFilter are ignored for this event.

onDOMContentLoaded

chrome.webNavigation.onDOMContentLoaded.addListener(function(object details) {...});

Fired when the page's DOM is fully constructed, but the referenced resources may not finish loading.

Listener Parameters

details ( object )
tabId ( integer )
The ID of the tab in which the navigation occurs.
url ( string )
processId ( integer )
The ID of the process runs the renderer for this tab.
frameId ( integer )
0 indicates the navigation happens in the tab content window; a positive value indicates navigation in a subframe. Frame IDs are unique within a tab.
timeStamp ( double )
The time when the page's DOM was fully constructed, in milliseconds since the epoch.

Filters

url ( array of events.UrlFilter )
Conditions that the URL being navigated to must satisfy. The 'schemes' and 'ports' fields of UrlFilter are ignored for this event.

onCompleted

chrome.webNavigation.onCompleted.addListener(function(object details) {...});

Fired when a document, including the resources it refers to, is completely loaded and initialized.

Listener Parameters

details ( object )
tabId ( integer )
The ID of the tab in which the navigation occurs.
url ( string )
processId ( integer )
The ID of the process runs the renderer for this tab.
frameId ( integer )
0 indicates the navigation happens in the tab content window; a positive value indicates navigation in a subframe. Frame IDs are unique within a tab.
timeStamp ( double )
The time when the document finished loading, in milliseconds since the epoch.

Filters

url ( array of events.UrlFilter )
Conditions that the URL being navigated to must satisfy. The 'schemes' and 'ports' fields of UrlFilter are ignored for this event.

onErrorOccurred

chrome.webNavigation.onErrorOccurred.addListener(function(object details) {...});

Fired when an error occurs and the navigation is aborted. This can happen if either a network error occurred, or the user aborted the navigation.

Listener Parameters

details ( object )
tabId ( integer )
The ID of the tab in which the navigation occurs.
url ( string )
processId ( integer )
The ID of the process runs the renderer for this tab.
frameId ( integer )
0 indicates the navigation happens in the tab content window; a positive value indicates navigation in a subframe. Frame IDs are unique within a tab.
error ( string )
The error description.
timeStamp ( double )
The time when the error occurred, in milliseconds since the epoch.

Filters

url ( array of events.UrlFilter )
Conditions that the URL being navigated to must satisfy. The 'schemes' and 'ports' fields of UrlFilter are ignored for this event.

onCreatedNavigationTarget

chrome.webNavigation.onCreatedNavigationTarget.addListener(function(object details) {...});

Fired when a new window, or a new tab in an existing window, is created to host a navigation.

Listener Parameters

details ( object )
sourceTabId ( integer )
The ID of the tab in which the navigation is triggered.
sourceProcessId ( integer )
The ID of the process runs the renderer for the source tab.
sourceFrameId ( integer )
The ID of the frame with sourceTabId in which the navigation is triggered. 0 indicates the main frame.
url ( string )
The URL to be opened in the new window.
tabId ( integer )
The ID of the tab in which the url is opened
timeStamp ( double )
The time when the browser was about to create a new view, in milliseconds since the epoch.

Filters

url ( array of events.UrlFilter )
Conditions that the URL being navigated to must satisfy. The 'schemes' and 'ports' fields of UrlFilter are ignored for this event.

onReferenceFragmentUpdated

chrome.webNavigation.onReferenceFragmentUpdated.addListener(function(object details) {...});

Fired when the reference fragment of a frame was updated. All future events for that frame will use the updated URL.

Listener Parameters

details ( object )
tabId ( integer )
The ID of the tab in which the navigation occurs.
url ( string )
processId ( integer )
The ID of the process runs the renderer for this tab.
frameId ( integer )
0 indicates the navigation happens in the tab content window; a positive value indicates navigation in a subframe. Frame IDs are unique within a tab.
transitionType ( enumerated string ["link", "typed", "auto_bookmark", "auto_subframe", "manual_subframe", "generated", "start_page", "form_submit", "reload", "keyword", "keyword_generated"] )
Cause of the navigation. The same transition types as defined in the history API are used.
transitionQualifiers ( array of enumerated string ["client_redirect", "server_redirect", "forward_back", "from_address_bar"] )
A list of transition qualifiers.
timeStamp ( double )
The time when the navigation was committed, in milliseconds since the epoch.

Filters

url ( array of events.UrlFilter )
Conditions that the URL being navigated to must satisfy. The 'schemes' and 'ports' fields of UrlFilter are ignored for this event.

onTabReplaced

chrome.webNavigation.onTabReplaced.addListener(function(object details) {...});

Fired when the contents of the tab is replaced by a different (usually previously pre-rendered) tab.

Listener Parameters

details ( object )
replacedTabId ( integer )
The ID of the tab that was replaced.
tabId ( integer )
The ID of the tab that replaced the old tab.
timeStamp ( double )
The time when the replacement happened, in milliseconds since the epoch.

onHistoryStateUpdated

chrome.webNavigation.onHistoryStateUpdated.addListener(function(object details) {...});

Fired when the frame's history was updated to a new URL. All future events for that frame will use the updated URL.

Listener Parameters

details ( object )
tabId ( integer )
The ID of the tab in which the navigation occurs.
url ( string )
processId ( integer )
The ID of the process runs the renderer for this tab.
frameId ( integer )
0 indicates the navigation happens in the tab content window; a positive value indicates navigation in a subframe. Frame IDs are unique within a tab.
transitionType ( enumerated string ["link", "typed", "auto_bookmark", "auto_subframe", "manual_subframe", "generated", "start_page", "form_submit", "reload", "keyword", "keyword_generated"] )
Cause of the navigation. The same transition types as defined in the history API are used.
transitionQualifiers ( array of enumerated string ["client_redirect", "server_redirect", "forward_back", "from_address_bar"] )
A list of transition qualifiers.
timeStamp ( double )
The time when the navigation was committed, in milliseconds since the epoch.

Filters

url ( array of events.UrlFilter )
Conditions that the URL being navigated to must satisfy. The 'schemes' and 'ports' fields of UrlFilter are ignored for this event.

Sample Extensions that use chrome.webNavigation

  • WebNavigation Tech Demo – Demonstration of the WebNavigation extension API.
  • Google Mail Checker – Displays the number of unread messages in your Google Mail inbox. You can also click the button to open your inbox.