google chrome extensions - devfest09

27

Upload: mihaiionescu

Post on 19-May-2015

8.712 views

Category:

Technology


3 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Google Chrome Extensions - DevFest09
Page 2: Google Chrome Extensions - DevFest09
Page 3: Google Chrome Extensions - DevFest09

Developing GoogleChrome ExtensionsMihai IonescuDeveloper Advocate, Google

Page 4: Google Chrome Extensions - DevFest09

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

Page 5: Google Chrome Extensions - DevFest09

Introduction to Extensions

Page 6: Google Chrome Extensions - DevFest09

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

• Written in HTML, CSS, and JavaScript

• Integrated using a simple API

• Developed iteratively

Page 7: Google Chrome Extensions - DevFest09

What Extensions Are• Installed instantly

• Update automatically

• Transparent about their capabilities

• Run in separate processes

Page 8: Google Chrome Extensions - DevFest09

Demo: Gmail Checker

Shows how many unreadmessages are in your inbox.

Page 9: Google Chrome Extensions - DevFest09

Demo: Subscribe to a Feed

Displays a subscription buttonwhen a page has an available feed.

Page 10: Google Chrome Extensions - DevFest09

Demo: Generate QR Codes

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

Page 11: Google Chrome Extensions - DevFest09

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

• Persistent Presence

• Source of Web Traffic

• Easy and Fun

Page 12: Google Chrome Extensions - DevFest09

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

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

• Chrome Stable Channel – soon after

Page 13: Google Chrome Extensions - DevFest09

How to Build Extensions

Page 14: Google Chrome Extensions - DevFest09

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

Page 15: Google Chrome Extensions - DevFest09

Extension Communication • Internal:

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

Page 16: Google Chrome Extensions - DevFest09

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

Page 17: Google Chrome Extensions - DevFest09

Other APIs Extensions can also use:

• Standard JavaScript and DOM APIs

• XMLHttpRequest

• HTML 5 APIs

• Webkit APIs

• V8 APIs

• Bundled JS APIs libraries

Page 18: Google Chrome Extensions - DevFest09

Step-by-step Example: Chritter

+

A Twitter Toolbar

Page 19: Google Chrome Extensions - DevFest09

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

Page 20: Google Chrome Extensions - DevFest09

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>

Page 21: Google Chrome Extensions - DevFest09

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

Page 22: Google Chrome Extensions - DevFest09

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;

Page 23: Google Chrome Extensions - DevFest09

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

Page 24: Google Chrome Extensions - DevFest09

Key Takeaways • Part of fast growing platform with global reach

• Permanent presence in the browser

• Small learning curve

• Low maintenance needs

• Easy to distribute

Page 25: Google Chrome Extensions - DevFest09

Developer Resources• Documentation

http://code.google.com/chrome/extensions

• Blog

http://blog.chromium.org

• Discussion group

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

Page 26: Google Chrome Extensions - DevFest09

Q & A

Page 27: Google Chrome Extensions - DevFest09