Google Chrome Frame IE update

On September 22, 2009, Google released an early version of Google Chrome Frame, an open source plug-in that brings HTML5 and other open web technologies to Internet Explorer.

What exactly does Google Chrome Frame do? Well it allows you to render web pages in IE using Chrome’s rendering engine, WebKit.

You’ll be able to use HTML5 elements such as canvas, CSS border-radius and have access to powerful CSS selectors. Basically you’ll have all the power of Google Chrome in IE. Cool huh?

So how do we use this great tool? Well here’s the catch: Google Chrome Frame is offered as a plugin.That means the user has to install it on their PC. You can’t just add a script tag in your markup and it will magically work.

So we need to make sure that the user installs Google Chrome Frame on their PC. What’s the best way to do that, I hear you say? Present it as an update of course. Inspiration for the idea .

IE required updates

See that yellowish line with the little shield on the left? That’s called the Information Bar. It displays information about security updates, missing plug-ins and stuff like that.That’s where we will show our missing plugin message.

I know what you are thinking: “Is this ethical? Aren’t you lying to users ?”. Well…let’s look at it this way: we want to change the default rendering engine of a browser (IE’s Trident), to another one (Google Chrome’s WebKit)… so yeah, I consider that an update.

Ok here is where the technical stuff begins. First we need to include a meta tag in the <head> section of our document.

&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;chrome=1&quot; /&gt;

This <meta> tag ensures that users running IE with Google Chrome Frame installed will see web pages rendered by Google Chrome Frame. Now we just have to worry about those who don’t have Google Chrome Frame. Easy huh?

We need to detect if a user has Google Chrome Frame installed. And we can do that in 2 ways: server-side detection or JavaScript.We are going to use JavaScript.

We need to include the CFInstall.js file, provided by the nice people at Google.

&lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js&quot; charset=&quot;UTF-8&quot;&gt;&lt;/script&gt;

Next we need to have another script were we will create our Information bar and do all of our configuration.I prefer to call mine config.js. Feel free to name it whatever you want.

&lt;script type=&quot;text/javascript&quot; src=&quot;scripts/config.js&quot; charset=&quot;UTF-8&quot;&gt;&lt;/script&gt;

Here is the content of that file:

//add a class of js to the body tag for CSS purposes
document.getElementsByTagName('html')[0].className += ' js';

//read cookies
function readCookie(name){
    var cookieName = name + &quot;=&quot;;
    var ca = document.cookie.split(';');
    for (var i = 0; i &lt; ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ')
            c = c.substring(1, c.length);
        if (c.indexOf(cookieName) == 0)
            return c.substring(cookieName.length, c.length);
    }
    return null;
};

//we check for when the DOM has loaded and if the user has not closed our Information Bar
document.onreadystatechange = function(){
    if (document.readyState == &quot;complete&quot; &amp;&amp; !readCookie('refuseChromeInstall')) {
        CFInstall.check({
            //disable the default prompting mechanism
            preventPrompt: true,

            //if Google Chrome Frame is missing we execute the folowing function
            onmissing: function(){
                //create the Information Bar
                var updateBar = document.createElement('div');
                updateBar.id = 'updateBar';

                updateBar.onmouseover = function(){
                    this.className = 'over';
                };
                updateBar.onmouseout = function(){
                    this.className = '';
                };

                //when the user clicks on the Information Bar, open a popup with the Google Chrome Frame terms of service page
                updateBar.onclick = function(){
                    window.open('http://www.google.com/chromeframe/eula.html', 'GCFInstall', 'width=760, height=500');
                };

                var updateMessage = document.createElement('div');
                updateMessage.id = 'updateMessage';
                updateMessage.appendChild(document.createTextNode('Internet Explorer is missing updates required to view this site. Click here to update...'));
                updateBar.appendChild(updateMessage);

                var closeUpdateBar = document.createElement('div');
                closeUpdateBar.id = 'closeUpdateBar';
                closeUpdateBar.onclick = function(){
                    //if the user chooses not to install Google Chrome Frame, we set a cookie, so as not to show the Information Bar on every page refresh
                    document.cookie = 'refuseChromeInstall=1';

                    //remove the Information Bar
                    document.getElementsByTagName('body')[0].removeChild(document.getElementById('updateBar'));
                };

                //append the close button to our Information Bar
                updateBar.appendChild(closeUpdateBar);

                //append the Information Bar to our body element
                document.getElementsByTagName('body')[0].appendChild(updateBar);
            }
        });
    }
};

Now that we have our Information Bar created, we need to give it some <style>;

#updateBar {
	width: 100%;
	padding: 5px 0px;
	border-bottom: 1px solid #666;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 10000;
	font-family: Bitstream Vera Sans,verdana,sans-serif !important;
	font-size: 11px !important;
	color: #000 !important;
	background: #FFFFE1;
	cursor: default;
}

* html #updateBar {
	position: absolute;
	top:expression(eval(document.compatMode &amp;&amp; document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop);
}

#updateBar.over {
	color: #fff !important;
	background: #3399ff;
}

#updateMessage {
	height: 16px;
	line-height: 16px;
	padding: 0px 23px;
	background: url(../images/icons/install-shield.gif) 3px 0px no-repeat;
}

#updateBar.over #updateMessage {
	background-position: 3px -16px;
}

#closeUpdateBar {
	width: 16px;
	height: 16px;
	position: absolute;
	top: 5px;
	right: 1px;
	z-index: 10001;
	background: url(../images/icons/close.gif) 0px 0px;
}

#updateBar.over #closeUpdateBar {
	background-position: 0px -16px;
}

A quick tour of how things are supposed to work:

When a user that has Google Chrome Frame installed views the site, everything’s fine and dandy. They are using the WebKit rendering engine and the page show’s up nicely. If a user does not have Google Chrome Frame installed, they will be prompted by the Information Bar to install it as an update.

When the user clicks on the Information Bar, a popup window appears with the Google Chrome Frame Terms of Service page and two options: accept and install the plugin or cancel.

If the user chooses not to install Google Chrome Frame, we don’t want to bug them every time they refresh or leave a page. So when the user clicks the little close button on the right side of the Information bar, the Information Bar will no longer appear. They will be prompted to install the plugin next time they view the website.

You can see a demo here and download the script here.

Note that the Information Bar will only appear if you view the demo page in IE and the blue <div/> will only spin in a WebKit based browser or in IE but after you install Google Chrome Frame.

Here’s a screenshot of WebKit transitions working in IE8.

WebKit transitions working in IE8

You will need to restart your browser after the installation has completed in order to see the effects.

2009: 09/23
CATEGORY: (X)HTML
JS
TAGS: CFIE update
google chrome frame
ie
javascript
webkit
Write comment

- Romeo Adrian Cioaba
- September 23rd, 2009
- REPLY
- QUOTE
This is excelent!

The sooner we get more people to use Google Chrome Frame the better. Who says it’s not ethical has never built a site to support IE. The end justifies the means!
- Tim
- November 13th, 2009
- REPLY
- QUOTE
If I access the example page using IE6, should it prompt me to install Chrome Frame? It does not (and it I don’t already have it installed). I have checked the security settings and I don’t think that is the issue. Or am I just misunderstanding how this should work?
- admin
- November 16th, 2009
- REPLY
- QUOTE
@Tim
Hello and thanks for commenting.
Yeah I looked at the demo page in both IE6 and IE7 and true the script does not work.Weird since I tested it before I made this blogpost.

After some digging around in the code, I found that the onmissing function from the CFInstall.check() isn’t firing in IE6 and IE7.

I’ll have to do some investigating and see why.I’ll update the post as soon as I find a solution.
- Chrome
- December 23rd, 2009
- REPLY
- QUOTE
Something like this project!
http://code.google.com/p/chromeframeiebar/
- admin
- December 29th, 2009
- REPLY
- QUOTE
@Chrome
glad to see someone taking interest in this
- Chrome
- January 4th, 2010
- REPLY
- QUOTE
@admin
I’m using in all my sites. Since I use jQuery everywhere, I used it to make that code, based on your ideas! Excelent job, the only problem is that it need to be more widespread. Chrome Frame is the best way to kill IE in general
- Ben
- February 16th, 2010
- REPLY
- QUOTE
Hi, I have been trying to confirm that my IE8 has the chrome frame.
Chrome Frame installation is done. I’m trying a lot to confirm/prove it. None of my efforts are supporting me.
But, I see the above spin working in chrome browser and NOT in IE8 with chrome frame installed.
My final point is to prove that the chrome frame is INTEGRATED with IE8. Please help me.

I also have this submitted here:
http://code.google.com/p/chromeframeiebar/issues/detail?id=1

TrackBack URL

No trackbacks yet.

Not another WordPress weblog

Google Chrome Frame IE update

Information

Recent entry

Archive

Category