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.

1. Building Testable!
Chrome Extensions!
!
!
!
!
!
!
!
Steven Foote!
Seth McLaughlin!
08.18.14

4. http://amzn.to/XvgLq4

5. 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

7. Evernote

9. Tracker

12. Chrome Extensions are fun to build
HTML / JS / CSS Awesome APIs
Evergreen Browser

13. Chrome API Basics
● Content Scripts!
● Background Scripts!
● Permissions

14. Chrome API Basics
Page Actions!
!
!
!
!
Browser Actions

15. Chrome API Basics
Context Menus ! Omnibox

16. 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

17. Introducing WebberNote

18. DEMO!
https://github.com/sethmcl/webberNote

19. 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

20. chrome.runtime.sendMessage()
e
window.localStorage
contentScript.js background.js
Page
StoreClient
dom
chrome.tabs.query()
Store
MessageRouter
ContextMenu
MessageRouter

21. WebberNote directory structure
src
├── _locales
├── images
├── lib
├── manifest.json
├── options.html
├── popup.html
├── scripts
│ ├── background.js
│ ├── contentScript.js
│ ├── options.js
│ └── popup.js
└── styles

22. Introducing Chrome-Mock
npm install chrome-mock
!
Generated from chromium *.json files!
https://github.com/sethmcl/chrome-mock

23. DEMO!!
!
with code this time!
https://github.com/sethmcl/webberNote

24. 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