What are Chrome Extensions?
What can you do?
Explanation of Content scripts, Background pages and Popup
Use Angular with CSP mode
Build and distribute your app
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Build your own Chrome Extension with AngularJS
1. build a chrome extension with
angular.js
JSRomandie, May 2014
@flrent
2. summary
1) what is a chrome extension ?
2) the chrome platform (manifest,
APIs)
3) angular!
4) distribution (internal/store)
5) Get started and feedback
4. what can you do with a chrome
extension ?
get/modify tabs content (!)
browser popup
leverage web products build a dev tool
capture tab screen
use storage (local/sync)
send desktop
notifications
take control of the browser(!)
context menus
7. content scripts
- run in tabs
- DOM access
- isolated scope
- limited chrome.* APIs access
- access to resources via
‘web_accessible_resources’ property
8. background pages / events
pages
- runs in background
- html and js
- full chrome.* APIs access
17. angular.js
state manager
Content-Security-Policy compliant framework
- no inline JS
- no inline event bindings
- no eval
- restore state
- services
https://developer.mozilla.org/en-US/docs/Web/Security/CSP/Introducing_Content_Security_Policy
18. distribution
manual distribution
Chrome Web Store- 5$ one time fee
- stats
- updates
- soon to be required for Chrome
Windows
- need active developer mode
- CRX file
- unpacked
http://blog.chromium.org/2013/11/protecting-windows-users-from-malicious.html
20. personal feedback
- mindset change (scopes, APIs)
- (channel) messaging is hard
- updates/installations keep old context
- very powerful but be careful