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

DEMO!

https://github.com/sethmcl/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