How to detect a route change on foreign Ember application?

273
November 26, 2016, at 9:37 PM

I'm trying to make a Chrome extension for Zendesk and it appears that their application is built with Ember. I used $(document).ready, but that is only really firing if I refresh the pages... otherwise it doesn't fire at all. How can I listen for page changes in Zendesk for my Chrome extension?

I looked around and only found answers that would help only if it was my own Ember app. Also, it isn't a hashchange.

Answer 1

It sounds like you want to implement a listener for the beforeunload event: https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload

But rather than setting a confirmation message, implement whatever it is that you want to do when the navigation changes. If you add a confirmation message it will popup a dialog that will ask you if you really want to navigate away, but it doesn't sound like thats what you want here. It sounds like you just want to monitor that a navigation event has occurred, but I could be mistaken.

Answer 2

Here are a few ideas:

  • You could maybe hijack the history object methods.
  • Or if you have access to privileged chrome APIs, you could try using network.onNavigated. I don't know if it is invoked on history pushState though, better check.

You may also have a look at Ember inspector code, it provides a lot of insights on currently running ember app, including which route is currently active so you may find the tools to do what you need in there.

I think it works by injecting some code into the page, and then communicating with it through window messages. The injected code then does the requested analysis and sends back the result.

READ ALSO
Bootstrap dropdown menu hiding behind the div

Bootstrap dropdown menu hiding behind the div

Fiddle to demonstrate the HTML content: https://jsfiddlenet/ASel1984/dd9gpnot/4/

242
Loading the results of an AJAX json response into a select box using jquery

Loading the results of an AJAX json response into a select box using jquery

Can anyone please assist to load the results of an AJAX json response into a select box using jquery? I have my code below

143
Javascript optimisation for a Greasemonkey script?

Javascript optimisation for a Greasemonkey script?

I am trying to change an image of a website with this JavaScript on GreaseMonkey (Mozilla Firefox):

197