How to add Chrome Frame to your website?

Today I am writing about how to get Chrome Frame BHO into Internet Explorer. I am also writing about a comparative test of the IE8 browser with and without Chrome Frame. How to get 'Chrome Frame prompt' on your webpage? Simply include the following script within the body of the webpage.

Today I am writing about how to get Chrome Frame BHO into Internet Explorer. I am also writing about a comparative test of the IE8 browser with and without Chrome Frame.

How to get ‘Chrome Frame prompt’ on your webpage?

Simply include the following script within the body of the webpage.

<body>
<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>
</body>

Any one using Internet Explorer looks up the page with this script, they will get a prompt for downloading Chrome Frame as show in image below.

chromeframe2

Once the user clicks on “Get Google Chrome Frame” it automatically downloads the Chrome Frame BHO as a plug-in for Internet Explorer.

This basically allows Internet Explorer to use Chrome’s rendering engine for better and faster performance. Chrome starts running inside your Internet Explorer.

The Acid 3 Test

I have Internet Explorer 8 which is the the latest from Microsoft and decided to test it with the Acid 3 test. This was to check how well it conformed to web standards for Document Object Model and Java Script.

Acid 3 Test with IE8 without the Chrome Frame plug-in.

acid3testIEfail

It is pretty clear that my Internet Explorer 8 failed the test. 🙁

Acid 3 Test with IE8 with the Chrome Frame plug-in.

acid3testIEpass

Here my Internet Explorer Browser passed the Acid 3 test because of Chrome Frame. 🙂

How to let IE know when to switch over to Chrome?

For users the easiest way for switching over to Chrome Frame with Internet Explorer is to add “cf:” before “http://” on your address bar.

Example:

cf:http://acid3.acidtests.org/

For Developers all you need to do is just add this tag to the top of the page.

<meta http-eqiv=”X-UA-Compatible” content=”chrome=1″>

The tag makes Internet Explorer switch over to Chrome Frame automatically.

Developers who are limiting the performance of HTML5 apps or Java Script to make their website more compliant with Internet Explorer do not need to do so any more. All they need to do is to tag their website for Chrome Frame.

The tag for Chrome Frame does not affect the performance of the website if you are not using Internet Explorer as browser.

Do remember this is still meant for testing purposes for developers. 😉

Link: Developers Guide for Chrome Frame

6 Comments

nicky September 24, 2009

Acidd test 71/100 .
m using firefox..

what to do to make it 100/100 ?

Abhishek Kumar September 25, 2009

FF 3.5 on Mac – 93/100
Safari 4.0.3 on Mac – 100/100

Bhavya Kamboj October 3, 2009

Excellent! wonder why people still use IE

Aditya Kane October 3, 2009

@nicky: At the moment this works only with Internet Explorer, so nothing as yet for Firefox. But Firefox performs better that IE for html5 technology.
@Bhavya: A lot of people use IE, actually an overwhelming no of people use it, this also restricts Microsoft quite a lot from improving their browser or making changes drastically. If Microsoft feel the competitive heat then they might improve. Sometimes when one is at the top, one gets complacent.