Running HTML 5 Inside IE with Google Chrome Frame

Google has just released an Internet Explorer plug-in called Google Chrome Frame that enables Chrome rendering inside IE. That means that any page targeted for Chrome Frame will be rendered using Google’s rendering engine, including HTML 5 elements supported by Google, while the page is viewed with Microsoft’s Internet Explorer.

Google Chrome Frame is an open source project that prepares the way for Wave. Wave is going to use HTML 5 features, but Wave is not going to be largely adopted if Internet Explorer is not supporting HTML 5. The workaround for Google was to create a plug-in for Internet Explorer that completely bypasses IE’s rendering engine. Not only pages load faster in IE that way, but all HTML 5 elements that Google supports work fine in IE.

Lars Rasmussen, Google Wave team manager, explains why Chrome Frame was created:

Google Wave depends on strong JS and DOM rendering performance to provide a desktop-like experience in the browser. HTML5's offline storage and web workers will enable us to add great features without having to compromise on performance. Unfortunately, Internet Explorer, still used by the majority of the Web's users, has not kept up with such fairly recent developments in Web technology. Compared with other browsers, the JavaScript performance is many times slower and HTML5 support is still far behind. Likewise, the many different versions of IE still in use -- each with its own set of CSS quirks and layout limitations -- further complicates building rich Web applications.

In the past, the Google Wave team has spent countless hours solely on improving the experience of running Google Wave in Internet Explorer. We could continue in this fashion, but using Google Chrome Frame instead lets us invest all that engineering time in more features for all our users, without leaving Internet Explorer users behind.

To jump start testing this, the IE plug-in needs to be installed first. Then any page can be loaded in IE, being rendered by Chrome’s engine if the URL is prefixed by “cf:”. For example, this page contains HTML 5 video: cf:http://camendesign.com/code/video_for_everybody/test.html.

Using the “cf:” prefix is a quick method that proves the capability, but the actual method to be used is to specify a meta tag in the HTML page:

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

When IE, having the Chrome Frame plug-in, encounters this tag, it starts using Chrome’s engine. Google has prepared a script to test if Chrome Frame is installed and to install it:

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"> </script>
 
<div id="placeholder"></div>

<script>
 CFInstall.check({
    node: "placeholder",
    destination: "http://www.waikiki.com"
  });
</script>

A registry key can be used to force IE to always use Chrome Frame:

HKCU
  Software
    Google
      ChromeFrame
        OptInUrls
          *google.com*         [string value name is the pattern to match, assigned value is not used]
          *yahoo.com/mail*     [use simple pattern, no regexp matching]
          *                    ['*' means load everything!]

Chrome’s debug tools and logging are also available in Chrome Frame. Chrome Frame is available only for IE 6, 7 and 8 on Windows XP and Vista. Other browsers/versions are not targeted/affected. The plug-in is a pre-release, not even in beta, being targeted at developers.

This is not the intended way to run HTML 5 applications across all major browsers. The user still needs a plug-in to run them in IE. But Google is clearly forcing Microsoft’s hand to speed up HTML 5 adoption and improve IE. Those currently using IE will the speed improvement and will benefit from HTML 5 applications that are to come like Wave.