Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Google Chrome Extensions - DevFest09

11,215 views

Published on

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

Published in: Technology

Google Chrome Extensions - DevFest09

  1. 1. Developing Google Chrome Extensions Mihai Ionescu Developer Advocate, Google
  2. 2. 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
  3. 3. Introduction to Extensions
  4. 4. What Extensions Are • Programs that enhance Google Chrome's functionality • Written in HTML, CSS, and JavaScript • Integrated using a simple API • Developed iteratively
  5. 5. What Extensions Are • Installed instantly • Update automatically • Transparent about their capabilities • Run in separate processes
  6. 6. Demo: Gmail Checker Shows how many unread messages are in your inbox.
  7. 7. Demo: Subscribe to a Feed Displays a subscription button when a page has an available feed.
  8. 8. Demo: Generate QR Codes Turns URLs and other text into QR codes to make them easy to transfer to mobile devices.
  9. 9. Why You Should Work on Extensions • Part of an Important Platform • Persistent Presence • Source of Web Traffic • Easy and Fun
  10. 10. When the Extension System Ships • Chrome Dev Channel – available now • Chrome Beta Channel – later this quarter, with a gallery • Chrome Stable Channel – soon after
  11. 11. How to Build Extensions
  12. 12. 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.)
  13. 13. Extension Communication • Internal: • External: – Cross-origin XHR (requires permission)
  14. 14. 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.*
  15. 15. Other APIs Extensions can also use: • Standard JavaScript and DOM APIs • XMLHttpRequest • HTML 5 APIs • Webkit APIs • V8 APIs • Bundled JS APIs libraries
  16. 16. Step-by-step Example: Chritter + A Twitter Toolbar
  17. 17. 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" }
  18. 18. 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>
  19. 19. 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;  }
  20. 20. 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;
  21. 21. 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);
  22. 22. Key Takeaways • Part of fast growing platform with global reach • Permanent presence in the browser • Small learning curve • Low maintenance needs • Easy to distribute
  23. 23. Developer Resources • Documentation http://code.google.com/chrome/extensions • Blog http://blog.chromium.org • Discussion group http://groups.google.com/group/chromium-extensions
  24. 24. Q&A

×