Chrome Extension won't identify part of URL after a # (contentscript.js matches)

Question

I am writing an extension for a particular website (which I do not own), whose urls only vary after a /#/.

Example: starting from the url

.../#/PF/charts/patients/419d3081-5e20-4347-a852-52b2c333ce85/summary

clicking the "timeline" link leads to the next url

.../#/PF/charts/patients/419d3081-5e20-4347-a852-52b2c333ce85/timeline/encounter

...but when trying to match the url to load my content script, everything from # and beyond is not included in the matching, so it thinks these are the same page. Also, looking at the console reveals that it doesn't even see any new page loads, despite the fact that I am clicking links, the entire page's content changes, and the url after the /#/ differs.

How can I get my contentscript.js to run only where I need it if the usual tools (setting "content_scripts" within the manifest) won't work? Or, can I make the url after the /#/ visible somehow?

Any thrifty solution would be appreciated!

Answer 1

I believe the anchor bit of the url, also known as the location fragment is always ignored in the Chrome extension match pattern.

However, what you can do is match that particular domain, and use document.location.hash to identify the location anchor, and only run the function in your contentscript.js if it's the correct page. For instance:

if (("onhashchange" in window){
    window.onhashchange = function () {
        if(document.location.hash == '#/PF/charts/patients/419d3081-5e20-4347-a852-52b2c333ce85/summary'){
            //do summary stuff
        }
    }
} 

Naturally, your contentscript.js will only run once per page (since it thinks all the location fragment changes are on the same page). Hence, you'll have to watch out for hash changes using the onhashchange event and rerun the script accordingly.