google chrome extensions - devfest09

Developing GoogleChrome ExtensionsMihai IonescuDeveloper Advocate, Google

Agenda

• Introduction to Extensionso What Extensions Areo Why You Should Work on Extensionso When the Extension System Ships

• How to Build Extensionso Technical Overviewo Step-by-Step Example

• Key Takeaways

• Q&A

Introduction to Extensions

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 unreadmessages are in your inbox.

Demo: Subscribe to a Feed

Displays a subscription buttonwhen a page has an available feed.

Demo: Generate QR Codes

Turns URLs and other text into QR codes tomake 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

How to Build Extensions

Structure of an ExtensionCompressed 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

Q & A