^ contentPlace:"1-3" images/farm6.static.flickr.com__5177__5534815158_d224fee5e4_o.jpg http://flickr.com/photos/37184970@N00/5534815158/ The Google Chrome Browser Michael Mahemoff [@mahemoff] ^ contentPlace:"3-3" Principles: Speed,Simplicity,Security images/blog.nsp-momo.com__wp-content__uploads__2010__12__chrome_icon.png Principles: 1. Speed images/28.media.tumblr.com__tumblr_lh9i5qNDGX1qzpyxko1_500.jpg JavaScript Speed images/farm4.static.flickr.com__3290__2962875515_bd141ce147_o.jpg http://flickr.com/photos/jayemphoto/2962875515/ V8 Engine images/farm4.static.flickr.com__3290__2962875515_bd141ce147_o.jpg http://flickr.com/photos/jayemphoto/2962875515/ V8 Beyond the Browser images/journal.paul.querna.org__wp-content__uploads__2010__06__nodejs.png Crankshaft images/crankshaftchart.png images/www.thechromesource.com__wp-content__uploads__2011__02__v8chrome10a.png ^ contentPlace:"3-2" Rendering Speed images/fortunebrainstormtech.files.wordpress.com__2010__05__picture-25.png GPU Acceleration images/farm4.static.flickr.com__3066__2962874877_6f8062d410_o.jpg http://flickr.com/photos/jayemphoto/2962874877/ GPU Acceleration images/2.bp.blogspot.com___EsaGlPOyn20__TI-zbPbsjII__AAAAAAAAAK8__J287L_F1Rq4__s400__IE9PlatformPreviewTestDriveChart.png DNS Pre-Fetching images/farm4.static.flickr.com__3145__2559627257_42182bef7e_o.jpg http://flickr.com/photos/ph-stop/2559627257/ UX speed images/farm1.static.flickr.com__12__70087476_c4c40e9ea9_o.jpg http://flickr.com/photos/jimgrant/70087476/ which takes us to ... Principles: 2. Simplicity images/farm5.static.flickr.com__4005__4417985015_ac08b499aa_o.jpg http://flickr.com/photos/minidriver/4417985015/ ^ contentPlace:"3-3" Minimalist design images/www.glenbarton.co.uk__wp-content__uploads__2008__09__chrome_021.gif http://www.glenbarton.co.uk/?p=18 ^ contentPlace:"3-3" No browser feature is sacred images/www.glenbarton.co.uk__wp-content__uploads__2008__09__chrome_021.gif http://www.glenbarton.co.uk/?p=18 Popups: Zero tolerance http://i.d.com.com/i/dl/media/dlimage/32/40/0/32400_large.jpeg Auto-updating: Browser and extensions images/farm5.static.flickr.com__4005__4417985015_ac08b499aa_o.jpg http://flickr.com/photos/minidriver/4417985015/ Principles: 3. Security images/farm1.static.flickr.com__7__6080622_bd95d499a5_o.jpg http://flickr.com/photos/zebble/6080622/ Auto-Updating patches against vulnerabilities images/farm1.static.flickr.com__7__6080622_bd95d499a5_o.jpg http://flickr.com/photos/zebble/6080622/ Pwn2Own images/farm6.static.flickr.com__5257__5534557804_55daa2c9ba_o.jpg http://flickr.com/photos/37184970@N00/5534557804/ images/techblissonline.com__wp-content__uploads__2008__09__sandboxing-google-chrome.jpg ChromeOS: Speed,Simplicity,Security images/farm6.static.flickr.com__5020__5535042826_f9e5115e00_o.jpg http://flickr.com/photos/37184970@N00/5535042826/ How Chrome is Developed #000 Open Source Development Model images/blog.skiquel.com__wp-content__uploads__2010__03__Chromium_Icon.png Chromium: An Open Source Project images/blog.skiquel.com__wp-content__uploads__2010__03__Chromium_Icon.png Distributed globally and with external contributions images/blog.skiquel.com__wp-content__uploads__2010__03__Chromium_Icon.png Agile: Release Early, Release Often images/farm6.static.flickr.com__5297__5532441874_db82d25526_o.jpg http://flickr.com/photos/37184970@N00/5532441874/ Get involved: crbug.org images/blog.skiquel.com__wp-content__uploads__2010__03__Chromium_Icon.png Get involved: chromium-discuss group images/blog.skiquel.com__wp-content__uploads__2010__03__Chromium_Icon.png repo/nightlies ... http://www.chromium.org/ images/blog.skiquel.com__wp-content__uploads__2010__03__Chromium_Icon.png The Developer Experience #000 ^ contentPlace:"3-3" Developer Experience: HTML5 images/wlh.me__html5__html53-5.jpg http://lloydhumphreys.com/blog/ Indexed Database images/farm5.static.flickr.com__4087__5060779271_254fa40e64_b.jpg http://flickr.com/photos/23077285@N02/5060779271/ File Access http://www.html5rocks.com/features/file images/farm3.static.flickr.com__2101__2444128581_2da6d27a36_o.jpg http://flickr.com/photos/pargon/2444128581/ WebGL - now stable! images/farm6.static.flickr.com__5216__5528498043_2c6598d311_o.jpg http://flickr.com/photos/37184970@N00/5528498043/

Device Orientation

Shared Workers images/farm6.static.flickr.com__5220__5538458002_c21a041936_o.jpg http://flickr.com/photos/37184970@N00/5538458002/ http://debizblog.wordpress.com/page/2/ Server-Sent Events images/farm1.static.flickr.com__63__186498596_58c5b74eed_o.jpg http://flickr.com/photos/willpate/186498596/ Speech! x-webkit-speech images/farm1.static.flickr.com__133__337248947_f1eadc7cc0_o.jpg http://flickr.com/photos/altemark/337248947/ ^ contentPlace:"3-2" #protip http://3.ly/chromestatus images/farm6.static.flickr.com__5220__5537896979_f86821ae98_o.jpg http://flickr.com/photos/37184970@N00/5537896979 More HTML5 at http://html5rocks.com images/3.bp.blogspot.com___HQiIKj84fww__TKEcMW49eBI__AAAAAAAABf4__wBcS0oTxvvs__s1600__html5rocks.png Developer Experience: Dev Tools images/devtools.png http://blog.stormid.com/2010/06/chrome-developer-tools-vs-firefox.html Developer Experience: Chrome Extensions images/farm6.static.flickr.com__5255__5534618520_99f50f42e7_o.jpg http://flickr.com/photos/37184970@N00/5534618520/ Making the browser better images/farm6.static.flickr.com__5180__5534174901_d92d983f43_o.jpg ^ contentPlace:"3-1" 1. Extending the Browser UI Browser Actions Page Actions Omnibox Extensions Context Menus images/farm1.static.flickr.com__5__6480084_e244ca1044_o.jpg http://flickr.com/photos/dmason/6480084/ ^ contentPlace:"3-1" 2. Overriding Built-In Pages Bookmark Manager Browsing History New Tab Page images/farm1.static.flickr.com__5__6480084_e244ca1044_o.jpg http://flickr.com/photos/dmason/6480084/ ^ contentPlace:"3-1" 3. Enhancing Web Pages Content Scripts Greasemonkey Scripts images/farm1.static.flickr.com__5__6480084_e244ca1044_o.jpg http://flickr.com/photos/dmason/6480084/ ^ contentPlace:"3-1" Super Powers Cross-Domain Calls Idle Detection Background Pages Management APIs ... images/farm1.static.flickr.com__5__6480084_e244ca1044_o.jpg http://flickr.com/photos/dmason/6480084/ manifest.json ==== "name" : "Hacker News Latest", "description" : "Shows latest Hackers News Stories", "version": "1", "icons": { "24": "logo24.png", "128": "logo.png" }, "permissions": [ "unlimitedStorage" ], "browser_action": { "default_icon": "hn.jpg", "default_title": "Hacker News", "default_popup": "hackernews.html" } } ====

Developing an extension

  1. Determine the feature(s)
  2. Cut-and-paste config from the docs
  3. Fill in the gaps
images/farm6.static.flickr.com__5097__5535032482_248dd65575_o.jpg http://flickr.com/photos/37184970@N00/5535032482/ images/farm6.static.flickr.com__5100__5535035216_8552812abb_o.jpg http://flickr.com/photos/37184970@N00/5535035216

Deploying an extension

  1. Test in Extensions - Developer Mode
  2. Zip and submit to Chrome Web Store
Developer Experience: The Chrome Web Store What else do we need? images/creativebits.org__files__html5-logo-1.jpg ^ contentPlace:"3-3" Discovery images/farm6.static.flickr.com__5098__5485414552_3f373e72f5_o.jpg ^ contentPlace:"3-3" Evaluation images/farm6.static.flickr.com__5176__5485418808_9c708ee8b8_o.jpg ^ contentPlace:"3-3" Monetization images/farm4.static.flickr.com__3104__2823255013_9fa5d21650_b.jpg http://www.flickr.com/photos/athrasher/2823255013/ Enter the Chrome Web Store images/farm6.static.flickr.com__5091__5451052890_ca95977a22_b.jpg Discovery images/farm6.static.flickr.com__5091__5451052890_ca95977a22_b.jpg images/images.fastcompany.com__upload__Picture-132.jpg Streamie images/picupper.com__2011__02__21__Screen+shot+2011-02-15+at+9.02.31+PM.png ToDo.ly (see http://is.gd/l68WAD) images/picupper.com__2011__02__21__a2.jpg Evaluation images/farm6.static.flickr.com__5258__5484836701_52e9a2c3a1_b.jpg Monetization images/farm6.static.flickr.com__5216__5485434420_c984e2b530_o.jpg Hosted Apps: manifest.json ==== "name" : "Hacker News Reader", "description" : "A reader for the Hacker News website", "version": "1", "icons": { "24": "logo24.png", "128": "logo.png" }, "permissions": [ "unlimitedStorage" ], "app" : { "urls": ["http://project.mahemoff.com/hn"], "launch": { "web_url": "http://project.mahemoff.com/hn" } } } ==== ^ contentPlace:"1-2" Rich,Task-Focused, Quick/zero login images/weatherbug.jpg

Submitting a hosted app

  1. Write manifest.json
  2. Zip with icons and submit to Chrome Web Store
  3. Describe app in Developer Dashboard
OR http://AppMator.com images/appmator.jpg Same structure, different experiences images/chrome-venn.jpg Developer Experience: Chrome Frame images/www.google.com__images__icons__illustrations__chrome_frame-430.png Make your HTML5 app work in IE6, IE7, IE8...and fast ==== <meta http-equiv="X-UA-Compatible" content="chrome=1"> ==== ^ contentPlace:"3-3" prez.mahemoff.com/state-chrome Mail: mahemoff@google.com Twitter: @mahemoff images/blog.nsp-momo.com__wp-content__uploads__2010__12__chrome_icon.png