This document provides an introduction and overview of how to build Chrome extensions and apps. It covers what Chrome extensions are, the different types (browser actions, page actions, popups), how to build the extension structure and logic using manifest files, permissions, and communication between parts. It also recommends using Yeoman generators and build tools like Grunt to quickly set up and develop Chrome extensions and apps.

1. Introduction to Chrome
extension development
cage@mitac.com.tw

2. Agenda
1. What is a Chrome extension/app?
2. Building a Chrome extension
3. How to build Chrome extension fast

3. What is a Chrome extension/app?

4. Extension - Clip to Evernote
Browse action

5. Extension - OmniDrive
page action

6. Extension - Pushbullet
popup

7. App - Sunrise Calendar

8. Build a Chrome extension

9. What can you do with a Chrome
extension?
use storage (local/sync)
build a dev tool
browser popup
context menu
capture tab screen
send desktop notification
get/modify tabs content

10. 3 Kinds
https://developer.chrome.com/extensions/overview
Browser action - page action - popup

11. Chrome extension Layers
http://www.penguinhustle.com/blog/how-to-write-your-first-chrome-extension/

12. An extension logic
http://stackoverflow.com/questions/20017268/google-chrome-extension-api-diagram

13. content scripts
● run in tabs
● DOM access
● isolate scope
● limited chrome.* APIs
access
● access to resources via
web_accessible_resou
rces property

14. background pages/events pages
● run in background
● html and js
● full chrome.* APIs access

15. popup scripts
● active only when popup
is opened
● html and js
● Chrome.* APIs access

16. Chrome extension manifest
app permissions & resources
app content
app meta
https://developer.chrome.com/extensions/manifest

17. Chrome manifest
https://developer.chrome.com/extensions/manifest
{
"name": "__MSG_appName__",
"version": "0.0.9",
"manifest_version": 2,
"description": "__MSG_appDescription__",
"icons": {
"16": "images/icon-16.png",
"128": "images/icon-128.png"
},
"default_locale": "en",
"background": {
"scripts": [
"scripts/chromereload.js",
"scripts/utility.js",
"scripts/background.js"
]
},
"browser_action":` {
"default_icon": {
"19": "images/icon-19.png",
"38": "images/icon-38.png"
},
"default_title": "Recally Extension",
"default_popup": "popup.html"
},
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"options_page": "options.html",
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"css": [
"styles/contentscript.css"
],
"js": [
"bower_components/rangy/rangy-core.js",
"bower_components/rangy/rangy-serializer.js",
"scripts/utility.js",
"scripts/contentscript.js"
],
"run_at": "document_end",
"all_frames": false
}
],
"permissions": [
"tabs",
"activeTab",
"contextMenus",
"cookies",
"notifications",
"https://*/*",
"http://*/*"
],
"web_accessible_resources": [
"styles/*",
"scripts/*"
]
}

18. communication
http://www.penguinhustle.com/blog/how-to-write-your-first-chrome-extension/

19. communication: one-time requests
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
console.log(response.farewell);
});
});
chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
console.log(response.farewell);
});
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
});
- receiving from both
- sending from content script
- sending from background script

20. communication: long-lived connectsion
var port = chrome.runtime.connect({name: "knockknock"});
port.postMessage({joke: "Knock knock"});
port.onMessage.addListener(function(msg) {
if (msg.question == "Who's there?")
port.postMessage({answer: "Madame"});
else if (msg.question == "Madame who?")
port.postMessage({answer: "Madame... Bovary"});
});
- opening a channel from a content script
chrome.runtime.onConnect.addListener(function(port) {
console.assert(port.name == "knockknock");
port.onMessage.addListener(function(msg) {
if (msg.joke == "Knock knock")
port.postMessage({question: "Who's there?"});
else if (msg.answer == "Madame")
port.postMessage({question: "Madame who?"});
else if (msg.answer == "Madame... Bovary")
port.postMessage({question: "I don't get it."});
});
});
- receiving on the background page

21. communication: others
sending messages from web pages
native messaging
cross-extension messaging

22. permissions/APIs
● host permissions
● background
● bookmarks
● clipboardRead
● clipboardWrite
● contentSettings
● contextMenus
● cookies
● debugger
● history
● idle
● management
● notifications
● pageCapture
● tabs
● topSites
● webNavigation
● webRequest
● webRequestBlocking
{
"name": "My extension",
...
"optional_permissions": [ "tabs", "http://www.google.com/" ],
...
}
http://www.penguinhustle.com/blog/how-to-write-your-first-chrome-extension/

23. How to build chrome
extension fast

24. Yeoman
http://yeoman.io
yo scaffolds out a new
application, writing
your Grunt
configuration and
pulling in relevant
Grunt tasks and Bower
dependencies that you
might need for your
build.
The Build System is used
to build, preview and test
your project. Grunt and
Gulp are two popular
options.
The Package Manager is
used for dependency
management, so that you no
longer have to manually
download and manage your
scripts. Bower and npm are
two popular options.
THE WEB'S
SCAFFOLDING TOOL
FOR MODERN
WEBAPPS

25. //https://github.com/yeoman/generator-chrome-extension
yeoman - generator chrome extension

26. getting started - Chrome extension
$ npm install -g yo
$ npm install -g generator-chrome-extension
$ yo chrome-extension
$ grunt build
$ grunt debug

27. yeoman - chromeapp
https://github.com/yeoman/generator-chromeapp

28. getting started - Chrome app
$ npm install -g yo
$ npm install -g generator-chromeapp
$ yo chromeapp
$ grunt build
$ grunt debug
https://github.com/GoogleChrome/chrome-app-samples