chrome.webNavigation
Description: |
Use the chrome.webNavigation API to receive notifications about the status of navigation requests in-flight.
|
Availability: |
Stable since Chrome 16.
|
Permissions: |
"webNavigation"
|
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). |
Summary
Methods | |
---|---|
getFrame −
chrome.webNavigation.getFrame(object details, function callback)
| |
getAllFrames −
chrome.webNavigation.getAllFrames(object details, function callback)
| |
Events | |
onBeforeNavigate | |
onCommitted | |
onDOMContentLoaded | |
onCompleted | |
onErrorOccurred | |
onCreatedNavigationTarget | |
onReferenceFragmentUpdated | |
onTabReplaced | |
onHistoryStateUpdated |
Methods
getFrame
chrome.webNavigation.getFrame(object details, function callback)
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 | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
object | details |
Information about the frame to retrieve information about.
|
||||||||||||
function | callback |
The callback parameter should be a function that looks like this: function(object details) {...};
|
getAllFrames
chrome.webNavigation.getAllFrames(object details, function callback)
Retrieves information about all frames of a given tab.
Parameters | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
object | details |
Information about the tab to retrieve all frames from.
|
||||||||||||||||||
function | callback |
The callback parameter should be a function that looks like this: function(array of object details) {...};
|
Events
onBeforeNavigate
Fired when a navigation is about to occur.
Filters
addListener
chrome.webNavigation.onBeforeNavigate.addListener(function callback)
Parameters | |||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
function | callback |
The callback parameter should be a function that looks like this: function(object details) {...};
|
onCommitted
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.
Filters
addListener
chrome.webNavigation.onCommitted.addListener(function callback)
Parameters | ||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
function | callback |
The callback parameter should be a function that looks like this: function(object details) {...};
|
onDOMContentLoaded
Fired when the page's DOM is fully constructed, but the referenced resources may not finish loading.
Filters
addListener
chrome.webNavigation.onDOMContentLoaded.addListener(function callback)
Parameters | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
function | callback |
The callback parameter should be a function that looks like this: function(object details) {...};
|
onCompleted
Fired when a document, including the resources it refers to, is completely loaded and initialized.
Filters
addListener
chrome.webNavigation.onCompleted.addListener(function callback)
Parameters | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
function | callback |
The callback parameter should be a function that looks like this: function(object details) {...};
|
onErrorOccurred
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.
Filters
addListener
chrome.webNavigation.onErrorOccurred.addListener(function callback)
Parameters | |||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
function | callback |
The callback parameter should be a function that looks like this: function(object details) {...};
|
onCreatedNavigationTarget
Fired when a new window, or a new tab in an existing window, is created to host a navigation.
Filters
addListener
chrome.webNavigation.onCreatedNavigationTarget.addListener(function callback)
Parameters | |||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
function | callback |
The callback parameter should be a function that looks like this: function(object details) {...};
|
onReferenceFragmentUpdated
Fired when the reference fragment of a frame was updated. All future events for that frame will use the updated URL.
Filters
addListener
chrome.webNavigation.onReferenceFragmentUpdated.addListener(function callback)
Parameters | ||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
function | callback |
The callback parameter should be a function that looks like this: function(object details) {...};
|
onTabReplaced
Fired when the contents of the tab is replaced by a different (usually previously pre-rendered) tab.
addListener
chrome.webNavigation.onTabReplaced.addListener(function callback)
Parameters | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
function | callback |
The callback parameter should be a function that looks like this: function(object details) {...};
|
onHistoryStateUpdated
Fired when the frame's history was updated to a new URL. All future events for that frame will use the updated URL.
Filters
addListener
chrome.webNavigation.onHistoryStateUpdated.addListener(function callback)
Parameters | ||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
function | callback |
The callback parameter should be a function that looks like this: function(object details) {...};
|