Building Browser Extensions with Ember
-
Upload
alex-blom -
Category
Technology
-
view
490 -
download
2
Transcript of Building Browser Extensions with Ember
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