Build your own Chrome Extension with AngularJS

5,148 views
4,729 views

Published on

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

Published in: Technology

Build your own Chrome Extension with AngularJS

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

×