Thinking about how to listen for URL changes in a single page application

The weekend developed a Chrome extension that added custom notes to repo in GitHub.

The reason I developed this extension is that I have too many projects on GitHub (up to 671), and some projects come back a few days later to forget why star, and some of the wheels to find the time to find out what to forget, so many to find a real waste of time. So I've been thinking about having a tool that allows you to customize the notes for a project in GitHub, and then search based on the notes , so that's the extension.

To install the experience, click on GitHub Remarks to install, the source of the Github-remarks (no reference value).

Of course this article is not about the expansion of the production process, but in the process encountered a problem.

With my GitHub account example, on the Https://github.com/hanzichi?tab=stars page, I need to insert some DOM to make the page look like this:

At first thought, it seems very simple to insert content.js on this page, add configuration in Manifest.json:

{  "matches"  :  [  "*://github.com/.*tabs=stars"  ]     "JS"  :  [  "content-scripts/repodetail.js"  ]    "CSS"  :  []     "Run_at"  :   "Document_end"  }   

But the problem comes, directly open the page https://github.com/hanzichi?tab=stars and no problem, but if from Https://github.com/hanzichi click Jump to https:// Github.com/hanzichi?tab=stars, because GitHub uses pjax technology, content.js should actually be loaded on the page Https://github.com/hanzichi, but that page has no reference to the DOM Structure (good to insert the DOM we need). So the question seems to be, on the Pjax page, how can I monitor the change of the page URL ?

First, a very simple solution is to get a timer loop monitoring, but too expensive, pass

Because the page is Pjax jump, so hashchange such events are not used naturally, and Pushstate event is to monitor the browser forward and backward, so it does not match the scene

There is a good idea to rewrite the Pushstate event (code from how to detect when HTML5 's History.pushstate () is called?):

(function(history){    varPushstate=  History.pushstate;     History.pushstate = function(state){        if(typeof  History.onpushstate == "function"){             History.onpushstate({ State:State});        }        //... whatever else you want        //Maybe call onhashchange e.handler        return pushstate.Apply(History,Arguments;    }})(window. History);

But because the chrome extension and the source code does not share the scope, so the rewritten History.pushstate method in the original page actually did not change, so there is no egg

Then start with the Chrome API and discover that a Chrome API can detect the tab of the current URL change (see Chrome extension webnavigation listener for hash changes):

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo,{  if (changeInfo.url{      console.log('Tab %d got new URL: %s', tabId,changeInfo.url)  }})

This code is in Background.js, and then once the URL changes are detected, background.js and content.js communication can be informed.

However, there are also problems where the URL change can actually be monitored, but the chrome extension needs to function after the appropriate DOM is ready (to insert a new DOM on top of the DOM), and you can't detect when the DOM is in place, so adding a timer delay here is Feasible, time needs to be estimated by oneself

This method is not very elegant, finally thought, the pjax process, the DOM certainly has the change, therefore listens to the DOM change is feasible? The answer is yes:

Mutationobserver= window.Mutationobserver || window.Webkitmutationobserver;varObserver= New Mutationobserver(function(Mutations,Observer{   LetUrl=  Location.href    LetP= /.*\/\/github.com\/.*\?Tab=stars.*/  if(P.Test(URL)){    Initstarspage()}})Observer.Observe(Document.getElementById(' Js-pjax-container '), {  childlist: true})$(document). Ready(()= {   LetUrl=  Location.href    LetP= /.*\/\/github.com\/.*\?Tab=stars.*/  if(P.Test(URL)){    Initstarspage()}})

In the end, instead of listening to the URL, it listens for DOM changes.

Finally, the accident in so find this answer seems to correspond to my question, probably looked under, in addition to my example of a few programs, in fact, I missed the simplest of a program, since the page uses Pjax, then directly listen to the Pjax:complete event can:

$(document).on('pjax:complete',function{  let=location.href   let=/.*\/\/github.com\/.*\?tab=stars.*/  if (p.test{    initStarsPage()  }})

It suddenly makes people feel that sometimes the truth is always so simple.

Thinking about how to listen for URL changes in a single page application