The document provides an overview of building Chrome extensions including the manifest file, UI components like browser actions and page actions, permissions, messaging, storage, and deployment. It covers the basic building blocks and moves into more advanced topics like content scripts, background pages, and options pages. Tips are provided throughout on building extension interfaces and interacting with web pages.

2. Sept 9, 2009
Many many extensions

3. STORE
chrome.google.com/webstore/
category/extensions
DOCS
developer.chrome.com/
extensions

4. Manipulate any (set of) pages
Provide notifications
Deep web app integration

5. Painless Payments for Droids
Tim Messerschmidt

6. Auto updating
OS independent
Step up to chrome apps

8. The manifest
Manifest.json
{
"name":
"Demo
Extension",
"version":
"0.0.1",
"manifest_version":
2
}
Chrome://extensions

9. THE BARE BASICS

11. UI BUILDING BLOCKS
BROWSER ACTIONS
{
"name":
"My
extension",
...
"browser_action":
{
"default_icon":
{
//
optional
"19":
"images/icon19.png",
//
optional
"38":
"images/icon38.png"
//
optional
},
"default_title":
"Google
Mail",
//
optional
"default_popup":
"popup.html"
//
optional
},
...
}

12. UI BUILDING BLOCKS
BROWSER ACTIONS
Icon
Badge
Tooltip
popup

13. UI BUILDING BLOCKS
PAGE ACTIONS
{
"name":
"My
extension",
...
"page_action":
{
"default_icon":
{
//
optional
"19":
"images/icon19.png",
//
optional
"38":
"images/icon38.png"
//
optional
},
"default_title":
"Google
Mail",
//
optional
"default_popup":
"popup.html"
//
optional
},
...
}

14. UI BUILDING BLOCKS
PAGE ACTIONS
Icon
Tooltip
Popup
No badge
Not shown until
needed

15. There can only be one

16. UI BUILDING BLOCKS
Desktop notifications
{
"name":
"My
extension",
"manifest_version":
2,
...
"permissions":
[
"notifications"
],
...
}

17. UI BUILDING BLOCKS
Desktop notifications

18. UI BUILDING BLOCKS
Options page
{
"name":
"My
extension",
...
"options_page":
"options.html",
...
}

19. UI BUILDING BLOCKS
Override pages
omnibox
Context menus
html

21. ADVANCED INTERACTION
xhr

22. ADVANCED INTERACTION
permissions
{
"name":
"My
extension",
...
"permissions":
[
"http://www.google.com/",
"https://www.google.com/",
"notifications"
],
...
}
Chrome.* apis
developer.chrome.com/extensions/api_index.html

23. ADVANCED INTERACTION
xhr
var
xhr
=
new
XMLHttpRequest();
xhr.open("GET",
"http://api.example.com/data.json",
true);
xhr.onreadystatechange
=
function()
{
if
(xhr.readyState
==
4)
{
//
JSON.parse
does
not
evaluate
the
attacker's
scripts.
var
resp
=
JSON.parse(xhr.responseText);
}
}
xhr.send();

24. ADVANCED INTERACTION
Content scripts

25. ADVANCED INTERACTION
Content scripts
{
"name":
"My
extension",
...
"content_scripts":
[
{
"matches":
["http://www.google.com/*"],
"css":
["mystyles.css"],
"js":
["jquery.js",
"myscript.js"]
}
],
...
}

26. ADVANCED INTERACTION
Content scripts
No interaction with JS on page
No access to most chrome.* apis

27. ADVANCED INTERACTION
CONTENT
INLINE
JS
SCRIPT
DOM
Shared dom with different scopes

28. ADVANCED INTERACTION
Content scripts
var
element
=
document.createElement("script");
element.type
=
"text/javascript";
element.text
=
"makeCall();";
document.body.appendChild(element);

29. ADVANCED INTERACTION
Background
pages

30. ADVANCED INTERACTION
Background/event pages
{
"name":
"My
extension",
...
"background":
{
"scripts":
[”eventpage.js"],
"persistent":
false
},
...
}

31. ADVANCED INTERACTION
Eventpage.js
chrome.browserAction.onClicked.addListener(function(tab)
{
//
do
something
cool
});
Chrome.* apis
developer.chrome.com/extensions/api_index.html

32. ADVANCED INTERACTION
STORAGE

33. ADVANCED INTERACTION
chrome.storage
vs
chrome.localStorage
synced
vs
not
synced
type
safe
vs
not
type
safe
async
vs
sync

35. Advanced interaction
messaging

36. ADVANCED INTERACTION
messaging
contentscript.js
================
chrome.runtime.sendMessage({greeting:
"hello"},
function(response)
{
console.log(response.farewell);
});
background.html
===============
chrome.tabs.getSelected(null,
function(tab)
{
chrome.tabs.sendMessage(tab.id,
{greeting:
"hello"},
function(response)
{
console.log(response.farewell);
});
});

37. ADVANCED INTERACTION
messaging
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"});
});
popups Content scripts
Options pages Background pages

38. Advanced interaction
deployment

39. Advanced interaction
Chrome://extensions
Don’t use “pack extension”

40. Advanced interaction
chrome.google.com/webstore/developer/
dashboard
Zip + upload
One off $5 signup fee

42. DOCS
developer.chrome.com/
extensions
Gem
rubygems.org/gems/crxmake