• Save
Developing Google Chrome Extensions DevFest 2010
Upcoming SlideShare
Loading in...5

Developing Google Chrome Extensions DevFest 2010






Total Views
Views on SlideShare
Embed Views



6 Embeds 233

http://jujo00obo2o234ungd3t8qjfcjrs3o6k-a-sites-opensocial.googleusercontent.com 132
https://jujo00obo2o234ungd3t8qjfcjrs3o6k-a-sites-opensocial.googleusercontent.com 76
http://www.slideshare.net 22
http://www.linkedin.com 1
http://bb.beaufortccc.edu 1
https://www.linkedin.com 1



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.


11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Developing Google Chrome Extensions DevFest 2010 Developing Google Chrome Extensions DevFest 2010 Presentation Transcript

    • Developing Google Chrome Extensions Rajdeep Dua Hyderabad : Feb 27,2010 Pune : Mar 3,2010
    • Agenda •  Introduction to Extensions o  What Extensions Are o  Why You Should Work on Extensions o  Structure of an Extension o  Types of extensions o  Extension APIs •  Summary •  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 •  Updated automatically •  Transparent about their capabilities •  Run in separate processes
    • Gmail Checker Shows how many unread messages are in your inbox.
    • Demo: Subscribe in a Feed Reader Displays a subscription button when a page has an available feed.
    • Why You Should Work on Extensions •  Part of an important platform •  Persistent presence •  Source of traffic •  Easy and fun
    • Extension System is already Live! •  In the Beta channel with a gallery http://chrome.google.com/extensions
    • Structure of an Extension
    • Structure of an Extension Compressed directory (.crx extension) containing: •  manifest file (manifest.json) •  One or more HTML files •  Optional : JavaScript,CSS, Images etc
    • Manifest File •  Meta data file for the extension •  Used to specify the name, version, type of extension •  Also names the background page, content scripts •  Permission for Cross Site scripting
    • Types of Extensions
    • Types of Extensions There are 4 basic types of extensions: •  Browser action •  Page action •  Content script •  Themes
    • Browser Action •  Icon in the main Chrome tool bar next to the Address Bar •  Browser Action is always visible. •  Browser Action can have a badge, a tooltip or a Popup •  Multiple browser actions stack next to each other •  Pixel area 19px x19px available for the Icon •  Canvas Element available to show 3 characters on the Icon •  Can be animated to show updates •  APIs :chrome.browserAction.*
    • Page Action •  Icons inside the address bar •  Not always visible •  Developer decides the logic on when they would be visible •  Icon size smaller than the browser action •  Can have a tooltip or a popup •  API namespace : chrome.pageAction.*
    • Content Scripts •  Scripts which modify the DOM of the underlying HTML page •  Run in their own Isolated environment •  Can pass on messages with the background page •  Some use cases •  Find unlinked URLs in web pages and convert them into hyperlinks •  Increase the font size to make text more legible •  Find and process micro format data in the DOM
    • Content Scripts ..contd •  Content script has access to the DOM of the HTML page but runs in its own isolated container.
    • Cross Origin XML Http Request •  Web pages are by default guided by same origin policy. •  Extensions aren’t limited by same policy – provided the permission are given to make cross domain requests •  Permissions need to be specified in the extension manifest, using either exact websites or a pattern
    • Options Page •  Lets the user specify options which can be used to set preferences for the extension •  Specified in the manifest •  Uses Local Storage to store and retrieve options //save options localStorage["favorite_color"] = color; //retrieve options var favorite = localStorage["favorite_color"];
    • Layout of the Extension API chrome is the top-level object and exposes: •  chrome.extension.* •  chrome.browserAction.* •  chrome.pageAction.*
    • Layout of the Extension API chrome is the top-level object and exposes: •  chrome.windows.* (requires tabs permission) •  chrome.tabs.* (requires tabs permission) •  chrome.bookmarks.* (requires bookmarks permission)
    • Other APIs Extensions can also access: •  standard JavaScript and DOM APIs •  HTML5 APIs •  WebKit APIs
    • Gmail Extension: Deep dive Gmail RSS Feed Background.html End point 1 init() 1.3.1 xhr.open(..) 1.3.1 UpdateUnreadCount() xhr.send() 1.1 loadAnimation() 1.2 startRequest() 1.3 getInboxCount(..)
    • Google Chrome Extensions - Architecture
    • Chrome Extensions – Process View
    • Chrome Extensions – Security Architecture Source : http://webblaze.cs.berkeley.edu/2010/secureextensions/ Extensions attack surface is reduced by dividing the components into •  ontent Script C •  xtension Core E •  ative Binary N Each of these three components share the DOM but not the JavaScript functions
    • Summary
    • Key Takeaways •  Small learning curve •  Over 40-million active Google Chrome users •  Rapidly rising market share in India
    • Q&A
    • Online Resources •  Documentation: http://code.google.com/chrome/ extensions •  Blog: /http://blog.chromium.org •  Discussion group: http://groups.google.com/group/ chromium-extension