Developing Google Chrome Extensions. Presentation I gave at the Google DevFest 09 in Buenos Aires, Argentina

3. Developing Google
Chrome Extensions
Mihai Ionescu
Developer Advocate, Google

4. Agenda
• Introduction to Extensions
o What Extensions Are
o Why You Should Work on Extensions
o When the Extension System Ships
• How to Build Extensions
o Technical Overview
o Step-by-Step Example
• Key Takeaways
• Q&A

5. Introduction to Extensions

6. What Extensions Are
• Programs that enhance Google Chrome's functionality
• Written in HTML, CSS, and JavaScript
• Integrated using a simple API
• Developed iteratively

7. What Extensions Are
• Installed instantly
• Update automatically
• Transparent about their capabilities
• Run in separate processes

8. Demo: Gmail Checker
Shows how many unread
messages are in your inbox.

9. Demo: Subscribe to a Feed
Displays a subscription button
when a page has an available feed.

10. Demo: Generate QR Codes
Turns URLs and other text into QR codes to
make them easy to transfer to mobile devices.

11. Why You Should Work on Extensions
• Part of an Important Platform
• Persistent Presence
• Source of Web Traffic
• Easy and Fun

12. When the Extension System Ships
• Chrome Dev Channel – available now
• Chrome Beta Channel – later this quarter, with a gallery
• Chrome Stable Channel – soon after

13. How to Build Extensions

14. Structure of an Extension
Compressed directory containing:
– manifest file (manifest.json)
And one or more of these components:
– Browser Action or Page Action
– Content Script
– Background Page
– Other files (HTML, JS, etc.)

15. Extension Communication
• Internal:
• External:
– Cross-origin XHR (requires permission)

16. Overview of the Extension API
chrome is the top level object and exposes:
• chrome.extension.*
• chrome.browserAction.*
• chrome.pageAction.*
• chrome.bookmarks.*
• chrome.tabs.*
• chrome.windows.*

17. Other APIs
Extensions can also use:
• Standard JavaScript and DOM APIs
• XMLHttpRequest
• HTML 5 APIs
• Webkit APIs
• V8 APIs
• Bundled JS APIs libraries

18. Step-by-step Example: Chritter
+
A Twitter Toolbar

19. Step One
Add Browser Action UI
manifest.json:
{
"name": "Chritter",
"description": "A BrowserAction shows public tweets.",
"icons": { "16": "icon16.png",
"32": "icon32.png" },
"browser_action": {
"default_title": "Chritter",
"default_icon": "browserActionIcon.png",
},
"version": "0.0.1"
}

20. Step Two
Display public tweets timeline in a tab
manifest.json:
"browser_action" : {
"popup": popup.html
},
"permissions": [
"tabs",
"http://twitter.com/*"
]
popup.html:
<a href="javascript:chrome.tabs.create(
{url:'http://twitter.com/public_timeline'});")>
Twitter</a>

21. Step Three
Retrieve public tweets with XHR and display in popup
popup.html:
// fetch public timeline from the server.
xhrRequest(
"http://twitter.com/statuses/public_timeline.json",
gotTweets);
....
tweets = JSON.parse(req.responseText);
....
for(i in tweets) {
user = tweets[i].user;
name = user.screen_name;
image_url = user.profile_image_url;
}

22. Step Four
Refactor code to use background processing
manifest.json:
"background_page": "background.html"
background.html:
// fetch tweets and update badge.
incoming = JSON.parse(req.responseText);
unread = unread + incoming.length;
chrome.browserAction.setBadgeText({text:""+unread});
chrome.browserAction.setBadgeBackgroundColor(
{color:[255,0,0,255]});
popup.html:
// get data from background page.
bg = chrome.extension.getBackgroundPage();
for (i in bg.tweets) {
user = bg.tweets[i].user;

23. Step Five
Authorize with Twitter and fetch private timeline
manifest.json:
"content_scripts": [{
"js": ["authDone.js"],
"matches": ["http://twitter.com/oauth/authorize"]
}]
authDone.js:
// injected content script looks for oauth_pin
pin = document.getElementById("oauth_pin");
// send the pin to the extension
port = chrome.extension.connect();
port.postMessage({"success": true, "pin": pin});
background.html:
// extension receives auth pin and logs into Twitter
chrome.self.onConnect.addListener(function(port) {
port.onMessage.addListener(function(data) {
oauthRequest("http://twitter.com/oauth/access_token",
{"oauth_verifier": data.pin}, gotAccessToken);

24. Key Takeaways
• Part of fast growing platform with global reach
• Permanent presence in the browser
• Small learning curve
• Low maintenance needs
• Easy to distribute

25. Developer Resources
• Documentation
http://code.google.com/chrome/extensions
• Blog
http://blog.chromium.org
• Discussion group
http://groups.google.com/group/chromium-extensions

26. Q&A