Write chrome extensions based on Angular2 and Firebase

1. Create chrome extension use
Angular 2.0

2. Agenda
• Chrome extension manifest
• Extension permission
• Extension background and content scripts
• Angular 2.0 CLI
• Angular 2.0 features
• Firebase as BaaS
• Extension popup

3. manifest.json
• Extension information
• Permission
• Background scripts
• Content scripts

4. Extension
Permissions
• Storage
• Tabs
• Context Menu
• Identity
• Bookmarks
• Cookies
• Native Messaging

5. Background
and content
scripts
Background - single long-running script to
manage some task or state.
Content - JavaScript files that run in the context
of web pages. By using the standard DOM

6. Angular 2.0 CLI
• ng new
• ng generate component/pipe...
• ng build
• ng serve
• ng test
• ng e2e

7. Angular 2.0
features
1. Adjust ES standarts
2. Dependency injection
3. Bindings
4. *ngIf and *ngFor
5. Lifecycle hooks

8. Firebase as BaaS
1. Authentication
2. DataBase
3. Storage
4. Push Notification

9. Demo time

10. Database Schema

11. App Schema

12. Adding word process

13. Summary
We reviewed how to create chrome extension with angular 2.0, ask
for permissions and use Firebase for fast prototype new ideas.

14. Questions and help links
https://github.com/ohalay/EnglishTutorChromeExtansion
https://developer.chrome.com/extensions
https://v2.angular.io/docs/ts/latest
https://firebase.google.com/docs
olehhalay@ukr.net