Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building testable chrome extensions

1,522 views

Published on

Chrome Extensions are fun to build and very powerful, thanks to the expansive API Google provides. This talk will explore techniques for structuring and testing your extension projects, using tools such as Grunt, Browserify and Venus.js. A quick refresher of major extension development concepts will be also be reviewed.

Published in: Software
  • Be the first to comment

Building testable chrome extensions

  1. 1. Building Testable! Chrome Extensions! ! ! ! ! ! ! ! Steven Foote! Seth McLaughlin! 08.18.14
  2. 2. http://amzn.to/XvgLq4
  3. 3. Chrome Extensions are SWEET! ● Extend the world's most popular browser with new features.! ● Mini applications that run in Chrome - Chrome is like an OS
  4. 4. Evernote
  5. 5. Tracker
  6. 6. Chrome Extensions are fun to build HTML / JS / CSS Awesome APIs Evergreen Browser
  7. 7. Chrome API Basics ● Content Scripts! ● Background Scripts! ● Permissions
  8. 8. Chrome API Basics Page Actions! ! ! ! ! Browser Actions
  9. 9. Chrome API Basics Context Menus ! Omnibox
  10. 10. Content Script Background Page (1 instance) Content ScriptContent Script (1:1 with tabs) chrome.runtime.sendMessage() Local Storage (specific to extension) save and load data
  11. 11. Introducing WebberNote
  12. 12. DEMO! https://github.com/sethmcl/webberNote
  13. 13. Tips for organizing and testing code ● Use commonJS modules (browserify)! ● Use grunt to make building easy! ● Mock chrome.* APIs with chrome-mock! ● Test code in browser with Venus.js & Mocha
  14. 14. chrome.runtime.sendMessage() e window.localStorage contentScript.js background.js Page StoreClient dom chrome.tabs.query() Store MessageRouter ContextMenu MessageRouter
  15. 15. WebberNote directory structure src ├── _locales ├── images ├── lib ├── manifest.json ├── options.html ├── popup.html ├── scripts │ ├── background.js │ ├── contentScript.js │ ├── options.js │ └── popup.js └── styles
  16. 16. Introducing Chrome-Mock npm install chrome-mock ! Generated from chromium *.json files! https://github.com/sethmcl/chrome-mock
  17. 17. DEMO!! ! with code this time! https://github.com/sethmcl/webberNote
  18. 18. Resources Chrome API Docs! https://developer.chrome.com/extensions/api_index ! Chrome API mocks! https://github.com/sethmcl/chrome-mock ! WebberNote source code! https://github.com/sethmcl/webbernote Browserify! http://browserify.org/ ! Venus.js! http://www.venusjs.org/ ! Grunt! http://gruntjs.com/ Steven Foote! https://www.linkedin.com/in/stevenmfoote ! Seth McLaughlin! https://www.linkedin.com/in/sethmclaughlin

×