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

Like this? Share it with your network

Share

Google Chrome Extensions - DevFest09

on

  • 12,314 views

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

Statistics

Views

Total Views
12,314
Views on SlideShare
12,197
Embed Views
117

Actions

Likes
9
Downloads
151
Comments
2

5 Embeds 117

http://www.slideshare.net 56
http://blog.espol.edu.ec 56
http://webcache.googleusercontent.com 3
http://duckduckgo.com 1
https://home.jolicloud.com 1

Accessibility

Categories

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.

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

Google Chrome Extensions - DevFest09 Presentation Transcript

  • 1. Developing Google Chrome Extensions Mihai Ionescu Developer Advocate, Google
  • 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. Introduction to Extensions
  • 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. What Extensions Are • Installed instantly • Update automatically • Transparent about their capabilities • Run in separate processes
  • 6. Demo: Gmail Checker Shows how many unread messages are in your inbox.
  • 7. Demo: Subscribe to a Feed Displays a subscription button when a page has an available feed.
  • 8. Demo: Generate QR Codes Turns URLs and other text into QR codes to make them easy to transfer to mobile devices.
  • 9. Why You Should Work on Extensions • Part of an Important Platform • Persistent Presence • Source of Web Traffic • Easy and Fun
  • 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. How to Build Extensions
  • 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. Extension Communication • Internal: • External: – Cross-origin XHR (requires permission)
  • 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. Other APIs Extensions can also use: • Standard JavaScript and DOM APIs • XMLHttpRequest • HTML 5 APIs • Webkit APIs • V8 APIs • Bundled JS APIs libraries
  • 16. Step-by-step Example: Chritter + A Twitter Toolbar
  • 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. 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. 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. 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. 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. 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. Developer Resources • Documentation http://code.google.com/chrome/extensions • Blog http://blog.chromium.org • Discussion group http://groups.google.com/group/chromium-extensions
  • 24. Q&A