build your own chrome extension with angularjs
DESCRIPTION
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 appTRANSCRIPT
build a chrome extension with angular.js
JSRomandie, May 2014@flrent
summary
1) what is a chrome extension ?
2) the chrome platform (manifest, APIs)
3) angular!4) distribution (internal/store)5) Get started and feedback
what is a chrome extension ?
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
3 kinds
https://developer.chrome.com/extensions/overview
browser action - page action - popup
chrome extension layers
http://www.penguinhustle.com/blog/how-to-write-your-first-chrome-extension/
content scripts- run in tabs- DOM access- isolated scope - limited chrome.* APIs access- access to resources via
‘web_accessible_resources’ property
background pages / events pages
- runs in background- html and js- full chrome.* APIs access
popup scripts
- active only when popup is open
- html and js- chrome.* APIs access
the chrome manifest
https://developer.chrome.com/extensions/manifest
app content
app meta
app permissions & resources
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 } ]}
communication
http://www.penguinhustle.com/blog/how-to-write-your-first-chrome-extension/
communication : one time requests- sending from content script
- sending from background scripts
- receiving from both
communication : long-lived connections- opening a channel from content script
- receving on the background page
communication : others
- cross-extension messaging
- web pages messaging
- native messaging
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) {}
);
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
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
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
personal feedback
- mindset change (scopes, APIs)
- (channel) messaging is hard
- updates/installations keep old context
- very powerful but be careful
Thank you
Florent Lamoureuxworking at BugBuster
@flrent
https://github.com/flrent/chrome-extension-angular-base