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

Question

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

chrome.tabs.onUpdated.addListener(eventLisenerObj.onUpdated);

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.

Marteena

Note that the techniques of the accepted answer also can work on Firefox. – Gasket

Answer 1

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

Fabiano

Thanks mate it worked perfectly.The official documentation is available here link var eventLisenerObj={}; eventLisenerObj.onCommitted=function (oEvent) { console.log("Dom Loaded "+oEvent.transitionType); }; chrome.webNavigation.onCommitted.addListener(eventLisenerObj.onCommitted); add this code on the background.js also add the permission "permissions": ["webNavigation"] in the manifest file – Marteena

@BrockAdams I fully support having questions/answers be cross-browser targets for Chrome extensions/Firefox WebExtensions (and eventually Edge, Opera, etc.). I'll update all the links (and some text) in this answer to also have an MDN target, as I've done in other answers. I'm working my way through some other things at the moment, but it should be today. – Fabiano

I am waiting for your answer – Marteena

@PranoySarkar, I'm not sure what you're waiting for from me. I'm happy to help, but I did not understand your prior comment as a question. I thought it was a statement of what you did. Your comment reminds me that planned to put some code in the question so people have an easier time seeing what the content of the events are. Hmmm… I already have code that does that for all events, which I use for testing. Let me think about how best to publish it (planned, but I've wanted to polish it a bit, add options, etc.) Back to you comment: Please restate what it is that you are waiting for from me. – Fabiano

Answer 2

You can have a look at $locationChangeSuccess.

You can get the path like this:

var loc = $location.path();

Then on change of loc you can attach your function.

Burschenschaft