Are there any hooks that I can use to enter patterns and functions into an Ember app from the Chrome extension?

Question

I am part of an open source team that assembled very quickly. We all use the budgeting app, which has always been a desktop app. They just released a complete rewrite from scratch and are now online using the Ember app.

Of course, as with any rewriting, a number of functions did not make a reduction for release, and experienced users were very upset. Personally, I enjoyed some features that weren't there, but instead of moaning about it, I decided to just make a Chrome extension that adds the features I want.

This turned out to be very popular, but basically what we do is tiny surface updates and CSS hacks for now. When we want to introduce DOM elements or similar, we rely on fragile hacks such as this:

(function checkCreditBalances() { if ( typeof Em !== 'undefined' && typeof Ember !== 'undefined' && typeof $ !== 'undefined' && $('.is-debt-payment-category.is-master-category').length ) { // Do stuff here with thing } } setTimeout(checkCreditBalances, 300); )(); 

When I read the Ember documentation, it always talks about what to do when you create the actual application. I am not so, so the debug flags when creating the application do not help me. I do not build templates, etc. Etc. Inspector Ember does not recognize that this is an ember application because it is already built.

I need to be able to connect deeper (but safely) into the application to add additional features. So:

• Are there any internal hooks that we can grab to tell us when the component is displayed, what it is, and give us the opportunity to introduce DOM elements into it, if it is the one we want? Or replace the template used to create the instance? Or add event handlers?

• Is there a clean way to tell when the application is loaded and we can paste our logic on top?

• Is there a way to replace a specific component for the entire application? This particular application has both Em and Ember defined in the window, and I'm not sure why, since both seem to contain very similar objects.

• Is there a good way to bind click handlers (or event handlers in general) to components?

• How can I interact with Ember Data from outside Ember? Is it the same or should I keep something in mind? I know that I could replicate Ajax calls, but I assume that Ember Data does some caching and other kindness and would like to take advantage of the calls that the application already makes at its end, if possible.

Basically, can someone give me any instructions on how to inject stuff into an Ember app from the Chrome extension?

Thanks!