Google Chrome Extensions - DevFest09

Developing Google
Chrome Extensions
Mihai Ionescu
Developer Advocate, Google

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

What Extensions Are
• Programs that enhance Google Chrome's functionality

• Written in HTML, CSS, and JavaScript

• Integrated using a simple API

• Developed iteratively

What Extensions Are
• Installed instantly

• Update automatically

• Transparent about their capabilities

• Run in separate processes

Demo: Gmail Checker

Shows how many unread
messages are in your inbox.

Demo: Subscribe to a Feed

Displays a subscription button
when a page has an available feed.

Demo: Generate QR Codes

Turns URLs and other text into QR codes to
make them easy to transfer to mobile devices.

Why You Should Work on Extensions
• Part of an Important Platform

• Persistent Presence

• Source of Web Traffic

• Easy and Fun

When the Extension System Ships
• Chrome Dev Channel – available now

• Chrome Beta Channel – later this quarter, with a gallery

• Chrome Stable Channel – soon after

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.)

Extension Communication
• Internal:

• External:
– Cross-origin XHR (requires permission)

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.*

Other APIs
Extensions can also use:
• Standard JavaScript and DOM APIs

• XMLHttpRequest

• HTML 5 APIs

• Webkit APIs

• V8 APIs

• Bundled JS APIs libraries

Step-by-step Example: Chritter

+
A Twitter Toolbar

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"
}

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>

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;
}

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;

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);

Key Takeaways
• Part of fast growing platform with global reach

• Permanent presence in the browser

• Small learning curve

• Low maintenance needs

• Easy to distribute

Developer Resources
• Documentation
http://code.google.com/chrome/extensions

• Blog
http://blog.chromium.org

• Discussion group
http://groups.google.com/group/chromium-extensions

Google Chrome Extensions - DevFest09

More Related Content

Google Chrome Extensions - DevFest09