Building Browser Extensions with Ember
Download as PPTX, PDF1 like769 views
The document discusses using Ember.js for developing browser extensions, highlighting its applications such as prototyping and hybrid apps. Key considerations include building the app structure, handling AJAX requests in Firefox, and managing CSS. It also explains technical aspects like managing reflows and JavaScript methods related to DOM changes.
Building Browser Extensions with Ember
- 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;
- 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