Entfernen Sie die Vollbild-Fensterdekoration und den Chrome OS-App- / Kiosk-Modus

Question

Jul 10, 2014, 06:10 PM

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

Entfernen Sie die Vollbild-Fensterdekoration und den Chrome OS-App- / Kiosk-Modus

Ich habe eine Webanwendung, die ich im Kioskmodus auf einer Chromebox ausführen möchte. Bisher hat so ziemlich alles geklappt, aber ich kann den nervigen großen weißen Rand um den Bildschirm nicht loswerden. Ein Screenshot der oberen linken Ecke des Bildschirms (Vollbild). Ich habe einen schwarzen Rand hinzugefügt, um das Bild zu skizzieren.

Meine Webanwendung beginnt am blauen Rand, der weiße Rand wird von Google Chrome hinzugefügt.

Meine Applikationenmanifest.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
}

Die Datei, die das App-Fenster erstellt (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);
});

Die Anwendung ist nur eine Webansicht (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>

Und das Stylesheet dehnt die Webansicht auf volle Dimensionen aus (application.css):

webview {
    height: 100%;
    width: 100%;
}

Auch wenn ich das eingestellt habeframe zu'none', es scheint den Fensterrahmen nicht zu entfernen. So erzielen Sie das echte Vollbild-Erlebnis. So ähnlich sieht es aus, wenn ich auf meinem Desktop in Google Chrome die Taste F11 drücke:

Zu kommentieren