Google Chrome Extensions - DevFest09
-
Upload
mihaiionescu -
Category
Technology
-
view
8.718 -
download
3
description
Transcript of Google Chrome Extensions - DevFest09
Developing GoogleChrome ExtensionsMihai IonescuDeveloper Advocate, Google
Agenda
• Introduction to Extensionso What Extensions Areo Why You Should Work on Extensionso When the Extension System Ships
• How to Build Extensionso Technical Overviewo 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 unreadmessages are in your inbox.
Demo: Subscribe to a Feed
Displays a subscription buttonwhen a page has an available feed.
Demo: Generate QR Codes
Turns URLs and other text into QR codes tomake 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 ExtensionCompressed 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
Q & A