Rough guide to building Chrome & Firefox extensions with Ember.js Presented at Ember Night Toronto, November 2015 by Alex Blom of Isle of Code.

1. Browser Extensions
with Ember
@alexblom
alex@isleofcode.com

2. Isle of Code
• Toronto based development;
• Focused on Ember for:
• Prototyping;
• Hybrid Apps /w Cordova; and
• A lot of beacon work.

3. Extensions are easy
• Main concerns:
• Build Ember app
• Set root element;
• A bit of work to deal with AJAX requests in
Firefox;
• Write some JS to start & stop the Ember app;

5. App Structure
• /ember
• /extension
• /output
• /chrome
• /firefox

8. 1 import Ember from 'ember';
2 import Resolver from 'ember/resolver';
3 import loadInitializers from 'ember/load-initializers';
4 import config from './config/environment';
5
6 Ember.MODEL_FACTORY_INJECTIONS = true;
7
8 var App = Ember.Application.extend({
9 modulePrefix: config.modulePrefix,
10 podModulePrefix: config.podModulePrefix,
11 Resolver: Resolver,
12 rootElement: '#morsebar-content'
13 });
14
15 loadInitializers(App, config.modulePrefix);
16
17 export default App;

9. • Need to import your css again;
• Namespace your css;
• Probably want webRequest;
• In general, best to have light JS that will inject
your Ember app on user prompt;

10. locationType: none;

11. storeConfigInMeta: false;

12. Firefox: self is
reserved

13. Firefox: runs in strict
mode

14. Firefox: Can not run
AJAX requests

18. Manage Reflows

19. What causes Reflow?
• Resizing the browser window;
• using JavaScript methods involving computed
styles;
• adding or removing elements from the DOM; and
• changing an element's classes.
• https://developers.google.com/speed/articles/reflo
w

20. Use CSS Transforms

21. visibility:hidden

22. Browser Extensions
with Ember
@alexblom
alex@isleofcode.com