building browser extensions with ember

Browser Extensions

with Ember@alexblom

alex@isleofcode.com

Isle of Code

• Toronto based development;

• Focused on Ember for:

• Prototyping;

• Hybrid Apps /w Cordova; and

• A lot of beacon work.

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;

App Structure

• /ember

• /extension

• /output

• /chrome

• /firefox

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;

• 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;

locationType: none;

storeConfigInMeta: false;

Firefox: self is

reserved

Firefox: runs in strict

mode

Firefox: Can not run

AJAX requests

Manage Reflows

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

Use CSS Transforms

visibility:hidden

Browser Extensions

with Ember@alexblom

alex@isleofcode.com