Google Chrome Frame

Alex Russell <slightlyoff@google.com>
JSConf – April 18, 2010

GCF In A Nutshell

Google Chrome Frame is an Open Source plugin for Internet Explorer that lets developers and users choose to have pages rendered by Google Chrome (WebKit, V8, etc.). Existing sites work as they always have.

“Why not just install Chrome?”

Don't Panic

It won't break the intranet

And it might just make you stunningly productive

No Surprises, Please

GCF renders pages only when:

  • Users have GCF installed
  • Developers easily opt in per page
  • No "blanket" rendering

How Easy? This Easy:

Meta tag method: 

<meta http-equiv="X-UA-Compatible" content="chrome=1">

HTTP header: 

X-UA-Compatible: chrome=1

What If GCF Isn't Installed?

  • Graceful fallback by design
  • MSHTML renders when GCF isn't available
  • Other browsers render page as usual
  • User-Agent is extended to allow server-side detection
  • CFInstall.js simplifies prompt/install
    • No restart required
    • Offer GCF along with other browsers

How It Works

  1. User begins navigation
  2. Request is issued by IE
    1. UA string agumented with chromeframe/5.0.xxx
  3. Response is sniffed by GCF
    1. If page opts in, switch
    2. Else, page continue on to MSHTML

Demo

Host Browser Fidelity

  • Same networking (including SSL)
  • Same cache behavior
  • Same cookies
  • Respects In-Private mode

New Features Faster

Auto-Update to the rescue

The Feature Backlog: HTML

  • <input type="range">
  • <input autofocus>
  • <input placeholder="...">
  • Many new form controls coming soon
  • New semantic tags (header, section, etc.)
  • Microdata
  • ARIA role and state attributes

The Feature Backlog: HTML (contd.)

  • <canvas>
  • <audio>
  • <video>
  • data: URIs
  • SVG for images

The Feature Backlog: CSS

  • CSS 3 selectors!
  • Gradients
  • Rounded corners
  • Reflections
  • Box shadows
  • Text shadows
  • Transitions

The Feature Backlog: CSS (contd.)

  • Transformations
  • Animations
  • Independent background opacity
  • @font-face
  • Pointer events
  • HBox/VBox layout
  • Text clipping

The Feature Backlog: CSS (contd.)

  • Multi-background
  • background-size, background-origin, background-clip
  • HSLA color model

The Feature Backlog: JS & DOM

  • One way to listen for events
  • querySelectorAll
  • document.HTMLDivElement, etc.
  • Array generics, some ES5 features
  • JITing JS engines
  • Web Workers
  • Local Storage

The Feature Backlog: JS & DOM (contd.)

  • Web Sockets
  • AppCache
  • Notifications
  • Drag and Drop
  • Geolocation
  • WebGL

Where Do We Go From Here?

Current Status, Next Steps

  • Currently in Developer Channel
  • Beta soon
  • Focus on host-browser fidelity and performance
  • We want your feedback and need your help

Questions?

Thank You

http://google.com/chromeframe

http://code.google.com/chrome/chromeframe