Your SlideShare is downloading. ×
Build your own Chrome Extension with AngularJS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Build your own Chrome Extension with AngularJS

2,089
views

Published on

What are Chrome Extensions? …

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

0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,089
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
20
Comments
0
Likes
9
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×