Building testable chrome extensions
-
Upload
seth-mclaughlin -
Category
Software
-
view
447 -
download
3
description
Transcript of Building testable chrome extensions
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