Remove fullscreen window decoration/border Chrome OS app/kiosk mode

google-chrome, google-chrome-app, google-chrome-os, html, javascript

Solution

In Chromium, the `<body>` tag has a default margin of 8 pixels. If you want to dedicate all space to the webview, make sure that the `margin` is `0`, by using the following stylesheet:

html, body, webview {
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
    width: 100%;
    height: 100%;
}

Problem

I have a web application that I want to run in kiosk mode on a chromebox. So far I've pretty much got it all working, but I can't seem to get rid of the annoying big white border around the screen. A screenshot of the top left corner of the screen (fullscreen). I have added a black border to outline the image. My web application starts at the blue, the white border is added by Google Chrome. My app's `manifest.json`: ``` { "manifest_version": 2, "name": "snipped", "description": "snipped", "version": "1.0", "icons": { "128": "128.png" }, "app": { "background": { "scripts": [ "background.js" ], "persistent": false } }, "permissions": [ "unlimitedStorage", "notifications", "webview" ], "kiosk_enabled": true, "kiosk_only": true } ``` The file that creates the app window (`background.js`): ``` chrome.app.runtime.onLaunched.addListener(function() { var options = { state: 'fullscreen', resizable: false, alwaysOnTop: true, bounds: { top: 0, left: 0, width: 1920, height: 1080 }, frame: 'none' // Not hiding anything }; chrome.app.window.create('application.html', options); }); ``` The application's just a webview (`application.html`): ``` <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>Snipped</title> <link rel="stylesheet" type="text/css" href="application.css"> </head> <body> <webview src="http://snipped.com"></webview> </body> </html> ``` And the stylesheet stretches the webview to full dimensions (`application.css`): ``` webview { height: 100%; width: 100%; } ``` Even though I have set the `frame` to `'none'`, it doesn't seem to remove the window frame. How to achieve the true fullscreen experience. Similar to how it looks when I press F11 on my desktop's Google Chrome:

Original source