Pranoy Sarkar Pranoy Sarkar - 1 year ago 66
Javascript Question

How to trigger an event only when the user changes the URL?

I am working on a Chrome extension, I want to detect when the user has typed a URL. I know about:


But, it gets called whenever the URL is changed (e.g. when the page is auto reloads, or user clicks on a link, etc.)

I desire to be able to determine that the URL was changed only by the user typing a URL.

Answer Source

You can get this information using the webNavigation.onCommitted(MDN) event. The event listener receives a property transitionType(MDN), which will be different values(MDN) based on the cause of the navigation. Which values you trigger on will depend on exactly what you are desiring. For what you describe, you will probably want 'typed'(MDN), but potentially also 'generated'(MDN), 'keyword'(MDN) and/or 'keyword_generated'(MDN).

The list of possible values is explained on Chrome's History API page (they are listed on the Chrome webNavigation page, but not explained there) (On MDN: TransitionType) (text from the Chrome History API page):

  • "link"
    The user got to this page by clicking a link on another page.
  • "typed"
    The user got this page by typing the URL in the address bar. Also used for other explicit navigation actions. See also generated(MDN), which is used for cases where the user selected a choice that didn't look at all like a URL.
  • "auto_bookmark"
    The user got to this page through a suggestion in the UI — for example, through a menu item.
  • "auto_subframe"
    Subframe navigation. This is any content that is automatically loaded in a non-top-level frame. For example, if a page consists of several frames containing ads, those ad URLs have this transition type. The user may not even realize the content in these pages is a separate frame, and so may not care about the URL (see also manual_subframe(MDN)).
  • "manual_subframe"
    For subframe navigations that are explicitly requested by the user and generate new navigation entries in the back/forward list. An explicitly requested frame is probably more important than an automatically loaded frame because the user probably cares about the fact that the requested frame was loaded.
  • "generated"
    The user got to this page by typing in the address bar and selecting an entry that did not look like a URL. For example, a match might have the URL of a Google search result page, but it might appear to the user as "Search Google for ...". These are not quite the same as typed(MDN) navigations because the user didn't type or see the destination URL. See also keyword(MDN).
  • "auto_toplevel"
    The page was specified in the command line or is the start page.
  • "form_submit"
    The user filled out values in a form and submitted it. Note that in some situations — such as when a form uses script to submit contents — submitting a form does not result in this transition type.
  • "reload"
    The user reloaded the page, either by clicking the reload button or by pressing Enter in the address bar. Session restore and Reopen closed tab use this transition type, too.
  • "keyword"
    The URL was generated from a replaceable keyword other than the default search provider. See also keyword_generated(MDN).
  • "keyword_generated"
    Corresponds to a visit generated for a keyword. See also keyword(MDN).

To differentiate some types of transitions, in addition to the transitionType values, you will also want to look at the TransitionQualifier(MDN). The possible values are (from the Chrome documentation, which are described somewhat differently on MDN):

  • "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).
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download