FAQ for web developers

Introduction

What's inside Google Chrome?
Where can I find information about other browsers?

User agent

What is Google Chrome's user agent string?

Language encoding

Google Chrome isn't displaying characters correctly
Declaring encoding using JavaScript (document.write) doesn't work
Google Chrome is displaying '%B1%C1%C3%E5' instead of two Chinese characters

Rendering and browser behaviour

My site renders differently in Google Chrome than in Internet Explorer
How can I test my website in Google Chrome?
Font specifications in an external style sheet do not take effect
My website's popups aren't appearing in Google Chrome
My SSL-protected website is showing an exclamation mark in Google Chrome, instead of a lock
The HTML5 database API isn't supported in Google Chrome
How can I customize the appearance and function of Google Chrome shortcuts that point to my page?
How can my web page open a new tab in a separate process?
How can I opt my website out of Chrome Instant URL loading?

Search

Entering an intranet website address brings up a search results page, rather than the intranet site
How can I include my site's search in Google Chrome's search options?

Introduction

1. What's inside Google Chrome?

Google Chrome contains many features that can be harnessed by webmasters to deliver a better end-user experience. Google Chrome comes with Gears built in, which allows webmasters to take advantage of APIs such as offline storage. In addition, Google Chrome allows your web application to look and feel like a "desktop" application, as users can launch Google Chrome in a mode with a minimalist UI, featuring nothing but a title bar.

Google Chrome also uses a brand new JavaScript engine (V8), which is much faster than existing JavaScript interpreters. This means you can create more complex and more intensive AJAX applications with fewer speed and processing constraints. Finally, Google Chrome is built on top of WebKit, so Google Chrome users will benefit from the CSS3 features being added to WebKit as those features are released.

2. Where can I find information about other browsers?

There are a number of other browsers to choose from. Find out about some of the more widely used browsers at the websites listed below:

User agent

3. What is Google Chrome's user agent string?

Danger: Changing the way your website renders based on the user agent string may sound easy, but in reality it's one of the main causes of cross-browser bugs in websites. Please consider using object detection or other methods before resorting to parsing the user agent string.

Google Chrome's user agent string is (on Windows):

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/A.B (KHTML, like Gecko) Chrome/X.Y.Z.W Safari/A.B.

Google Chrome uses the WebKit rendering engine, which is shared by other browsers such as Apple's Safari. Web pages should look the same in Google Chrome as they will in these other WebKit-based browsers.

It's preferable to check for the presence of the WebKit rendering engine, rather than checking for a specific browser name (such as Google Chrome or Safari). We recommend using the following code:

var isWebKit = navigator.userAgent.indexOf("WebKit") > -1;

If you need to work around a bug in a certain browser version, or check for the existence of a web platform feature that isn’t detectable directly - the WebKit version number will give you that information. We recommend using the following code:

var webKitVersion = parseFloat(navigator.userAgent.split("WebKit/")[1]) || undefined;
if (webKitVersion && webKitVersion < 500 ) {
 // Work around old WebKit bug here.
}

If you still need to check whether you're running in Google Chrome (e.g. to display a banner targeted only at Chrome users). We recommend using the following code:

// Caution: Are you sure you don’t want to check for a WebKit-based browser?
var isChrome = navigator.userAgent.indexOf("Chrome/") > -1;

Checking Chrome’s version number is generally a bad idea. For most uses, the only interesting pieces of data are the availability of a web platform features or the existence of an old browser bug. Both these use cases are addressed above and do not require checking Chrome’s version string directly. If you still need to check Chrome’s version, we recommend using the following code:

// Caution: You nearly certainly don’t want to use this!
// See WebKit version detection and notes on object detection above. 
function ChromeVersion() {
  try {
    return parseFloat(navigator.userAgent.match(/Chrome\/(\d+\.\d+)/)[1]) || undefined;
  } catch(e) {}
  return undefined;
}

// Check whether Chrome is newer than version 7.2.
var chromeVersion = ChromeVersion();
if (chromeVersion && chromeVersion > 7.2) {
  alert("Chrome version > 7.2");
} else {
  alert("Not running Chrome or Chrome version <= 7.2");
}

Language encoding

4. Google Chrome isn't displaying characters correctly

To help browsers render your content correctly, you should always provide content and character encoding information at the top of your document's source. If you're using frames or iframes, specify the encoding at the top of the source of those frames, as well. Some browsers (including Google Chrome) won't recognize encoding declarations that appear deep in a document (such as after CSS or script in your document's head section).

Example of good encoding placement:

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <script type="text/javascript">
    ... your JavaScript code ...
    </script>
    .......

Also make sure that your web server is not sending conflicting HTTP headers. Headers sent by the web server will override any charset declarations in your page.

5. Declaring encoding using JavaScript (document.write) doesn't work

Google Chrome doesn't read encoding information that's declared with document.write(). If you're using this method to declare encoding in iframes, for example, you may see garbled characters when the iframe is rendered. Instead of:

frame1.js

document.write("<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">");
    ... other JavaScript code ...

...we recommend the following:

frame1.html

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <script type="text/javascript">
    ... your JavaScript code ...
    </script>
    ...

6. Google Chrome is displaying '%B1%C1%C3%E5' instead of two Chinese characters

Google Chrome percent-encodes query parameters within a URL. Make sure that your server-side scripts are properly decoding percent-encoded characters before processing the data.

Scripts and web applications

7. My ActiveX control is not loading

You should specify an NPAPI verson of the plugin.

ActiveX is only supported by Internet Explorer (and browsers built on top of Internet Explorer) on Windows. Google Chrome, Mozilla Firefox, Apple Safari, and others do not support ActiveX. Instead, these browsers make use of the Netscape Plugin Application Programming Interface (NPAPI).

8. My JavaScript isn't executing properly

There are a couple of ways to view JavaScript errors and work to debug them in Google Chrome:

JavaScript Console: click the Page menu icon and select Developer > JavaScript Console. From here, you'll be able to view errors in the JavaScript execution, and enter additional JavaScript commands to execute.
JavaScript Debugger: available as Page menu icon > Developer > Debug JavaScript, the debugger provides a command prompt from which you can set breakpoints, backtrace, and more. Type help at the debugger command line to get started.

Rendering and browser behaviour

9. My site renders differently in Google Chrome than in Internet Explorer

Google Chrome uses a different rendering engine than Internet Explorer, so may display web pages differently. Apple Safari uses the same rendering engine as Google Chrome (WebKit) and should display pages the same way.

If your site isn't rendering properly in any browser, make sure your HTML and CSS are valid by testing them at http://validator.w3.org/.
If your site doesn't render properly in Google Chrome or Apple Safari, file a bug at webkit.org as described at http://webkit.org/quality/reporting.html.
If your site renders properly in Apple Safari but not in Google Chrome, please file a bug against Google Chrome at http://code.google.com/p/chromium/issues/list.

10. How can I test my website in Google Chrome?

There are several tools to help you test your website in Google Chrome:

Web Inspector
Right-click on any component on a web page to launch the web inspector. You'll be able to see the elements and resources associated with the component on which you clicked, including a hierarchy view of the DOM and a JavaScript console.
Task Manager
Select the Page menu icon, then Developer > Task Manager (or press Shift+Esc). The task manager shows all running Google Chrome processes, and the resources that they're using (memory, CPU, and network).
JavaScript Debugger
Select the Page menu icon, then Developer > Debug JavaScript. This launches a JavaScript debugger that can be used to attach to existing processes.

11. Font specifications in an external style sheet do not take effect

Make sure that your external stylesheets are being served with the correct charset and content-type. They should be served as text/css or text/css;charset=X.

It's better not to specify charset for a style sheet in the HTTP header; instead, add the declaration to the very beginning (no preceding characters, including spaces and line breaks) of your CSS stylesheet as follows:

@charset "xxx"

Neglecting to specify encoding information could prevent your stylesheet from being properly parsed.

To learn more about this topic, please visit the World Wide Web Consortium's documentation at http://www.w3.org/TR/CSS21/syndata.html#charset.

12. My website's popups aren't appearing in Google Chrome

Google Chrome's default behavior is to minimize and then display only the title bar of pop-ups in the lower-right section of the browser window. Users can view a pop-up's content by dragging its title bar into a more visible position. This allows pop-ups to load, so as not to break the functionality of sites which depend on them. It also prevents undesired pop-ups from covering the page and distracting users.

13. My SSL-protected website is showing an exclamation mark in Google Chrome, instead of a lock

This indicates a problem with the use of SSL on the page. Clicking on the exclamation mark in Google Chrome will provide more details about the issue. Often, issues are the result of mixed content on your page - for example, your top level webpage is served over HTTPS and is protected via SSL, but you have also included elements on the page (such as images, script, or CSS) via HTTP. All content must be served over HTTPS in order for the lock to display.

14. The HTML5 database API isn't supported in Google Chrome

The Google Chrome team plans to support the HTML5 database API, as well as the other APIs that WebKit supports, including offline and workers, in a future release.

15. How can I customize the appearance and function of Google Chrome shortcuts that point to my page?

Google Chrome users can create shortcuts for any web page by selecting Create application shortcuts from the Page menu icon. By default, new shortcuts take the title and favicon of the page to which the shortcut is pointing.

You can specify the title, description, and URL of Google Chrome shortcuts that point to your page by inserting specific meta tags in your document's <head> section.

To customize:	Tag	Example
The shortcut title	application-name	`<meta name="application-name" content="Gmail"/>`
The description (used when more space is available, such as in the preferences panel)	description	`<meta name="description" content="Google's approach to email"/>`
The URL to open when the shortcut is clicked	application-url	`<meta name="application-url" content="http://www.gmail.com"/>`
The shortcut icon		`<link rel="icon" href="gmail_32x32.png" sizes="32x32"/> <link rel="icon" href="gmail_48x48.png" sizes="48x48"/>`

For example:

<head>
    <meta name="application-name" content="Gmail"/>
    <meta name="description" content="Google's approach to email"/>
    <meta name="application-url" content="http://www.gmail.com"/>
    <link rel="icon" href=gmail_32x32.png sizes="32x32"/>
    <link rel="icon" href=gmail_48x48.png sizes="48x48"/>
    </head>

These tags closely match those of the Gears Desktop API. Please refer to the Gears Desktop API documentation for more details.

16. How can my web page open a new tab in a separate process?

Google Chrome has a multi-process architecture, meaning tabs can run in separate processes from each other, and from the main browser process. New tabs spawned from a web page, however, are usually opened in the same process, so that the original page can access the new tab using JavaScript.

However, Google Chrome will look for hints to open new tabs in a separate process, if you are navigating the new tab to a different web site.

The easiest approach is to use a link to a different web site that targets a new window without passing on referrer information. Google Chrome recognizes this as a hint to keep the new page isolated from the original page, and it will load the new page in a separate process. For example:

<a href="http://differentsite.com" target="_blank" rel="noreferrer">Open in new tab and new process</a>

If you want the new tab to open in a new process while still passing on referrer information, you can use the following steps in JavaScript:

Open the new tab with about:blank as its target.
Set the newly opened tab's opener variable to null, so that it can't access the original page.
Redirect from about:blank to a different web site than the original page.

For example:

var w = window.open();
    w.opener = null;
    w.document.location = "http://differentsite.com/index.html";

These hints only work for URLs that are on a different domain or protocol than the page spawning the pop-up. For example, if the page spawning the popup is on http://www.example.com/:

a different domain would be http://www.example.org or http://www.example2.com
a different protocol would be https://www.example.com

17. How can I opt my website out of Chrome Instant URL loading?

If a Google Chrome user has enabled the "Chrome Instant" feature, most webpages will load as soon as the URL has been typed into the address bar, before the user hits Enter.

If you are a website administrator, you can prevent Google Chrome from exhibiting this behavior on your website:

When Google Chrome makes the request to your website server, it will send the following header:
```
X-Purpose: instant
```
Detect this, and return an HTTP 403 ("Forbidden") status code.
When Google Chrome receives this status code, it will add your website to a blacklist maintained on the client. This blacklist will last the duration of that user’s browsing session.

Search

18. Entering an intranet website address brings up a search results page, rather than the intranet site

When a user enters a single word into the address bar, Google Chrome performs a search for the term and returns results using the user's default search engine. At the same time, Google Chrome issues a HEAD request for http://term, to see if it's a valid website. If Google Chrome receives an HTTP/2xx response (such as HTTP/200 OK), the user will be asked if they want to visit the site instead. Clicking through to the site from the prompt will set the website as the default target for that term for future requests.

Google Chrome will also display the prompt if it receives:

an HTTP/401 or HTTP/407 response
an HTTP/3xx redirect that terminates in a page with any of the above responses

You should make sure that your web server properly responds to HEAD requests, and not just GET requests for a page.

For example, if a site exists at http://project.intranet.example.com, and a user within that corporate network enters project into the address bar:

Google Chrome will return search results for the term project
At the same time, Google Chrome will check if http://project is a valid website. If so,
A prompt will appear, asking if the user would like to visit http://project
Once the user clicks through to http://project, Google Chrome sets http://project as the target for all future instances of project in the address bar

Users can override the default (search) behavior by entering project/ or http://project, or by selecting the address bar entry that reads project/ instead of Search for project.

19. How can I include my site's search in Google Chrome's search options?

By providing an OpenSearch description document (OSDD), you enable Google Chrome to include your site in the list of search engines in the browser. For more information about OpenSearch, please visit http://www.opensearch.org.