The old-browser gap

The web platform has moved quickly. Modern browsers ship with powerful JavaScript APIs, SVG, canvas, WebGL, CSS3 and richer markup. Older browsers, meanwhile, are stuck in the past, and the gap is widening. Polyfills can help bridge some of that distance, but they can't emulate everything and they add overhead to browsers that are already slower than the current generation.

Google Chrome Frame was a plugin for Internet Explorer that addressed this problem directly: it replaced IE's rendering engine with Chrome's, giving users access to all the HTML5 features available in Chrome while keeping the familiar IE interface. It supported IE 6 through 9. While it was most useful for dealing with IE 6 to 8, applications that needed features like WebGL could also require it for IE 9 users.

Opting in

A critical design decision was that Chrome Frame never activated by default. A page had to explicitly opt in, either via an HTTP header or an HTML meta tag. That guaranteed no existing site would break simply because a user had the plugin installed.

Option 1: Add an HTTP header to your server configuration (e.g., Apache):

X-UA-Compatible: chrome=1

Option 2: Add a meta tag to your HTML <head>:

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

With either in place, pages render through Chrome Frame whenever the plugin is installed on the user's machine.

When you drop old-browser support

Sites often abandon support for old browsers because they need modern features such as HTML5 video, canvas or CSS3, or because maintaining compatibility costs too much development time. Chrome Frame offered a path to keep those users on the site. The plugin announced its presence by extending the host's User-Agent string with the token chromeframe.

Server-side detection could look for that token: if present, insert the opt-in meta tag; if not, redirect the user to an installation page. As an alternative to server-side sniffing, the CFInstall.js script detected Chrome Frame in the browser and prompted users to install it without a restart:

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

<style>
/*
CSS rules to use for styling the overlay:
    .chromeFrameOverlayContent
    .chromeFrameOverlayContent iframe
    .chromeFrameOverlayCloseBar
    .chromeFrameOverlayUnderlay
*/
</style>

<script>
// You may want to place these lines inside an onload handler
CFInstall.check({
mode: "overlay",
destination: "http://www.waikiki.com"
});
</script>
</body>
</html>

A custom prompt

If you preferred to build your own landing page or overlay, you could send users to http://www.google.com/chromeframe/, including the URL in an IFRAME. A redirect parameter returned users to your site after installation:

http://www.google.com/chromeframe/?redirect=http://www.google.com/

To save a step in the install flow, you could link directly to the EULA at http://www.google.com/chromeframe/eula.html.

Installation details

Chrome Frame could be installed without administrative rights on the user's machine. Appending user=true to the URL triggered a user-level installation:

http://www.google.com/chromeframe/?user=true

For enterprise rollouts, an MSI installer was available at http://www.google.com/chromeframe/eula.html?msi=true, with further deployment documentation at http://www.chromium.org/administrators.

Adoption and performance

Major sites such as Yahoo, WordPress.com and several Google properties adopted Chrome Frame. Beyond modern feature support, the plugin often delivered a significant improvement in initial page load time. Developers could verify the benefit for their own sites by running tests at webpagetest.org and selecting Chrome Frame as the browser.

Additional resources included the Getting Started Guide and a talk from Google IO 2011.