Google Chrome Extensions - DevFest09
Upcoming SlideShare
Loading in...5

Google Chrome Extensions - DevFest09



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

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



Total Views
Views on SlideShare
Embed Views



5 Embeds 117 56 56 3 1 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Really impressive !
    günstige Kosmetik
    Are you sure you want to
    Your message goes here
  • there should be a source code with this example....
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Google Chrome Extensions - DevFest09 Google Chrome Extensions - DevFest09 Presentation Transcript

  • 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
  • Introduction to Extensions View slide
  • What Extensions Are • Programs that enhance Google Chrome's functionality • Written in HTML, CSS, and JavaScript • Integrated using a simple API • Developed iteratively View slide
  • 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
  • How to Build Extensions
  • 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.* •*
  • 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",     "*"   ] popup.html:   <a href="javascript:chrome.tabs.create(   {url:''});")>   Twitter</a>
  • Step Three Retrieve public tweets with XHR and display in popup popup.html:   // fetch public timeline from the server.    xhrRequest(     "",     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": [""]    }] 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("",                    {"oauth_verifier":}, 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 • Blog • Discussion group
  • Q&A