Google Chrome Extensions - DevFest09

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

What Extensions Are • Programs that enhance Google Chrome's functionality • Written in HTML, CSS, and JavaScript • Integrated using a simple API • Developed iteratively

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.* • chrome.windows.*

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", "http://twitter.com/*" ] popup.html: <a href="javascript:chrome.tabs.create( {url:'http://twitter.com/public_timeline'});")> Twitter</a>

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

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": ["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);

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 http://code.google.com/chrome/extensions • Blog http://blog.chromium.org • Discussion group http://groups.google.com/group/chromium-extensions

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

Google Chrome Extensions - DevFest09

by mihaiionescu on Nov 19, 2009

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 110

Statistics

Google Chrome Extensions - DevFest09 Presentation Transcript