6

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!

doublefelix
  • 952
  • 1
  • 9
  • 22

1 Answers1

7

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.

Huey
  • 5,110
  • 6
  • 32
  • 44
  • I tried this, but the extension never even checks the "new url". Maybe this means that in some way, everything is part of the same page, even though the page seems to completely change. So with the suggestion, it will only check the first visit, and then never re-check. – doublefelix Jul 04 '15 at 04:37
  • Not sure why, but it's not even detecting the hash changes except when a new page is loaded. I used a simple if ("onhashchange" in window) {console.log("found a hash change");}. I am new to javascript and webdev, is there something obvious I could be missing? – doublefelix Jul 04 '15 at 05:13
  • 1
    Got it!! window.onhashchange = function () {}; worked to find the changes. Thank you so much! – doublefelix Jul 04 '15 at 05:22
  • This will, however, overwrite the current "onhashchange". But I don't know what that does, so maybe this isn't important. You could do `oldFunc = window.onhashchange`, and then call `oldFunc` as part of your new definition to fix that. – Teepeemm Jul 04 '15 at 14:10
  • @Teepeemm so if the page's own javascript uses that function, I will be overwriting it, rather than adding on to it? I thought that contentscripts run in entirely different spaces than the page's js... but if that is true, is there a fast way to check if the page's JS already uses this function? – doublefelix Jul 05 '15 at 18:57
  • Isolated worlds will indeed protect you from overwriting the page's use of onhashchange. The question is if there is a default function definition that you're overwriting. I don't think there is, but I don't know javascript well enough to say so for sure. – Teepeemm Jul 06 '15 at 00:32