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

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

3. what is a chrome extension ?

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

5. 3 kinds
https://developer.chrome.com/extensions/overview
browser action - page action - popup

6. chrome extension layers
http://www.penguinhustle.com/blog/how-to-write-your-first-chrome-extension/

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

9. popup scripts
- active only when popup is
open
- html and js
- chrome.* APIs access

10. the chrome manifest
https://developer.chrome.com/extensions/manifest
app content
app meta
app permissions & resources

11. the (BB) chrome manifest
https://developer.chrome.com/extensions/manifest
{
"name": "BugBuster CSS Selector",
"version": "0.2.0",
"manifest_version": 2,
"description": "__MSG_appDescription__",
"icons": {
"16": "images/icon-16.png",
"128": "images/icon-128.png"
},
"default_locale": "en",
"background": {
"page": "messager.html"
},
"browser_action": {
"default_icon": {
"19": "images/icon-19.png",
"38": "images/icon-38.png"
},
"default_title": "BugBuster - Web Application Testing Made Easy",
"default_popup": "recorder.html"
},
"externally_connectable": {
"matches": [
"*://*.bugbuster.com/*",
"*://bugbuster.dev/*"
]
},
"content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
"web_accessible_resources": [
"http://fonts.googleapis.com/",
"48.png",
"https://*.google-analytics.com/**/*"
],
"permissions": [
"http://*/*",
"https://*/*",
"contextMenus",
"storage",
"notifications",
"clipboardRead",
"clipboardWrite",
"tabs",
"<all_urls>"
],
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"exclude_matches": [
"http://localhost/*",
"http://bugbuster.dev/*",
"https://app.bugbuster.com/*"
],
"css": [
"selector.css"
],
"js": [
"selector.js"
],
"run_at": "document_end",
"all_frames": false
}
]
}

12. communication
http://www.penguinhustle.com/blog/how-to-write-your-first-chrome-extension/

13. communication : one time
requests
- sending from content script
- sending from background scripts
- receiving from both

14. communication : long-lived
connections
- opening a channel from content script
- receving on the background page

15. communication : others
- cross-extension messaging
- web pages messaging
- native messaging

16. permissions/APIs
• background
• bookmarks
• clipboardRead
• clipboardWrite
• contentSettings
• contextMenus
• cookies
• history
• idle
• management
• notifications
• pageCapture
• tabs
• topSites
• webNavigation
• webRequest
• webRequestBlocking
chrome.permissions.request(
{permissions: ['tabs'], origins: ['http://www.google.com/’]},
function(granted) {}
);

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

19. getting started
scaffold project
- https://github.com/yeoman/generator-chrome-extension
- angular, bootstrap, jquery
- background, popup, content script
- grunt build, bower
- mocha, chai, sinon.js tests
Yeoman
- https://github.com/flrent/chrome-extension-angular-base

20. personal feedback
- mindset change (scopes, APIs)
- (channel) messaging is hard
- updates/installations keep old context
- very powerful but be careful

21. Thank you
Florent Lamoureux
working at BugBuster
@flrent
https://github.com/flrent/chrome-extension-angular-base