I have a web application that I want to run in kiosk mode on chromebox. So far, everything worked out for me, everything works, but I can’t get rid of the annoying large white border around the screen. Screenshot in the upper left corner of the screen (in full screen mode). I added a black border to draw the image.
My web application starts with blue, a white frame is added by Google Chrome.
My application 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
}
File creating the application 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'
};
chrome.app.window.create('application.html', options);
});
The application is just 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 size ( application.css):
webview {
height: 100%;
width: 100%;
}
frame 'none', , , . . , , F11 Google Chrome:
