mercredi 6 janvier 2016

Are there any hooks I can use to inject templates and features cleanly into an Ember app from a Chrome extension?

I'm a part of an open source team that has come together really quickly. We all use an application for budgeting which used to always be a desktop application. They just released a complete rewrite from scratch, and are now on the web with an Ember app.

Of course, as with any rewrite, a number of features didn't make the cut for release, and power users were very upset. Personally I enjoyed certain features that weren't there, but rather than moan about it I decided to just make a Chrome Extension that adds the features I want.

This has proved to be very popular, but mostly what we're doing is tiny surface updates and CSS hacks at the moment. When we want to inject DOM elements or similar, we're relying on fragile hacks like 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 Ember documentation it always talks about what to do when you're building the actual application. I'm not, so debug flags on the creation of the app don't help me. I'm not building the templates, etc etc. Ember inspector doesn't recognise that it's an ember app because it's already a production build.

I need to be able to hook deeper (but safely) into the application to add more advanced features. So:

  • Are there any internal hooks we can grab to tell us when a component is rendered, what it is, and give us an opportunity to inject DOM elements into it if it's the one we want? Or replace the template used on instantiation? Or add event handlers?

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

  • Is there a way to replace a certain component for the whole application? This particular app seems to have both Em and Ember defined on window, and I'm not sure why, as both seem to hold very similar objects.

  • Is there a good way to attach 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 anything in mind? I know I could replicate with Ajax calls but I'm assuming Ember Data is doing some caching and other goodness and would like to take advantage of the calls the app is already doing to its back end if possible.

Basically, can anyone give me any pointers into how to inject stuff into an Ember app from a Chrome extension?

Thanks!




Aucun commentaire:

Enregistrer un commentaire