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 S...
Introduction to Extensions
What Extensions Are
• Programs that enhance Google Chrome's functionality

• Written in HTML, CSS, and JavaScript

• Integ...
What Extensions Are
• Installed instantly

• Update automatically

• Transparent about their capabilities

• Run in separa...
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 dev...
Why You Should Work on Extensions
• Part of an Important Platform

• Persistent Presence

• Source of Web Traffic

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

• Chrome Beta Channel – later this quarter, with a g...
How to Build Extensions
Structure of an Extension
Compressed directory containing:
  – manifest file (manifest.json)

And one or more of these com...
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.*
...
Other APIs
Extensions can also use:
• Standard JavaScript and DOM APIs

• XMLHttpRequest

• HTML 5 APIs

• Webkit APIs

• ...
Step-by-step Example: Chritter




                    +
             A Twitter Toolbar
Step One
Add Browser Action UI

 manifest.json:
 {
   "name": "Chritter",
   "description": "A BrowserAction shows public ...
Step Two
Display public tweets timeline in a tab
 manifest.json:

   "browser_action" : {
      "popup": popup.html
   },
...
Step Three
Retrieve public tweets with XHR and display in popup
 popup.html:

   // fetch public timeline from the server....
Step Four
Refactor code to use background processing
 manifest.json:
   "background_page": "background.html"

 background....
Step Five
Authorize with Twitter and fetch private timeline
 manifest.json:
   "content_scripts": [{
       "js": ["authDo...
Key Takeaways
• Part of fast growing platform with global reach

• Permanent presence in the browser

• Small learning cur...
Developer Resources
• Documentation
  http://code.google.com/chrome/extensions

• Blog
  http://blog.chromium.org

• Discu...
Q&A
Google Chrome Extensions - DevFest09
Google Chrome Extensions - DevFest09
Google Chrome Extensions - DevFest09
Upcoming SlideShare
Loading in...5
×

Google Chrome Extensions - DevFest09

8,969

Published on

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

Published in: Technology
2 Comments
10 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,969
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
156
Comments
2
Likes
10
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×