How do you hide the Address bar in Google Chrome for Chrome Apps?

Hiding the Address Bar in Google Chrome for Chrome Apps

Explore the methods and limitations for concealing the address bar in Google Chrome when developing Chrome Apps, focusing on immersive and distraction-free user experiences.

Google Chrome's address bar is a fundamental part of the browsing experience, providing navigation, security indicators, and search functionality. However, for certain applications, especially those designed as Chrome Apps, the address bar can be an unnecessary distraction, or even interfere with the desired user experience. This article delves into how to effectively hide the address bar for Chrome Apps, discussing the 'kiosk' mode and other relevant configurations, while also highlighting the inherent security considerations and limitations.

Understanding Chrome Apps and Display Modes

Chrome Apps, distinct from regular web pages, are designed to offer an app-like experience directly within the Chrome browser or Chrome OS. They can run in their own windows, separate from the standard browser interface. This distinction is crucial when considering how to hide browser UI elements like the address bar. The primary mechanism for achieving a full-screen, address-bar-free experience in Chrome Apps is through specific display modes defined in the application's manifest file.

The display field in the manifest.json file is key. While fullscreen might seem like the obvious choice, it's often paired with kiosk mode for true address bar concealment. Regular fullscreen typically hides only the browser's tab and toolbar, but not necessarily the address bar in all contexts, especially when dealing with web content within the app.

{
  "name": "My Kiosk Chrome App",
  "version": "1.0.0",
  "manifest_version": 2,
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "permissions": ["fullscreen", "system.display"],
  "minimum_chrome_version": "38",
  "display": "fullscreen",
  "kiosk_enabled": true
}

Example manifest.json configuration to enable kiosk mode for a Chrome App. Note the display and kiosk_enabled fields.

Implementing Kiosk Mode for Full Immersion

Kiosk mode is specifically designed for dedicated-purpose devices where the Chrome browser runs a single application in a locked-down, full-screen environment. When a Chrome App is launched in kiosk mode, it takes over the entire display, effectively hiding all browser UI elements, including the address bar, tabs, and taskbar. This is the most reliable way to achieve an immersive experience without the address bar.

To enable kiosk mode, you typically need to configure the Chrome browser itself or the Chrome OS device to launch a specific Chrome App in this mode. This is often done through device management policies for enterprise or educational deployments. For development and testing, you can often launch Chrome with specific command-line flags. Once enabled, the app will launch directly into full-screen, hiding the address bar and other UI.

Workflow for deploying a Chrome App with a hidden address bar using Kiosk Mode.

Alternative Approaches and Limitations

While kiosk mode is the most robust solution for hiding the address bar in Chrome Apps, other methods might offer partial solutions or apply to different contexts. For instance, using window.open() with specific features like toolbar=no can create new windows without a toolbar, but this typically doesn't hide the address bar itself in the main window or for a fully standalone application experience.

Another approach is to use the chrome.app.window.create API within your background script to create an app window with specific options. The frame option can be set to none to remove the standard browser frame, giving you complete control over the window's appearance. However, this still requires you to implement your own window controls (close, minimize, maximize) and doesn't inherently hide the address bar if the content loaded is a standard web page that the browser deems requires it for security or navigation.

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('index.html', {
    id: 'mainWin',
    bounds: {
      width: 800,
      height: 600
    },
    frame: 'none' // 'none' removes the default window frame and controls
  });
});

Creating a frameless app window using chrome.app.window.create in background.js.

Ultimately, if your goal is to completely hide the address bar for a Chrome App, especially for dedicated devices, kiosk mode remains the most effective and officially supported method. For less restrictive scenarios or web apps, the browser's security model will prioritize user safety and transparency, making full address bar concealment generally impossible without special browser configurations or an application-specific context like a Chrome App in kiosk mode.