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:

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.

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

回答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.

来源：https://stackoverflow.com/questions/42132733/how-to-trigger-an-event-only-when-the-user-changes-the-url