building testable chrome extensions
DESCRIPTION
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.TRANSCRIPT
Building Testable!Chrome Extensions!
!!!!!!!
Steven Foote!Seth McLaughlin!
08.18.14
http://amzn.to/XvgLq4
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
Evernote
Tracker
Chrome Extensions are fun to build
HTML / JS / CSS Awesome APIs
Evergreen Browser
Chrome API Basics● Content Scripts!● Background Scripts!● Permissions
Chrome API BasicsPage Actions!!!!!Browser Actions
Chrome API BasicsContext Menus ! Omnibox
Content ScriptBackground Page
(1 instance)Content ScriptContent Script
(1:1 with tabs)
chrome.runtime.sendMessage()
Local Storage (specific to extension)
save and load data
Introducing WebberNote
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
chrome.runtime.sendMessage()e
window.localStorage
contentScript.js background.js
Page
StoreClient
domchrome.tabs.query()
Store
MessageRouter
ContextMenu
MessageRouter
WebberNote directory structuresrc ├── _locales ├── images ├── lib ├── manifest.json ├── options.html ├── popup.html ├── scripts │ ├── background.js │ ├── contentScript.js │ ├── options.js │ └── popup.js └── styles
Introducing Chrome-Mocknpm install chrome-mock !Generated from chromium *.json files!https://github.com/sethmcl/chrome-mock
DEMO!!!
with code this time!
https://github.com/sethmcl/webberNote
ResourcesChrome 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